实例 jQuery常用的选择器函数(过滤方法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5.6个常用的过滤方法</title> </head> <body> <ul> <li>医保药店001<a href="">查看信息</a></li> <li>医保药店002<a href="">查看信息</a></li> <li>医保药店003<a href="">查看信息</a></li> <li>医保药店004<a href="">查看信息</a></li> <li>医保药店005<a href="">查看信息</a></li> <p>中心人民医院</p> <li>医保药店006<a href="">查看信息</a></li> <li>医保药店007<a href="">查看信息</a></li> <li>医保药店008<a href="">查看信息</a></li> <li>医保药店009<a href="">查看信息</a></li> <p>我不是医保药店我是医院</p> <li>医保药店010<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"> //过滤方法,也就是函数,大多与前面介绍过的过滤器功能是一致的 //1:get()将jquery对象转为DOM对象:将第四个文本(医保药店004)的前景色设置为红色 // $('li').get(3).style.color = 'red' //2.eq():获取指定序号(医保药店005)的元素,注意,返回的是jQuery对象 // $('li').eq(4).css('color','red') //3.first():返回第一个元素,不需要参数 // $('li').first().css('color','red') //4.first():返回最后一个元素,不需要参数 // $('li').last().css('color','red') //5.toArray(),返回DOM数组,注意不是jquery对象 // var ds = $('li').toArray() // for(var i=0; i<ds.length; i++){ // ds[i].style.color = 'blue'} //6.find():返回所有的后代元素,包括子,孙... // $('ul').find('li').css('color','coral') // $('li').find('a').css('color','cyan') //7.children()返回所有的直接子元素 // $('ul').children().css('color','deeppink') // $('ul').children('li').css('color','deeppink') // $('li').children('a').css('color','deeppink') // 8.对每个元素执行回调函数 // $('ul').each(function(){ // $(this).css('background-color','wheat') // $(this).css('color','black') // $(this).css('font-size','1.3em') // }) //9.元素遍历方法 // //next()下一个同级元素 // $('li').eq(2).next().css('color','blue') //nextAll()后面全部的同级元素 // $('li').eq(2).nextAll().css('color','blue') //siblings():返回所选元素的所有同级元素,除它自己 // $('li').eq(2).siblings().css('color','blue') //向前遍历 //prev():前一个同级元素 // $('li').removeAttr('style') // $('li').eq(6).prev().css('color','coral') //prevAll():您一定猜到了,对,是前面的所有同级元素 // $('li').eq(6).prevAll().css('color','coral') //10. add(selector),将元素添加到所选的集合中 //先去掉所有元素上面的自定义样式,将元素打回原型,素颜模样 // $('*').removeAttr('style') //将所有li文本设置为红色,你会发现有一个p没有选上,这也正常 // $('li').css('color','red') //那么如何才能选上p元素呢,只有加大选区,把p元素放进这个选区中就可以了 //使用add()方法就可以做到 // $('li').add('p').css('color','red') //11. filter()从结果中返回符合条件的元素 // 仅仅返回第6个元素 // $('li').filter(':eq(5)').css('background-color','lightgreen') //12. not()与filter()功能正好相反,去掉满足条件的元素 // $('li').not(':eq(5)').css('background-color','lightgreen') //13. slice(start, end),返回指定范围的元素 //$('*').removeAttr('style') 清楚所有设置 // $('*').removeAttr('style') //包括起始位置,不包括结束位置,返回的结果数量是6-0=6 // $('li').slice(0,6).css('background-color','lightgreen') //获取前4个元素 // $('li').slice(0,4).css('background-color','lightgreen') //省略第二个参数,默认从当前开始直到结尾 // $('li').slice(4).css('background-color','lightgreen') </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例