Correction status:qualified
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20180403 jQuery作业</title> <style type="text/css"> .bg-green{ background-color: lightgreen; } </style> </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> <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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //first():返回第一个元素,不需要参数 $('li').first().css('background-color','wheat') //last():回最后一个元素,不需要参数 $('li').last().css('background-color','wheat') //eq():获取指定序号的元素,注意,返回的是jQuery对象 $('li').eq(2).css('background-color','wheat') //find():返回所有的后代元素,包括子,孙...,然后通过find查找需要的元素 $('ul').find('li').css('color','coral') //children()返回所有的直接子元素 $('ul').children('p').css('color','deeppink') //元素遍历方法,next()下一个同级元素 $('li').eq(2).next().css('background-color','#8D5050') //元素遍历方法,nextAll()后面全部的同级元素 $('li').eq(5).nextAll().css('color','blue') //元素遍历方法,siblings():返回所选元素的所有同级元素,除它自己 // $('li').eq(3).siblings().css('color','red') //先去掉所有元素上面的自定义样式,将元素打回原型,素颜模样 // $('*').removeAttr('style') //选择包含指定文本内容的元素 $('p:contains("我")').addClass('bg-green') </script>
点击 "运行实例" 按钮查看在线实例