Correction status:qualified
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery选择器函数使用方法</title> </head> <body> <div> <p>经典语录<a href="">梅雨季节</a></p> <p>经典语录<a href="">梅雨季节</a></p> <p>经典语录<a href="">梅雨季节</a></p> <p>经典语录<a href="">梅雨季节</a></p> <p>经典语录<a href="">梅雨季节</a></p> <p>经典语录<a href="">梅雨季节</a></p> <p>经典语录<a href="">梅雨季节</a></p> <p>经典语录<a href="">梅雨季节</a> <p>经典语录<a href="">梅雨季节</a></p> <p>经典语录<a href="">梅雨季节</a></p> </div> </body> </html> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $('p').eq(2).css('color','red') $('p').eq(2).css('font-size','55px') //$('p').removeAttr('style') // 2.get()将jquery对象转为DOM对象 $('p').get(1).style.color = '#0000ff' //$('p').removeAttr('style') //3.选取第一个和最后一个p $('p').first().css('color','blue') $('p').last().css('color','blue') //$('p').removeAttr('style') //4.toArray(),返回DOM数组 var p = $('p').toArray() for(var i=0;i<p.length;i++){ p[i].style.color = 'green' } //$('p').removeAttr('style') //5.find()返回所有后代元素 $('div').find('p').css('color','red') //$('p').removeAttr('style') //6.返回所有的子元素,children() $('div').children('p').css('color','red') //$('p').removeAttr('style') //7.对每个元素执行回调函数,each() $('p').each(function(){ $(this).css('color','green') }) //$('p').removeAttr('style') //8.元素遍历 //next()下一个同级元素 $('p').eq(3).next().css('color','green') $('p').eq(5).nextAll().css('color','red') //siblings():返回所选元素的所有同级元素,除它自己 $('p').eq(4).siblings().css('background-color','yellow') //$('*').removeAttr('style') //prev():前一个同级元素 $('p').eq(6).prev().css('color','red') //前面的所有同级元素 $('p').eq(4).prevAll().css('color','red') //$('*').removeAttr('style') //9.add() $('p').add('a').css('color','red') //$('*').removeAttr('style') //10.slice(1,3)表示选取索引[1,3)的元素 $('p').slice(1,3).css('color','red') $('p').slice(6).css('color','red') </script>
点击 "运行实例" 按钮查看在线实例