Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html> <head> 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用的过滤方法</title> </head> <body> <ul> <li>最新恐怖电影1<a href="">立即播放</a></li> <li>最新恐怖电影2<a href="">立即播放</a></li> <li>最新恐怖电影3<a href="">立即播放</a></li> <li>最新恐怖电影4<a href="">立即播放</a></li> <li>最新恐怖电影5<a href="">立即播放</a></li> <li>最新恐怖电影6<a href="">立即播放</a></li> <li>最新恐怖电影7<a href="">立即播放</a></li> <li>最新恐怖电影8<a href="">立即播放</a></li> <li>最新恐怖电影9<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" src="../jquery.js"></script> --> <script type="text/javascript"> // get()方法 就是将jquery对象转换为DOM对象 $('li').get(1).style.color='pink' // eq()方法就是返回指定元素,返回的是jquery对象 $('li').eq(5).css('color','red') // first()无参数,返回第一个 $('li').first().css('color','green') // last()无参数,返回最后一个 $('li').last().css('color','pink') // toArray()无参数,返回的是SOM数组, // 选择所有的li文本变为红色 var li=$('li').toArray() for(var i=0; i<li.length;i++){ li[i].style.color='red' } // find返回所有后代元素,获取ul下面的所有li改成绿色 $('ul').find('li').css('color','green') // 将ul下面的A表签改成蓝色 $('ul').find('a').css('color','lightgreen') // children()返回的所有直接子元素 $('ul').children('p').css('color','deeppink') $('*').removeAttr('style') // each(fuction(){})变力获取li然后回调 // this当前对象背景改为wheat $('li').each(function(){ $(this).css('background-color','wheat') }) // 清除 $('*').removeAttr('style') // 遍历方法next就是eq(下一个) $('li').eq(4).next().css('color','blue') // 从第6个开始选择同级的子元素到最后背景元素 $('li').eq(6).nextAll().css('color','blue') // 选择前后所有的同级元素改变颜色 $('li').eq(1).siblings().css('color','blue') $('*').removeAttr('style') // add()方法相当于将P标签前面(li)的即可中 // $('li').add('p')css('color','lightgreen') $('*').removeAttr('style') // silce()从集合中获取一段连续的元素 // 不选择最后最后一个位置的元素 $('li').slice(2,6).css('color','lightgreen') </script> 实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的过滤方法</title> </head> <body> <ul> <li>最新恐怖电影1<a href="">立即播放</a></li> <li>最新恐怖电影2<a href="">立即播放</a></li> <li>最新恐怖电影3<a href="">立即播放</a></li> <li>最新恐怖电影4<a href="">立即播放</a></li> <li>最新恐怖电影5<a href="">立即播放</a></li> <li>最新恐怖电影6<a href="">立即播放</a></li> <li>最新恐怖电影7<a href="">立即播放</a></li> <li>最新恐怖电影8<a href="">立即播放</a></li> <li>最新恐怖电影9<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" src="../jquery.js"></script> --> <script type="text/javascript"> // get()方法 就是将jquery对象转换为DOM对象 $('li').get(1).style.color='pink' // eq()方法就是返回指定元素,返回的是jquery对象 $('li').eq(5).css('color','red') // first()无参数,返回第一个 $('li').first().css('color','green') // last()无参数,返回最后一个 $('li').last().css('color','pink') var li=$('li').toArray() for(var i=0; i<li.length;i++){ li[i].style.color='red' } $('ul').find('li').css('color','green') $('ul').find('a').css('color','lightgreen') $('ul').children('p').css('color','deeppink') // $('*').removeAttr('style') $('li').each(function(){ $(this).css('background-color','wheat') }) $('*').removeAttr('style') $('li').eq(4).next().css('color','blue') $('li').eq(6).nextAll().css('color','blue') $('li').eq(1).siblings().css('color','blue') $('*').removeAttr('style') // $('li').add('p')css('color','lightgreen') $('*').removeAttr('style') $('li').slice(2,6).css('color','lightgreen') </script> 运行实例 » 点击 "运行实例" 按钮查看在线实例
选择器要从新敲打几遍和复习几遍才能慢慢的应用!