The basic selector for jquery tutorial 1.jquery

When reading this article, it is suggested that there is a certain Html,css,javascript foundation

jquery is a multi-browser-compatible, lightweight JavaScript library, and we can do the following with jquery when we do the development of the previous paragraph:

1. Find the elements in HTML

2. Change the contents of HTML

3. According to the user's feedback, such as press the button page to make the corresponding action

4. Using animation effects and network interaction

5. Change the content of the page without refreshing the page

The first thing to understand is DOM, which is the abbreviation for the document Object model, which is simply the tree structure generated when the browser loads the HTML. Such as:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/74/F5/wKiom1YvMm-QzPLZAAFqLO8ft34579.jpg "title=" Qq20151027161453.png "alt=" Wkiom1yvmm-qzplzaafqlo8ft34579.jpg "/>

When the browser loads the DOM as follows: The browser first loads the HTML into the DOM, but sometimes JavaScript is sometimes run before the DOM is loaded, but the DOM is not loaded at this point, so, to get the DOM to load and then execute the JS code, you need:

$ (document). Ready (function () {

Code block ...

});

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/74/F2/wKioL1YvM0LCugrsAAJQg0qkTr4317.jpg "title=" 1.png " alt= "Wkiol1yvm0lcugrsaajqg0qktr4317.jpg"/>

#id选择器

Format: $ ("#id")

Example:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/74/F1/wKioL1YvII-QMT1ZAAGEJsQBCAA940.jpg "title=" ID selector. png "alt=" wkiol1yvii-qmt1zaagejsqbcaa940.jpg "/>

Element Selector

Format: $ ("element")

Example:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/74/F1/wKioL1YvJz7ADDLgAAFU9FOtbHo845.jpg "title=" Element selector. png "alt=" wkiol1yvjz7addlgaafu9fotbho845.jpg "/>

. class Selector

Format: $ (". Class")

Example:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/74/F4/wKiom1YvJ6Piu6mJAAGrQSzjYg8214.jpg "title=" Class.png "alt=" Wkiom1yvj6piu6mjaagrqszjyg8214.jpg "/>

. * Selector

Format: $ ("*") Note:Since all elements are obtained using the * selector, some browsers willrelatively slow, this selector also needs to be used with caution.

Example: 650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/74/F1/wKioL1YvKJ-xbeXkAAGvpI2E9tI549.jpg "title = ". png" alt= "wkiol1yvkj-xbexkaagvpi2e9ti549.jpg"/>

Sele1,sele2,sele3 selector: each separated by commas, which type can be as $ ("#id,. Class,myname")

Format: $ ("sele1,sele2,sele3")

Example:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/74/F4/wKiom1YvKYWgS122AAHOjUQQBXA114.jpg "title=" Sele.png "alt=" Wkiom1yvkywgs122aahojuqqbxa114.jpg "/>

ance desc selector:the ance parameter (shorthand for the ancestor ancestor) represents the parent element, and the desc parameter (shorthand for descendant descendants) represents the descendant elements, including child elements, grandchild elements, and so on.

Format: $ ("ance desc")

Example:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/74/F4/wKiom1YvKovSFnsxAAGTTYCxvmo214.jpg "title=" The code for An.png "alt=" wkiom1yvkovsfnsxaagttycxvmo214.jpg "/> Horizontal line represents all the label elements under the DIV, but cannot select the LABEL element inside the <p>

$ ("div label")//Gets all the label elements under the Div, including child generation and grandchildren

Parent>child Selector

Format: $ ("Parent>child")

Example:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/74/F2/wKioL1YvLKSgM0e2AAHcWzyo-JI935.jpg "title=" pa.png "alt=" Wkiol1yvlksgm0e2aahcwzyo-ji935.jpg "/>

$ ("Div>label")//Gets all sub-generation elements under Div, not including grandchildren

The next element closest to the Prev+next selector "prev" element is returned by the "next" selector and returns only one element.

Format: $ ("prev+next")

Example:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/74/F5/wKiom1YvLQWRQk14AAHTqpjc9KI239.jpg "title=" pn.png "alt=" Wkiom1yvlqwrqk14aahtqpjc9ki239.jpg "/>

Prev~next Selector

Format: $ ("Prev~next")

Example:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/74/F5/wKiom1YvLjTwMPZUAAHgzmj0myk190.jpg "title=" Sib.png "alt=" Wkiom1yvljtwmpzuaahgzmj0myk190.jpg "/>

Summarize

1.$ ("div span") gets all the span child elements under the div

2.$ ("Div>span") gets all the immediate sub-elements under the Div, no grandchildren

3.$ ("Div+span") gets the div contiguous span element

4.$ ("Div~span") gets all the span elements adjacent to the Div

The basic selector for jquery tutorial 1.jquery