收藏
批改状态：合格
老师批语：
过滤方法，是指jquery中常用的一些函数，对象获取方法。其中包括了：
写法: $(‘li’).get(1).css('background','red')
1、get（1）：过滤函数，用于获取$('x')对象中的某个位置
2、eq（2）：eq更有序列的意思，准确来说，eq可以获取某个序列中的索引
3、first（）：first中的值一般为空，索引中第一个位置
4、last（）：last中的值一般为空，索引中第一个位置
5、toArray（）：作用为控制其包含的运行函数部分内容
6、find（）:用于获取后代元素，孙元素，子元素都可获取
7、children（）:用于返回子元素
8、each（）元素遍历：规定为每个匹配元素规定运行的函数
9、siblings（）元素遍历：选中了元素之外的其他元素
10、next（）选中元素的下级元素
11、nextAll（）选中元素下面的的全部元素
12、add（）加入一个索引在jquery中，使其继承该函数
13、slice(2.5) 范围选择，选中元素位置2~5
代码部分：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
li{
list-style: none;
margin: 20px;
}
ul{
text-align: center;
margin-top: 200px;
}
a{
margin-left: 20px;
}
.cls{
background: brown;
}
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<ul>
<li>(1)测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>(2)测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>(3)测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>(4)测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>(5)测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>(6)测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>(7)测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>(8)测试li文本变化<a href="">测试文本颜色变化</a></li>
<p>我是你大哥</p>
<li>(9)测试li文本变化<a href="">测试文本颜色变化</a></li>
<li>(10)测试li文本变化<a href="">测试文本颜色变化</a></li>
</ul>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('li').get(1).style.color="blue"
//使用过滤函数，get到第二个li，并使他的颜色变为蓝色，该方式无法使用.css
$('li').eq(2).css('color','royalblue')
//使用过滤函数eq(),索引第三个li标签，并使得他的颜色变为蓝色
$('li').first().css('color','yellow')
$('li').last().css('color','yellow')
//调取函数first、last，设置了第一个和最后一个li标签的颜色
var li=$('li').toArray()
$('*').removeAttr('style')
for(var i=0;i<li.length;i++){
li[i].style.color='orange'
}
//调取了一个回调函数toArray,作用为控制其包含的运行函数部分内容。其中设置了全局元素清楚，
// 利用for标签设置了循环（此处循环为变量名为i，不能设置为li，如果设置为li的话会导致冲突，变量无法生成
// 回调函数中，设置了li中的循环，颜色为橘黄色。
$('*').removeAttr('style')
$('li').find('a').css('color','red')
//fine函数，用于获取后代元素，此处获取了li标签中的a标签
$('*').removeAttr('style')
$('ul').children('li').css('color','orange')
$('ul').children('p').css('color','orange')
//此处只返回下一级的元素，对于孙元素并不见效，children元素用于返回下级子元素。
$('*').removeAttr('style')
$('li').each(function(){
$(this).css('color','red')
}
)
//元素遍历，each函数返回了绝对的位置，并在function中增加了对这个位置的动作，样式修改等等。
$('*').removeAttr('style')
$('li').eq(2).next().css('background','darkgoldenrod')
// $('li').eq(2).next().css('background','darkgoldenrod')
$('li').eq(2).siblings().css('background','darkgoldenrod')
//此处为元素遍历，eq/next设置了位置+1.位置的下一个位置、eq/nextAll则设置了位置下面的全部/eq/siblings则设置了元素之外的其他选中
$('*').removeAttr('style')
$('li').add('p').css('background','aquamarine')
//add函数是加入了其他的元素，一个jq语法中，适合加入判断，加入样式修改等等
$('*').removeAttr('style')
$('li').slice(2.5).css('background','black')
//slice函数（1,2）=（起始，结束），（3）=（3~结束），语法如上
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
