We learned about jQuery selectors in the previous article. In this chapter, we will talk about jQuery's filtering methods. The purpose is still to obtain elements, but it is only standing among the parent, child, and sibling levels. The following are common filtering methods:
content:
Eight: hasClass ('class name')
The exclusive idea of native JS:
Filter method:
| grammar | usage | illustrate |
| parent () | $('li').parent() | Find the nearest parent |
| children ('selector') | $('ul').children(('li') | Find children (only sons) |
| find('selector') | $('ul').find('li') | Find descendants (including sons, grandchildren) |
| siblings ('selector') | $('ul li:eq(2)').siblings('li') | Find siblings, not including self |
| nextAll('selector') | $('ul li:eq(2)').nextAll('li') | Find your next brother |
| prevAll('selector') | $ ('ul li: eq (2)'). prevAll ('li') | Find your forward brother |
| eq (index value) | $ ('ul li'). eq (2) | Find li with index 2 |
| hasClass('class name') | $('ul li:first').hasClass('one') | Determine whether the first li has the class name one, put back true/false |
One: parent()
Find the nearest parent
Here is the parent div that gets the ul
<body>
<div>
<ul>
<li></li>
</ul>
</div>
<script>
console.log($('ul').parent());
</script>
</body>
Two: children ('selector')
Find children (only sons), return all children if there is no selector in parentheses
Here is to find li in the children of ul
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
console.log( $('ul').children('li') );
</script>
</body>
When there are multiple descendants, only the son can be obtained, such as the descendants of div here have ul and li, but only the child ul can be obtained
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('div').children() );
</script>
</body>
When there is no selector in the brackets, you can get all the children, where the children of the div are ul and another div
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
<script>
console.log( $('div').children() );
</script>
</body>
Three: find('selector')
Find descendants, including sons, grandchildren
Here is to find li in the descendants of div, li is the grandchild of div
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
<script>
console.log( $('div').find('li') );
</script>
</body>
Four: siblings ('selector')
Find sibling elements, excluding itself, if there is no selector in parentheses, get all siblings
Here is the sibling p element of ul, excluding itself
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
<p></p>
</div>
<script>
console.log( $('ul').siblings('p') );
</script>
</body>When there is no selector in parentheses, all siblings are returned, excluding itself
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
<p></p>
</div>
<script>
console.log( $('ul').siblings() );
</script>
</body>
Five: nextAll ('selector')
Get the siblings below you except yourself
Here is the sibling level obtained below ul, excluding itself
<body>
<div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</div>
<script>
console.log( $('ul').nextAll() );
</script>
</body>
Six: prevAll ('selector')
Similar to nextAll, this one gets the siblings above itself except itself
Here is the sibling level above the ul, excluding itself
<body>
<div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</div>
<script>
console.log( $('ul').prevAll() );
</script>
</body>
Seven: eq (index value)
to get the element at the specified index
Here is to get the child element with index 1 under ul, which is equivalent to ul:eq(1)
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('ul li').eq(1) );
</script>
</body>
Eight: hasClass ('class name')
To judge whether an element has a certain class name, note that the class name to be judged in parentheses does not need to be added with ' . 'If yes, return true, if not, return false
Here is the class name to judge whether the first li is one
<body>
<div>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('ul li:first').hasClass('one') );
</script>
</body>
Exclusive thoughts:
In native JS, we have learned the idea of exclusivity, for example, in the color change of the click button, that is, using a for loop to traverse all elements to add a click event, and then our classic ''kill others, leave myself'', since in jQuery There is implicit iteration, no need to use for loop binding, let's compare its ideas:
The exclusive idea of native JS:
kill the others, leave me alone
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
var btns=document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
for(var j=0;j<btns.length;j++){
btns[j].style.backgroundColor=''
}
this.style.backgroundColor='pink'
})
}
</script>
</body>jQuery's exclusive idea:
There is implicit iteration, no need to loop binding events, just make the clicked element set color, other sibling settings do not change color
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$('button').click(function(){
$(this).css('background','pink') //点击的按钮变色
$(this).siblings('button').css('background','') //点击按钮的兄弟级不变色
})
</script>
</body>