jQuery最核心的组成部分就是：选择器引擎。它继承了CSS的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性
#1. 简单选择器
| 选择器 |
CSS模式 |
jQuery模式 |
表述 |
| 元素选择器 |
div{} |
$(‘div’) |
获取所有 div 元素的DOM对象 |
| 类选择器 |
.div{} |
$(‘.div’) |
获取所有class为box的所有DOM对象 |
| ID选择器 |
#box{} |
$(‘#box’) |
获取一个 ID 为 box 元素的DOM对象 |
使用：
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery 简单选择器</title> <script type="text/javascript" src="/jquery/Plugins/jquery-3.1.0.min.js"></script> <link rel="stylesheet" href="/jquery/Plugins/CSS/cg.css" /> </head> <body> <!-- id选择器 --> <!-- <div id="box">常规选择器</div> -->
<!-- 元素标签选择器 --> <!-- <div>常规选择器1</div> <div>常规选择器2</div> <div>常规选择器3</div> -->
<!-- 类选择器 --> <!-- <div class="box">常规选择器1</div> <div class="box">常规选择器2</div> <div class="_box ">常规选择器3</div> -->
<div id="box"> <p>常规选择器1</p> <p>常规选择器1</p> <p>常规选择器1</p> <div> <p>常规选择器2</p> <p>常规选择器2</p> <p>常规选择器2</p> </div> </div>
<script type="text/javascript"> $(function() { /* id选择器 $("#box").css('color', 'red'); */
/* 元素标签选择器 $('div').css('background','yellow'); */ /* 类选择器
$('.box').css('color','red'); $('._box').css('color','blue'); */
// alert($('.box').length);// 返回娶到的个数 }) </script> <script type="text/javascript"> /* jQuery 中自带的有容错的的功能 */ /* $(function() { $('#box > p').css('color', 'red'); }) */ </script> </body> </html>
|
#2. 进阶选择器
| 选择器 |
CSS模式 |
jQuery模式 |
描述 |
| 群组选择器 |
span,em,box{} |
$(‘span,em,.box’) |
获取多个选择器的DOM对象 |
| 统配选择器 |
*{} |
$(‘*’) |
获取所有元素标签的DOM对象 |
使用：
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery 进阶选择器</title> <script type="text/javascript" src="/jquery/Plugins/jquery-3.1.0.min.js"></script> <link rel="stylesheet" href="/jquery/Plugins/CSS/cg.css" /> </head> <body> <!-- 六种通配符可以组合使用 -->
<!-- 群主选择器 --> <!-- <div>群主选择器</div> <div>群主选择器</div> <div>群主选择器</div>
<p>群主选择器</p> <p>群主选择器</p> <p>群主选择器</p>
<strong>群主选择器</strong> <strong>群主选择器</strong> <strong>群主选择器</strong> -->
<!-- 后代选择器 --> <!-- <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul>
<a href="#">其他</a> <a href="#">其他</a> --> <!-- 通配符选择器 --> <!-- <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul>
<a href="#">其他</a> <a href="#">其他</a> -->
<!-- 组合使用 --> <!-- <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><string href="#">首页</string></li> <li><string href="#">首页</string></li> </ul>
<a href="#">其他</a> <a href="#">其他</a>-->
<script type="text/javascript"> $(function(){ /* 群主选择器 $('div,p,strong').css('color','red'); */
/* 后代选择器 $('ul li a').css('color','red'); */
/* 通配符选择器 $('*').css('color','red'); */
/* 统配所有元素个数 */ /* alert($('*').length); */ }) </script> </body> </html>
|
#3. 高级选择器
尽量少用高级选择器,速度慢！
| 选择器 |
CSS模式 |
jQuery模式 |
描述 |
| 后代选择器 |
ul li a{} |
$(‘ul li a’) |
获取追溯到的多个DOM对象 |
| 子选择器 |
div>p{} |
$(‘div p’) |
只获取子类节点的多个DOM对象 |
| next选择器 |
div+p{} |
$(‘div+p’) |
只获取某节点后一个同级DOM对象 |
| nextAll选择器 |
div~p{} |
$(‘div~p’) |
获取某节点后面所有同级DOM对象 |
使用：
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery 高级选择器</title> <script type="text/javascript" src="/jquery/Plugins/jquery-3.1.0.min.js"></script> <link rel="stylesheet" href="/jquery/Plugins/CSS/cg.css" /> </head> <body> <!-- <div id="box"> <p>jQuery 高级选择器</p> <p>jQuery 高级选择器</p> <p>jQuery 高级选择器</p> <div> <p>jQuery 高级选择器-1</p> <p>jQuery 高级选择器-1</p> <p>jQuery 高级选择器-1</p> </div> </div> -->
<p>jQuery 高级选择器</p> <p>jQuery 高级选择器</p> <p>jQuery 高级选择器</p> <hr id="h"/> <p>jQuery 高级选择器</p> <p>jQuery 高级选择器</p> <p>jQuery 高级选择器</p>
<script type="text/javascript"> $(function() { /* $('#box > p').css('color','red'); */ /* $('#h+p').css('color','red') // 同级的那个元素的后一个同级元素 */ $('#h~p').css('color','red') // 同级的那个元素的后的所有同级元素 }) </script> </body> </html>
|
等价方法：
| $(‘ul li a’) |
$(‘ul’).find(‘li’).find(a).css(…) |
| $(‘div>p’) |
$(‘div’).children(‘p’).css(…) |
| $(‘div+p’) |
$(‘div’).next(‘p’).css(…) |
| $(‘div~p’) |
$(‘div’).nextAll(‘p’).css(…) |
| 同级所有上面的元素 |
$(‘div’).prevAll(‘p’).css(…) |
| 同级上下所有元素选定 |
$(‘div’).siblings(‘p’).css(…) |
#4. 选择器快慢分析
最快的是 find()方法，最慢的是$('#box p')这种高级选择器。
| //这条最快，会使用原生的 getElementById、ByName、ByTagName 和 querySelectorAll() $('#box').find('p'); |
| //jQuery 会自动把这条语句转成$('#box').find('p')，这会导致一定的性能损失。它比最快 的形式慢了 5%-10% $('p', '#box'); |
| //这条语句在 jQuery 内部，会使用$.sibling()和 javascript 的 nextSibling()方法，一个个遍 历节点。它比最快的形式大约慢 50% $('#box').children('p'); |
| //jQuery 内部使用 Sizzle 引擎，处理各种选择器。Sizzle 引擎的选择顺序是从右到左， 所以这条语句是先选 p，然后再一个个过滤出父元素#box，这导致它比最快的形式大约慢 70% $('#box > p'); |
| //这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于 选择多级子元素，所以它的速度更慢，大概比最快的形式慢了 77%。 $('#box p'); |