jQuery selector
Content Chooser
:contains(text)
Summary
Matching elements that contain a given text
parameter
Example
Description: Find all div elements that contain "John"
HTML code
<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn</div>
jQuery code:
$(document).ready(function(){//Setting up jQuery export code
//Select the element that contains the specified text content
console.log($('div:contains("John")'));//Find the text in div that contains John's elements
})
:empty
Summary
Match all empty elements that do not contain child elements or text
Example
Description: Find all empty elements that do not contain child elements or text
HTML code:
<table> <tr><td>Value 1</td><td> </td></tr><!--There is a space in the middle. This is called a space text, not an empty element.--> <tr><td>Value 2</td><td></td></tr> </table>
jQuery code
$(document).ready(function(){//jQuery export code
//Select elements without any content
console.log($('td:empty()'))//Finding text content is an empty td tag
})
:parent
Summary
Match elements that contain child elements or text
Example
Description: Find all td elements that contain child elements or text
HTML code
<table> <tr><td>Value 1</td> <td></td></tr> <tr><td>Value 2</td><td></td></tr> </table>
jQuery code
$(document).ready(function(){//Setting up jQuery export code
// Elements selected for text content
console.log($('td:parent()'))//Select a td tag that has text
//A space in the middle indicates that a space text has text.
})
:has(selector)
Summary
Matching elements that contain elements matched by selectors
parameter
Example
Description: Find subelements where li has item1 class names
HTML code:
<ul>
<li>
<div class="item1"></div>
</li>
<li class="item2"></li>
<li>4</li>
<li>
<div class="item1"></div>
</li>
</ul>
jQuery code
$(document).ready(function(){//Setting up jQuery export code
//Select to include the specified selector
console.log($('li:has(.item1)'));//Find the element of the li subclass named item1
})
Visibility selector
:hidden
Summary
Match all invisible elements, or elements whose type is hidden
Example
Description: Find hidden tr
HTML code:
<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery code
$(document).ready(function(){//Setting up jQuery entry code
//Select elements that are not visible on the page
console.log($('tr:hidden'))//Select the tag with hidden elements in tr
})
Description: Elements that match type as hidden
HTML code:
<form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form>
jQuery code
$(document).ready(function(){//Setting up jQuery entry code
//Select elements that are not visible on the page
console.log($('input:hidden'))//Find type types of hidden elements in input
})
:visible
Summary
Match all visible elements
Example
Description: Find all visible tr elements
HTML code:
<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
jQuery code
$(document).ready(function(){//Setting up jQuery entry code
//Select the elements you can see on the page
console.log($('tr:visible'))//Find the display elements of tr
})
Child Selector
:first-child
Summary
Match the first child element of the given selector (: previous selector)
Similarly: first matches the first element, but the first-child selector can match multiple: the first child matches each parent element. This corresponds to: nth-child(1)
Example
Description: Find the first li in each ul
HTML code:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
jQuery code
$(document).ready(function(){//Setting up jQuery entry code
console.log($('ul li:first-child'))//Select the first li of two Ul s
})
:first-of-type
Summary
Structured pseudo-class, matching the first E-type child of the parent element of E. Equivalent to: nth-of-type(1) selector.
Description:
Find the "eldest child" span tag in the child element of the span type as the parent element
HTML code:
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Select the first of the same label type
console.log($('span:first-of-type'))//Select the first equivalent span tag (type) in two div s
//n4 is not the first subelement of n2, but it is the first of all span type subelements of n2, so it can match
})
:last-child
Summary
Match the last child element
Last matches only the last element, and this selector matches the last child element for each parent element
Example
Description: Find the last li in each ul
HTML code:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
// Match the last child element
console.log($('li:last-child'))//Last li tag matching ul tag
})
:last-of-type
Summary
Structured pseudo-classes, the last E-type child that matches the parent element of E, generally mean
first-of-type is about the same, just the first element and the last element.
HTML code:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Select the last of the same label type
console.log($('li:last-of-type'))//Select the last li tag of the same type
})
:nth-child
Summary
Matching the N-th child or even element under its parent element
eq(index) matches the elements of the sequence specified by the selector, and this matches the child elements for each parent element.
nth-child starts from 1, and eq() starts from 0!
parameter
Example
Description: Find the second li at each ul
HTML code:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
jQuery code:
$(document).ready(function(){//Setting up jQuery entry code
//Select the nth child element (start by 1)
console.log($('ul :nth-child(2)'))//Finding the 2nd li of the descendants of ul
//Ul:nth-child(2)
})
Filtering operation
first()
Summary
Get the first element
Example
Description: Get the first element of the match
HTML code:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery code
$(document).ready(function(){//Setting up jQuery entry code
console.log($('li:first'))//Filter selector (with selector in string)
console.log($('li').first());//The jQuery collection that gets li gets the first li by calling the first method
//The result is that a jQuerydom collection is stored using li, and then the first Li in the collection is selected.
// The operations above and below are identical, all based on the selected elements.
})
eq(index|-index)
Summary
Gets the N th jQuery object in the current chain operation and returns the jQuery object. When the parameter is greater than or equal to 0, it is selected positively, such as 0 for the first and 1 for the second. When the parameter is negative, it is chosen in the opposite direction, for example - 1 is the first reciprocal, you can see the following example.
Similarly, get(index) returns DOM objects.
parameter
Example
Parameter index description: Get the second element that matches
HTML code:
<p> This is just a test.</p> <p> So is this</p>
jQuery code
$(document).ready(function(){//Setting up jQuery entry code
console.log($('p').eq(1));//The index position is filled in eq, which currently indicates that the search index location is p of 1.
})
Parameter-index description: Get the penultimate element of the match
HTML code:
<p> This is just a test.</p> <p> So is this</p>
jQuery code
$(document).ready(function(){//Setting up jQuery entry code
console.log($('p').eq(-2));
//In eq, the index position is negative, indicating that the last (-1) in the current jQuery collection is counted.
})
last()
Summary
Get the last element
Example
Description: Get the last element of the match
HTML code
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery code
$(document).ready(function(){//Array jQuery entry code
console.log($('li').last());//Represents the last word element of the query li element
})
has(expr|ele)
Summary
Retain elements that contain specific offspring and remove elements that do not contain specified offspring.
The. has() method recreates a set of matching objects from a given jQuery object. The selectors provided will test the descendants of the original objects one by one, and the objects containing the matched descendants will be retained.
parameter
Example
Description: Find the element where the li sublevel is ul
HTML code:
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
jQuery code
$(document).ready(function(){//Array jQuery entry code
console.log($('li').has('ul'));//Represents ul with child levels inside the query li element
})
not(expr|ele|fn)
Summary
Delete elements that match the specified expression from the set of matching elements
parameter
Example
Description: Delete the element with the ID of select from the p element
HTML code:
<p>Hello</p><p id="selected">Hello Again</p>
jQuery code
$(document).ready(function(){//Array jQuery entry code
console.log($("p").not( "#Selected ";// indicates that deleting the id name is a selected element
})
slice(start, [end])
Summary
Select a matching subset
Similar to the original slice method
parameter
HTML code
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
jQuery code
$(document).ready(function(){//Array jQuery entry code
//Intercept the li element specified to return
console.log($("ul li").slice(1,3) );//Represents the deletion of li from index 1 to index 2, not to index 3 (to less than 3)
})