忻灯淬烤且酣颈耻靡海密尼汗
页面结构：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></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 type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> </script>
执行：
过滤方法,也就是函数,大多与前面介绍过的过滤器功能是一致的
1:get()将jquery对象转为DOM对象:将第二个文本的前景色设置为红色
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').get(1).style.color="red"
</script>
执行：
2.eq():获取指定序号的元素,注意,返回的是jQuery对象
将第5个元素的前景色变为红色：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').eq(4).css('color','red')
</script>
执行：
3.first():返回第一个元素,不需要参数
4.last():返回最后一个元素,不需要参数
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').first().css('color','red')
$('li').last().css('color','red')
</script>
执行：
5.toArray(),返回DOM数组,注意不是jquery对象
必须使用原生js调用
将所有的li变为红色：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
var li=$('li').toArray()
for(var i=0;i<li.length;i++)
{
li[i].style.color="red"
}
</script>
执行；
6.find():返回所有的后代元素,包括子,孙…
将ul下的li前景色全部变为coral
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('ul').find('li').css('color','coral')
</script>
执行：
将ul下的所有a标签的颜色变为青色
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('ul').find('a').css('color','cyan')
</script>
执行：
7.children()返回所有的直接子元素
将ul下的子元素p颜色变为深粉色
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('ul').children('p').css('color','deeppink')
</script>
执行：
不带参数会将所有子元素变为深粉：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('ul').children().css('color','deeppink')
</script>
执行：
8.对每个元素执行回调函数 each(function(){})
使用each对每个li添加背景色
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('ul').children().css('color','deeppink')
//所有的css样式
$('*').removeAttr('style')
$('li').each(function(){
// $(this)指代li
$(this).css('background-color','wheat')
})
</script>
执行：
9.元素遍历方法
next()下一个同级元素
将第三个元素的下一个元素颜色变为blue
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').eq(2).next().css('color','blue')
</script>
执行：
将第三个元素后面的所有同级元素颜色全部变为blue
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').eq(2).nextAll().css('color','blue')
</script>
执行：
把除了第三个元素，将全部的同级元素全部变为blue
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').eq(2).siblings().css('color','blue')
</script>
执行：
prev()前一个元素
将第三个元素前面的一个元素颜色变为红色：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').eq(2).prev().css('color','red')
</script>
执行：
将第三个元素前面的所有元素前景色变为红色：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').eq(2).prevAll().css('color','red')
</script>
执行：
10. add(selector),将元素添加到所选的集合中
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').css('color','red')
</script>
执行，可以看到p标签没有被选中
使用add()
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').add('p').css('color','red')
</script>
此时所有元素均变为红色,相当于将p标签添加到li的元素集合中
执行：
11.slice(start, end),返回指定范围的元素
从第三个元素到第五个元素前景色为red
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').slice(2,5).css('color','red')
</script>
执行：
注意：slice()不会选择最后一个元素
选择第3个元素到最后一个元素：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').slice(2).css('color','red')
</script>
执行：
12.filter()从结果中返回符合条件的元素
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').filter(':eq(5)').css('background-color','lightgreen')
</script>
选中第6个元素
13.not()与filter()功能正好相反,去掉满足条件的元素
不选第6个元素，其他元素全部选中
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li').not(':eq(5)').css('background-color','lightgreen')
</script>
执行：
爸秆鲜节荆木穗呸奈芜掀酮焦