JQ过滤器：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.常用的过滤方法</title>
</head>
<body>
<ul>
<li>最新电影01<a href="">立即播放</a></li>
<li>最新电影02<a href="">立即播放</a></li>
<li>最新电影03<a href="">立即播放</a></li>
<li>最新电影04<a href="">立即播放</a></li>
<li>最新电影05<a href="">立即播放</a></li>
<li>最新电影06<a href="">立即播放</a></li>
<li>最新电影07<a href="">立即播放</a></li>
<li>最新电影08<a href="">立即播放</a></li>
<li>最新电影09<a href="">立即播放</a></li>
<p>我是一个另类呀</p>
<li>最新电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//过滤方法,也就是函数,大多与前面介绍过的过滤器功能是一致的
//1:get()将jquery对象转为DOM对象:将第二个文本的前景色设置为红色
$('li').get(1).style.color = 'red'
//2.eq():获取指定序号的元素,注意,返回的是jQuery对象
$('li').eq(4).css('color','red')
//3.first():返回第一个元素,不需要参数
$('li').first().css('color','red')
//4.first():返回最后一个元素,不需要参数
$('li').last().css('color','red')
//5.toArray(),返回DOM数组,注意不是jquery对象
var li = $('li').toArray()
for(var i=0; i<li.length; i++){
li[i].style.color = 'green'
}
//6.find():返回所有的后代元素,包括子,孙...
$('ul').find('li').css('color','coral')
$('ul').find('a').css('color','cyan')
//7.children()返回所有的直接子元素
// $('ul').children().css('color','deeppink')
$('ul').children('p').css('color','deeppink')
//8.对每个元素执行回调函数
// $('li').each(function(){
// $(this).css('background-color','wheat')
// $(this).css('color','black')
// $(this).css('font-size','1.3em')
// })
//9.元素遍历方法
//next()下一个同级元素
$('li').eq(2).next().css('color','blue')
//nextAll()后面全部的同级元素
$('li').eq(2).nextAll().css('color','blue')
//siblings():返回所选元素的所有同级元素,除它自己
$('li').eq(2).siblings().css('color','blue')
//向前遍历
//prev():前一个同级元素
$('li').removeAttr('style')
$('li').eq(6).prev().css('color','coral')
//prevAll():您一定猜到了,对,是前面的所有同级元素
$('li').eq(6).prevAll().css('color','coral')
//10. add(selector),将元素添加到所选的集合中
//先去掉所有元素上面的自定义样式,将元素打回原型,素颜模样
$('*').removeAttr('style')
//将所有li文本设置为红色,你会发现有一个p没有选上,这也正常
$('li').css('color','red')
//那么如何才能选上p元素呢,只有加大选区,把p元素放进这个选区中就可以了
//使用add()方法就可以做到
$('li').add('p').css('color','red')
//11. filter()从结果中返回符合条件的元素
//仅仅返回第6个元素
// $('li').filter(':eq(5)').css('background-color','lightgreen')
//12. not()与filter()功能正好相反,去掉满足条件的元素
$('li').not(':eq(5)').css('background-color','lightgreen')
//13. slice(start, end),返回指定范围的元素
$('*').removeAttr('style')
//包括起始位置,不包括结束位置,返回的结果数量是5-2=3
// $('li').slice(2,5).css('background-color','lightgreen')
//获取前4个元素
// $('li').slice(0,4).css('background-color','lightgreen')
//省略第二个参数,默认从当前开始直到结尾
$('li').slice(4).css('background-color','lightgreen')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
