收藏
批改状态：未批改
老师批语：
jquery的常用过滤方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的常用过滤方法</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>
<p>开心就好，，对不对！！！</p>
<li>最新电影08<a href="">点击</a></li>
<li>最新电影09<a href="">点击</a></li>
<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">
//过滤方法，也叫过滤函数，大多与前面学过的过滤器是一样的
//1.get()将jquery对象转为DOM对象
$('li').get(4).style.color = 'lightpink'
//2.eq()返回指定索引的元素,返回的是jquery对象
$('li').eq(3).css('color','lightgreen')
//3.first()无参数
$('li').first().css('color','green')
//4.last()无参数
$('li').last().css('color','lightgreen')
//5.toArray()返回的是DOM数组
var li = $('li').toArray()
for(var i=0;i<li.length;i++){
li[i].style.color = 'pink'
}
//6.find():返回所有后代元素.........找到
$('ul').find('li').css('color','gray')
$('ul').find('a').css('color','red')
//7.children()返回所有的直接子元素
$('ul').children('p').css('color','pink')
//8.each(function(){})。。。。。每个
$('*').removeAttr('style')
$('li').each(function(){
$(this).css('color','lightpink')
})
// 9.元素遍历
$('li').removeAttr('style')
$('li').eq(3).next().css('color','wheat')
$('li').eq(2).nextAll().css('color','red')
$('*').removeAttr('style')
// $('li').eq(4).siblings().css('color','red')
// $('li').eq(4).prev().css('color','lightgreen')
$('li').eq(4).prevAll().css('color','lightgreen')
//10.add()
$('*').removeAttr('style')
$('li').add('p').css('color','green')
//11.slice():从集合中获取一组连续的元素
$('*').removeAttr('style')
//不选择最后一个元素
$('li').slice(2,7).css('color','green')
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
