今天学习了jQuery常用的选择器,选择器选择元素的方式多种多样,要选择到一个元素或几个元素有不止一种的方法,以下是其中的一些方法,与大家分享。
代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery常用选择器</title> <style type="text/css"> .blue{ background-color: blue; color: white; } .red{ background-color: red; color:yellow; } .green{ background-color: green; color: cyan; } </style> </head> <body> <h2 id="1">我是jobing的标题</h2> <ul> <li >jobing的测试框01</li> <li class="test">jobing的测试框02</li> <li>jobing的测试框03</li> <li>jobing的测试框04</li> <li>jobing的测试框05<a href="">点我</a></li> <li>jobing的测试框06</li> <li class="test">jobing的测试框07</li> <li>jobing的测试框08</li> <li>jobing的测试框09</li> <li>jobing的测试框10</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"> // id选择器 $('#1').addClass('red') // 类选择器 $('.test').addClass('blue') // 通配符选择器 $('li:nth-child(7) ~ *').css('background-color','lightgreen') //直接命中选择器 $('li:eq(5)').css('background-color','pink') // 选择包含直接文本内容的 $('li:contains(04)').addClass('green') // 选择包含某个标签的 $('li:has("a")').css('background-color','yellow') // 清除样式 $('*').removeAttr('style') $('*').removeClass() //find():返回所有的后代元素,包括子,孙... $('ul').find('li').addClass('red') $('*').removeClass() $('ul').find('a').addClass('red') $('*').removeClass() //选取页面的偶数项 $('li:odd').addClass('green') $('*').removeClass() //选取页面的基数项 $('li:even').addClass('blue') </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
jQuery常用选择器有很多,选择的方法月CSS选择元素的方法类似
选择到同一个元素的方法不止一种,多种多样
上文列举了id选择器、类选择器、通配符选择器、直接命中选择器、选择包含直接文本内容的、选择包含某个标签的、选择所有的后代元素,包括子,孙的、选取对应的偶数项与奇数项等等