实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.常用的过滤方法</title>
</head>
<body>
<!-- ul>li{最新电影$$}*10>a{立即播放} -->
<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="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//过滤方法，也叫过滤函数，大多与前面所学过的过滤器是一致
//1.get()将jquery对象转为DOM对象
$('li').get(1).style.color = 'red'
//2.eq()返回指定索引的元素，返回的是jquray
$('li').eq(4).css('color','red')
// 3.first(),无参数
$('li').first().css('color','red')
//4.last(),无参数
$('li').last().css('color','red')
//5.toArray()返回的是DOM数组
var li = $('li').toArray ()
for (var i=0;i<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('p').css('color','deeppink')
//8.each(function(){})
$('*').removeAttr('style')
$('li').each(function(){
$(this).css('background-color','wheat')
})
//9.元素遍历
$('*').removeAttr('style')
$('li').eq(2).next().css('color','blue')
$('li').eq(2).nextAll().css('color','blue')
$('li').eq(2).siblings().css('color',blue)
//prev() //removeAttr()
//10;add.
$('').removeAttr('style')
$('li').add('p').css('color','red')
$('*').removeAttr('style')
$('li'.slice(2).css('color','red')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
