收藏
批改状态：未批改
老师批语：
<!DOCTYPE html>
<html>
<head>
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的过滤方法</title>
</head>
<body>
<ul>
<li>最新恐怖电影1<a href="">立即播放</a></li>
<li>最新恐怖电影2<a href="">立即播放</a></li>
<li>最新恐怖电影3<a href="">立即播放</a></li>
<li>最新恐怖电影4<a href="">立即播放</a></li>
<li>最新恐怖电影5<a href="">立即播放</a></li>
<li>最新恐怖电影6<a href="">立即播放</a></li>
<li>最新恐怖电影7<a href="">立即播放</a></li>
<li>最新恐怖电影8<a href="">立即播放</a></li>
<li>最新恐怖电影9<a href="">立即播放</a></li>
<p>岛国新电影</p>
<li>最新恐怖电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../jquery.js"></script> -->
<script type="text/javascript">
// get()方法 就是将jquery对象转换为DOM对象
$('li').get(1).style.color='pink'
// eq()方法就是返回指定元素，返回的是jquery对象
$('li').eq(5).css('color','red')
// first()无参数，返回第一个
$('li').first().css('color','green')
// last()无参数，返回最后一个
$('li').last().css('color','pink')
// toArray（）无参数，返回的是SOM数组，
// 选择所有的li文本变为红色
var li=$('li').toArray()
for(var i=0; i<li.length;i++){
li[i].style.color='red'
}
// find返回所有后代元素，获取ul下面的所有li改成绿色
$('ul').find('li').css('color','green')
// 将ul下面的A表签改成蓝色
$('ul').find('a').css('color','lightgreen')
// children()返回的所有直接子元素
$('ul').children('p').css('color','deeppink')
$('*').removeAttr('style')
// each(fuction(){})变力获取li然后回调
// this当前对象背景改为wheat
$('li').each(function(){
$(this).css('background-color','wheat')
})
// 清除
$('*').removeAttr('style')
// 遍历方法next就是eq（下一个）
$('li').eq(4).next().css('color','blue')
// 从第6个开始选择同级的子元素到最后背景元素
$('li').eq(6).nextAll().css('color','blue')
// 选择前后所有的同级元素改变颜色
$('li').eq(1).siblings().css('color','blue')
$('*').removeAttr('style')
// add()方法相当于将P标签前面（li）的即可中
// $('li').add('p')css('color','lightgreen')
$('*').removeAttr('style')
// silce()从集合中获取一段连续的元素
// 不选择最后最后一个位置的元素
$('li').slice(2,6).css('color','lightgreen')
</script>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的过滤方法</title>
</head>
<body>
<ul>
<li>最新恐怖电影1<a href="">立即播放</a></li>
<li>最新恐怖电影2<a href="">立即播放</a></li>
<li>最新恐怖电影3<a href="">立即播放</a></li>
<li>最新恐怖电影4<a href="">立即播放</a></li>
<li>最新恐怖电影5<a href="">立即播放</a></li>
<li>最新恐怖电影6<a href="">立即播放</a></li>
<li>最新恐怖电影7<a href="">立即播放</a></li>
<li>最新恐怖电影8<a href="">立即播放</a></li>
<li>最新恐怖电影9<a href="">立即播放</a></li>
<p>岛国新电影</p>
<li>最新恐怖电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../jquery.js"></script> -->
<script type="text/javascript">
// get()方法 就是将jquery对象转换为DOM对象
$('li').get(1).style.color='pink'
// eq()方法就是返回指定元素，返回的是jquery对象
$('li').eq(5).css('color','red')
// first()无参数，返回第一个
$('li').first().css('color','green')
// last()无参数，返回最后一个
$('li').last().css('color','pink')
var li=$('li').toArray()
for(var i=0; i<li.length;i++){
li[i].style.color='red'
}
$('ul').find('li').css('color','green')
$('ul').find('a').css('color','lightgreen')
$('ul').children('p').css('color','deeppink')
// $('*').removeAttr('style')
$('li').each(function(){
$(this).css('background-color','wheat')
})
$('*').removeAttr('style')
$('li').eq(4).next().css('color','blue')
$('li').eq(6).nextAll().css('color','blue')
$('li').eq(1).siblings().css('color','blue')
$('*').removeAttr('style')
// $('li').add('p')css('color','lightgreen')
$('*').removeAttr('style')
$('li').slice(2,6).css('color','lightgreen')
</script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
选择器要从新敲打几遍和复习几遍才能慢慢的应用！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
