收藏
批改状态：未批改
老师批语：
<!DOCTYPE html>
<html lang="en">
<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>
<p>li下面的P标签</p>
</li>
<p>ul下面的P标签呀</p>
<li>最新电影09<a href="">立即播放</a></li>
<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.索引等于3的li
$('li').eq(3).css('color','red')
$('li').removeAttr('style')
// 2.get()将jquery对象转为DOM对象
$('li').get(1).style.color = 'red'
$('li').removeAttr('style')
//3.选取第一个和最后一个li
$('li').first().css('color','blue')
$('li').last().css('color','blue')
$('li').removeAttr('style')
//4.toArray(),返回DOM数组
var li = $('li').toArray()
for(var i=0;i<li.length;i++){
li[i].style.color = 'green'
}
$('li').removeAttr('style')
//5.find()返回所有后代元素
$('ul').find('li').css('color','red')
$('li').removeAttr('style')
//6.返回所有的子元素，children()
$('ul').children('p').css('color','red')
$('p').removeAttr('style')
//7.对每个元素执行回调函数,each()
$('li').each(function(){
$(this).css('color','deeppink')
})
$('li').removeAttr('style')
//8.元素遍历
//next()下一个同级元素
$('li').eq(3).next().css('color','green')
$('li').eq(5).nextAll().css('color','red')
//siblings():返回所选元素的所有同级元素,除它自己
$('li').eq(4).siblings().css('background-color','yellow')
$('*').removeAttr('style')
//prev():前一个同级元素
$('li').eq(6).prev().css('color','red')
//前面的所有同级元素
$('li').eq(4).prevAll().css('color','red')
$('*').removeAttr('style')
//9.add()
$('li').add('p').css('color','red')
$('*').removeAttr('style')
//10.slice(1,3)表示选取索引[1,3)的元素
$('li').slice(1,3).css('color','red')
$('li').slice(6).css('color','red')
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
