We learned various CSS selectors when we were learning the basics of HTML, including id selectors, class selectors, tag selectors, descendant selectors, descendant selectors, intersection selectors, union selectors, pseudo-class selectors, Structural pseudo-class selectors and more. And the various ways to get elements that we learned in native JS.
In our jQuery, there are also many selectors to get elements, and we have done a unified get standard encapsulation
content:
Three: Implicit iteration:
Implicit iteration makes all li color-changing cases:
jQuery basic selector:
Basic format: $ ('css selector')
| name | usage | describe |
| Wildcard selector | $(' * ') | get all elements |
| Tag selector | $(' div ') | Get elements of the same class tag |
| ID selector | $(' #div ') | Get the element with the specified ID |
| class selector | $(' .div ') | Get an element of the specified class |
| descendant selector | $(' ul li ') | Get an element of a class in descendants |
| child selector |
$(' ul>li ') | Get a certain type of element in the children |
| intersection selector | $(' li.name ') | get the intersection element |
| union selector | $(' li,p,div ') | get multiple elements |
Here are two examples:
1. Get the li tag under ul, and the result is that two li are obtained, which are stored in a pseudo -array
<body>
<ul>
<li></li>
<li></li>
</ul>
<script>
console.log($('ul li'));
</script>
</body>
2. Get all the tags, all the tags on the page are stored in a pseudo-array
<body>
<div></div>
<p></p>
<ul>
<li></li>
<li></li>
</ul>
<script>
console.log($('*'));
</script>
</body>
jQuery filter selector:
Note: The difference between jQuery's filter selector and CSS' structure selector is that its index starts from 0
| grammar | Usage (take the li element as an example) | describe |
| :first | $(' li:first ') | get the first li element |
| :last | $(' li:last ') | get the last li element |
| :eq(index) | $ ('li: eq (1)') | In the obtained li element, the li with index 1, note that the index starts from 0 |
| :odd | $(' li:odd ') | In the obtained li elements, select the li with an odd index |
| :even | $(' li:even ') | In the obtained li elements, select the li with an even index |
Two examples:
1. Select the li element with an odd index and change its color to green (the jQuery css method is used to transform the style)
Format: $('selector').css('property', 'property value'')
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
$('ul li:odd').css('background','green');
</script>
</body>Because the index of the filter selector starts at 0, getting an odd index is actually a discoloration of the even bits in number
2. Make the li with index 3 pink
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
$('ul li:eq(3)').css('background','pink');
</script>
</body>The third of the index, since the index starts at 0, it is actually the fourth discoloration in quantity
Implicit iteration:
If we get all the li's and set them to be pink: $('ul li').css('background','pink') , you will find that all the li's are pink as shown.
But at this time we will think, we did not use the for loop to set pink for each li? Why is everything pink? , which is jQuery's implicit iteration
Implicit iteration: The process of traversing internal DOM elements stored in the form of pseudo-arrays is called implicit iteration. It traverses all matched elements and adds corresponding methods to each element.
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
$('ul li').css('background','pink');
</script>
</body>
Compared with native JS, jQuery's implicit iteration is more convenient, and we can make development more agile when we want to make all acquired tags the same style