Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5.常用的过滤方法</title> </head> <body> <!-- ul>li{最新电影$$}*10>a{立即播放} --> <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> <li>最新电影08<a href="">立即播放</a></li> <li>最新电影09<a href="">立即播放</a></li> <p>我是一个另类</p> <li>最新电影10<a href="">立即播放</a></li> </ul> </body> </html> <script type="text/javascript" src="./js/jquery-3.3.1.js"></script> <script type="text/javascript"> //过滤方法,也叫过滤函数,大多与前面所学过的过滤器是一致 //1.get()将jquery对象转为DOM对象 $('li').get(1).style.color = 'red' //2.eq()返回指定索引的元素,返回的是jquray $('li').eq(4).css('color','red') // 3.first(),无参数 $('li').first().css('color','red') //4.last(),无参数 $('li').last().css('color','red') //5.toArray()返回的是DOM数组 var li = $('li').toArray () for (var i=0;i<length;i++) { li[i].style.color= 'green' } //6.find():返回所有的 $('ul').find('li').css('color','coral' ) $('ul').find ('a').css('color','cyan') //7.children()返回所有的直接子元素 $('ul').children('p').css('color','deeppink') //8.each(function(){}) $('*').removeAttr('style') $('li').each(function(){ $(this).css('background-color','wheat') }) //9.元素遍历 $('*').removeAttr('style') $('li').eq(2).next().css('color','blue') $('li').eq(2).nextAll().css('color','blue') $('li').eq(2).siblings().css('color',blue) //prev() //removeAttr() //10;add. $('').removeAttr('style') $('li').add('p').css('color','red') $('*').removeAttr('style') $('li'.slice(2).css('color','red') </script>
点击 "运行实例" 按钮查看在线实例