The second part of the jQuery selector series: Filter selector sub-element selector and jquery Selector

The second part of the jQuery selector series: Filter selector sub-element selector and jquery Selector
* Contents [1] General Form [2] First and last elements [3] words before unique elements

The basic selector and hierarchical selector have been introduced in the previous article. This article introduces the filter selector. The filter selector is the largest and most brilliant part of the jQuery selector. Based on the pseudo-class selector of CSS structure, jQuery filter selector adds many extension functions. This article starts with the filter selector of the child element closest to the CSS selector.

 

General Form

$ (': Nth-child (index )')

$ (': Nth-child (index)') Select the index child element of each parent element (index starts from 1) and return the collection element.

$ (': Nth-child (1)') 1st child elements under each parent element $ ('span: nth-child (1) ') 1st child elements under each parent element, the child element is the span element $ ('div span: nth-child (1) '). Each child element is the 1st child element under the parent element of the div element, and the child element is the span element.

<Button id = "btn1" style = "color: red;" >$ (': nth-child (1 )') </button> <button id = "btn2" style = "color: blue;" >$ ('span: nth-child (1 )') </button> <button id = "btn3" style = "color: green;" >$ ('div span: nth-child (1 )') </button> <button id = "reset"> restore </button> <div id = "t1"> <I> 1.1 </I> <span> 1.2 </span> </div> <p id = "t2"> <span> 2.1 </span> <I> 2.2 </I> </p> <div id = "t3"> <span> 3.1 </span> <I> 3.2 </I> </div> <script src = "jquery-3.1.0.js"> </script> <script> reset. onclick = function () {history. go ();} // match the 1st child elements of each parent element. The result is 1.1, 2.1, and 3.1. // [note] Actually, the 

Structure pseudo class selector nth-child (n) corresponding to CSS)
The nth-child (n) selector is used to select the nth child element under each parent element (n starts from 1)
To complete the preceding three functions, the selector format is:
:nth-child(1){color:red;}span:nth-child(1){color:blue;}div span:nth-child(1){color:green;}
If the third function above is implemented using javascript, It is shown as follows:
var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var firstChild = divs[i].firstElementChild;        if(firstChild.nodeName == 'SPAN'){            firstChild.style.color = 'green';        }}
Parameters
Of course, the $ (': nth-child (index)') selector acts as a common sub-element filter selector and can have multiple Parameter options.
[1] $ (': nth-child (even)') Select an element with an even index value under each parent element.
[2] $ (': nth-child (odd)') Select an element with an odd index value under each parent Element
[3] $ (': nth-child (3n + 1)') Select an element whose index value is (3n + 1) under each parent element.
<Button id = "btn1"> reset. onclick = function () {history. go ();} // matches an even number of ul elements for each parent element. The result is 2 and 4btn1. onclick = function () {$ ('ul: nth-child(even='0000.css ('color', 'red');} // matches an odd number of elements whose parent element is ul, the result is 1, 3, and 5btn2. onclick = function () {$ ('ul: nth-child(odd1_'0000.css ('color', 'blue');} // matches the (3n + 1) element with each parent element ul, the result is 1 and 4btn3. onclick = function () {$ ('ul: nth-child(3n1_1}'0000.css ('color', 'green');} </script>
First and end child elements
For convenience, jQuery also defines how to obtain the first child element and the last child element.
$ (': First-child ')
$ (': First-child') the selector is an abbreviated form of the $ (': nth-child (1)') selector. The 1st child elements of each parent element are selected.
$ (': Last-child ')
Similarly, the $ (': last-child') selector selects the last child element of each parent element.
<Button id = "btn1"> reset. onclick = function () {history. go ();} // match the 1st child elements of each parent element of the div element. The result is 1.1 and 3.1btn1.onclick = function () {$ ('div: first-child'0000.css ('color', 'red');} // match the last child element of each parent element of the div element. The result is 1.2 and 3.2btn2.onclick = function () {$ ('div: last-child'0000.css ('color', 'blue');} // matches each of the 1st child elements of the parent element of the div element, and the child element is a span element. The result is 3.1btn3.onclick = function () {$ ('div span: first-child'0000.css ('color', 'green ');} // match the last child element of each parent element of the div element. The child element is a span element and the result is 1.2btn4.onclick = function () {$ ('div span: last-child'0000.css ('color', 'pink');} </script>

The child element selector at the beginning and end correspond to: first-child and: last-child in CSS respectively.
To complete the same function, the selector format is:
div :first-child{color:red;}div :last-child{color:blue;}div span:first-child{color:green;}div span:last-child{color:pink;}
If you want to use the javascript selector to complete the previous function, as shown below:
var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var lastChild = divs[i].lastElementChild;        if(lastChild.nodeName == 'SPAN'){            lastChild.style.color = 'pink';        }}
 
Unique child element
$ (': Only-child ')
$ (': Only-child') the matching rule of the selector is: if an element is a unique child element in its parent element, it will be matched.
$('div span:only-child').css('color','green');
The only-child selector corresponding to CSS
div span:only-child{color:green;}
If javascript is used
var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var children = divs[i].children;    if(children.length == 1 && children[0].nodeName == 'SPAN'){        children[0].style.color = 'green';    }}
<Button id = "btn1"> reset. onclick = function () {history. go ();} // although only one <span> element exists in the 2nd div, btn1.onclick = function () cannot be matched because it is not a unique child element () {$ ('div span: only-child'0000.css ('color', 'green');} </script>
Last
In the pseudo-class selector of the CSS structure, the nth-child (n) and nth-of-type (n) selector are often confusing and need to be distinguished carefully to avoid errors. Similarly, in the jQuery filter selector, the child element selector is very similar to the index selector and is easy to confuse. In the next article of the selector series, we will introduce the index selector in detail.
Welcome