jquery Basic Tutorial Reading notes one

First, select the element

1. Understanding Dom Understanding parent element, child element, sibling element .... You can use Firefox Firebug to assist with viewing.

2. Use the $ () function

There are 3 basic selectors: tag name ,ID, class .

Example: Tag name: CSS in p{} jquery can use $ ("P") to get all the paragraphs in the document.

Id:css #some-id{} You can use $ ("#some-id") to get an element with ID Some-id in the document.

Class: In CSS. some-class{} Writing $ (". Some-class") gets all the elements in the document that are class Some-class

3.CSS Selector

Example code:

1 <ulID= "Selected-plays">2     <Li>comedies3       <ul>4         <Li><ahref="#"></a>As you like it</Li>5         <Li>Sub-column</Li>6         <Li>Sub-column Two</Li>     7       </ul>8     </Li>9     <Li>Ten Tragedies One         <ul> A             <Li>Sub-column</Li> -             <Li>Sub-column</Li> -         </ul> the     </Li> -     <Li> -  History -         <ul> +             <Li>Sub-column</Li> -             <Li>Sub-column</Li> +         </ul> A     </Li> at </ul>

To add a style to a level based on a list item, such as when we want top level items to be arranged horizontally, we can first define a horizontal class in the style sheet

1 . Horizontal {2  float:left; 3 List-style:none; 4 margin:10px; 5 }

So then we'll use the selector in jquery to achieve this small effect.

1 $ (document). Ready (function() {2 $ ("#selected-plays > Li"). addclass ("Horizontal"); 3 });

We use the child element combination (>) to add the horizontal class to the top-level item, which means finding the child elements of an element with an ID of selected-plays (#selected-plays) (>) All of the list items (LI) in the.

Next we'll add a style to the list of non-top items, using the negation pseudo-class selector implementation. The code is as follows:

$ (document). Ready (function() {$ ("#selected-plays > Li"). addclass ("horizontal");  $ ("#selected-plays li:not (. Horizontal)"). AddClass ("sub-level");});

This time is obtained for each list item (LI):

is the descendant element of an element with ID selected-plays (#selected-plays); No horizontal class: not (. Horizontal)

4. The property selector---Select elements through the attributes of the HTML element, such as the title property of the link or the ALT attribute of the image.

$ ("Img[alt")

The property selector uses a wildcard syntax borrowed from a regular expression to indicate that the value begins at the beginning of the string, with a value at the end of the string, and also with an asterisk * to indicate that the value to match can appear anywhere in the string, with an exclamation point! Represents the inverse of a value.

Instance code:

$ (document). Ready (function() {$ (' a[href^= ' mailto: '] '). addclass (' mailto '); $ (' a[href$= ". pdf"]). addclass (' PDFlink ');});

5. Custom Selectors

The syntax for a custom selector is the same as the pseudo-class selector syntax in CSS, where the selector begins with a colon (:).

JavaScript arrays are numbered starting at 0, while CSS starts at 1.

I'll come here today. Continue to refuel tomorrow!

jquery Basic Tutorial Reading notes one