筛选
jq中除了传css选择器以外,还可以传其他: 如li:first(li中的第一个)
:first(第一个) / :last(最后一个)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dom的筛选</title>
<style>
ul {
margin: 0;
width: 200px;
}
li {
list-style: none;
margin: 10px 0;
padding: 10px;
text-align: center;
background: #e0eee8;
border-radius: 10%;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$('li:first').css('background-color', '#eacd76');
$('li:last').css('background-color', '#40de5a');
</script>
</body>
</html>

:odd(索引为奇数) / :even(索引为偶数)
$('li:odd').css('background-color', '#eacd76');
$('li:even').css('background-color', '#40de5a');

:eq(具体的索引),如果是负数倒着来,如-1是最后一个
$('li:eq(2)').css('background-color', '#eacd76');

$('li').eq(2).css('background-color', '#eacd76');
$('li').first().css('background-color', '#3eede7');
$('li').last().css('background-color', '#fff143');
这三个可以写在后面。

prev() / prevAll()
$('li').eq(2).prev().css('background-color', '#eacd76');
prev选择当前元素的上面的兄弟元素,(可以传参,可以判断是不是该类似的元素)。
prevAll选择当前元素上面的全部兄弟元素。
nextAll如果没有具体选择哪个li,全部选中,但最后一个不会选中。

next() / nextAll()
用法和prev一样。nextAll如果没有具体选择哪个li,全部选中,但第一个不会被选中。
$('li').nextAll().css('background-color', '#eacd76');

siblings() 除了当前元素,其他的都选中。如果没有具体元素,则全部选中。
$('li:eq(2)').siblings().css('background-color', '#eacd76');

filter。
可以写css选择器,拥有的会被选择出来。
也可以写函数,只要filter结果不等于false,可以根据函数index值选择,也可以选择全部
$('li').filter(function(index, ele) {
return index % 2 == 0; // 只要return不等于false就可以
}).css('background-color', '#eacd76');

not
可以传css选择器,可以传函数
和filter刚刚相反,只要不是当前元素的兄弟元素都可以选中。
$('li').not('.test').css('background-color', '#eacd76');

is 判断这个范围中是否包含参数,包含则返回true
console.log($('li').is('.test'));

slice 截取
参数取头不取尾
$('li').slice(2, 4).css('background', '#fff2df');

map。
each的进阶版,each只可以遍历,处理数据需要其他的配合。
map遍历完后,还可以写条件,返回满足的元素(jq对象)。
<ul>
<li>
<span class="food">瓜子</span>
<span class="price">4</span>
</li>
<li>
<span class="food">花生</span>
<span class="price">3</span>
</li>
<li>
<span class="food">矿泉水</span>
<span class="price">1</span>
</li>
<li>
<span class="food">方便面</span>
<span class="price">2.5</span>
</li>
</ul>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$('li').map(function(index, ele) {
if( $(ele).find('.price').text() > 2 ) {
return ele;
}
}).css('background', '#fff2df');
</script>
