过滤方法,是指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>
运行实例 »
点击 "运行实例" 按钮查看在线实例