jquery的常用过滤方法:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery的常用过滤方法</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> <p>开心就好,,对不对!!!</p> <li>最新电影08<a href="">点击</a></li> <li>最新电影09<a href="">点击</a></li> <li>最新电影10<a href="">点击</a></li> </ul> </body> </html> <script type="text/javascript" src="jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> //过滤方法,也叫过滤函数,大多与前面学过的过滤器是一样的 //1.get()将jquery对象转为DOM对象 $('li').get(4).style.color = 'lightpink' //2.eq()返回指定索引的元素,返回的是jquery对象 $('li').eq(3).css('color','lightgreen') //3.first()无参数 $('li').first().css('color','green') //4.last()无参数 $('li').last().css('color','lightgreen') //5.toArray()返回的是DOM数组 var li = $('li').toArray() for(var i=0;i<li.length;i++){ li[i].style.color = 'pink' } //6.find():返回所有后代元素.........找到 $('ul').find('li').css('color','gray') $('ul').find('a').css('color','red') //7.children()返回所有的直接子元素 $('ul').children('p').css('color','pink') //8.each(function(){})。。。。。每个 $('*').removeAttr('style') $('li').each(function(){ $(this).css('color','lightpink') }) // 9.元素遍历 $('li').removeAttr('style') $('li').eq(3).next().css('color','wheat') $('li').eq(2).nextAll().css('color','red') $('*').removeAttr('style') // $('li').eq(4).siblings().css('color','red') // $('li').eq(4).prev().css('color','lightgreen') $('li').eq(4).prevAll().css('color','lightgreen') //10.add() $('*').removeAttr('style') $('li').add('p').css('color','green') //11.slice():从集合中获取一组连续的元素 $('*').removeAttr('style') //不选择最后一个元素 $('li').slice(2,7).css('color','green') </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例