jQuery使用注意点技巧2——jQuery 选择器详解
16lz
2021-01-22
要用好jQuery首先要用好选择器，连元素都获取不了的话，就谈不上什么特效什么插件了，而且jQuery的选择器用法简单全部学会也不会花你多少时间的，不过有一点还是需要注意的：
通过jQuery的选择器获得的是jQuery对象集合，不能直接使用dom对象的方法，如果要使用dom的方法要取出其中意向，比如：$('#msg')[0].innerHTML或$('#msg')[0].value。jQuery对象有自己的方法比直接调用dom方法更方便。
1、基本选择器
1、$('#msg') ：选中id为msg的元素
2、$('div')：所有div
3、$('*')：所有对象
4、$('p,div,a')：p或div或a标签都被选出来
2、层次选择
1、$('p div ul li')：p标签下的div标签下的ul标签下的li......
2、$('p>div')：所有父节点为p的div
3、$('p+div')：所有与p节点同层并且紧邻其后的div，比如 <p></p><div id="1"></div>< id="2"div></div>，用了$('p+div')之后会取到id为2的div
4、$('p~div')：所有与p节点同层并且尾随其后的所有div，还是上面那个例子，这次使用了$('p~div')会得到id为1和2的两个div的集合
需要注意的一点是：
> + ~ 这三个层次运算符是可以连着用的。举个例子：
<ul><li>
<spanclass="text"></span>
<ul>
<li>
<ul>
<li>aaa</li>
</ul> </li>
</ul>
<ul>
<li>
<ul>
<li>bbb</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>...
alert($('.text+ul~ul>li>ul>li')[0].innerHTML);
</script>
会打印出来的内容是：bbb
3、基本滤镜
基本滤镜的使用我举个例子，接下来的就套这个例子就好理解了
比如：
<ul><li>aaa</li>
</ul>
<script>...
$('ul:first')//会获得<li>aaa</li>对象
</script>
| :first | 返回: <jQuery对象> |
| 匹配第一个元素 | |
| :last | 返回: <jQuery对象> |
| 匹配最后一个元素 | |
| :not(selector) | 返回: <jQuery对象> 数组 |
| 匹配不满足selector的元素 | |
| :has(selector) | 返回: <jQuery对象> 数组 |
| 匹配包含满足selector的元素。此选择器为1.2新增 | |
| :even | 返回: <jQuery对象> 数组 |
| 从匹配的元素集中取序数为偶数的元素。 | |
| :odd | 返回: <jQuery对象> 数组 |
| 从匹配的元素集中取序数为奇数的元素。 | |
| :eq(index) | 返回: <jQuery对象> 数组 |
| 从匹配的元素集中取第index个元素 | |
| :gt(index) | 返回: <jQuery对象> 数组 |
| 从匹配的元素中取序数大于index的元素 | |
| :lt(index) | 返回: <jQuery对象> 数组 |
| 从匹配的元素中取序数小于index的元素 | |
| :header | 返回: <jQuery对象> 数组 |
| 匹配所有的标题元素，例如h1，h2，h3……hN。此选择器为1.2新增 | |
| :animated | 返回: <jQuery对象> 数组 |
| 匹配正在执行动画的元素。此选择器为1.2新增 | |
| :empty | 返回: <jQuery对象> 数组 |
| 匹配所有没有子元素（包括文本内容）的元素 | |
| :parent | 返回: <jQuery对象> 数组 |
| 匹配包含子元素（包含文本内容）的所有元素 | |
| :contains(text) | 返回: <jQuery对象> 数组 |
| 匹配所有含有text的元素 | |
| :hidden | 返回: <jQuery对象> 数组 |
| 匹配所有隐藏的元素，包含属性type值为hidden的元素 | |
| :visible | 返回: <jQuery对象> 数组 |
| 匹配所有非隐藏的元素 | |
4、子元素滤镜
| E:nth-child(index/even/odd/equation) | 返回: <jQuery对象> 数组 |
| 匹配所有E在其父元素下满足（index/even/odd/equation）条件的集合。注：下标从1开始 | |
| E:first-child | 返回: <jQuery对象> 数组 |
| 匹配所有E在其父元素下是第一个子元素的集合。例如：HTML（<div><p id="p1"></p></div><div><p id="p2"></p><p id="p3"></p></div>"），使用$("p:first-child")，选取：<p id="p1"></p><p id="p2"></p> | |
| E:last-child | 返回: <jQuery对象> 数组 |
| 匹配所有E在其父元素下是最后一个子元素的集合。例如：同上的HTML，使用$("p:last-child")，选取：<p id="p1"></p><p id="p3"></p> | |
| E:only-child | 返回: <jQuery对象> 数组 |
| 匹配所有E是其父元素的唯一子元素的集合。例如：同上的HTML，使用$("p:only-child")，选取：<p id="p1"></p> | |
5、表单滤镜
| :input | 返回: <jQuery对象> 数组 |
| 匹配所有的input、textarea、select、button | |
| :text | 返回: <jQuery对象> 数组 |
| 匹配文本域。注：在IE浏览器下，选择的对象是所有type属性为text的元素，在非IE浏览器下，选择的对象是input元素type属性为text的元素 | |
| :password | 返回: <jQuery对象> 数组 |
| 匹配密码域。注：在IE浏览器下，选择的对象是所有type属性为password的元素，在非IE浏览器下，选择的对象是input元素type属性为password的元素 | |
| :radio | 返回: <jQuery对象> 数组 |
| 匹配单选按钮。注：在IE浏览器下，选择的对象是所有type属性为radio的元素，在非IE浏览器下，选择的对象是input元素type属性为radio的元素 | |
| :checkbox | 返回: <jQuery对象> 数组 |
| 匹配复选框。注：在IE浏览器下，选择的对象是所有type属性为checkbox的元素，在非IE浏览器下，选择的对象是input元素type属性为checkbox的元素 | |
| :submit | 返回: <jQuery对象> 数组 |
| 匹配提交按钮。注：在IE浏览器下，选择的对象是所有type属性为submit的元素，在非IE浏览器下，选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素 | |
| :image | 返回: <jQuery对象> 数组 |
| 匹配图像域。注：在IE浏览器下，选择的对象是所有type属性为image的元素，在非IE浏览器下，选择的对象是input元素type属性为image的元素 | |
| :reset | 返回: <jQuery对象> 数组 |
| 匹配重置按钮。注：在IE浏览器下，选择的对象是所有type属性为reset的元素，在非IE浏览器下，选择的对象是input或button元素type属性为reset的元素 | |
| :button | 返回: <jQuery对象> 数组 |
| 匹配按钮。注：在IE浏览器下，选择的对象是所有type属性为button的元素和元素名为button的元素，在非IE浏览器下，选择的对象是input元素type属性为button的元素和元素名为button的元素 | |
| :file | 返回: <jQuery对象> 数组 |
| 匹配文件域。注：在IE浏览器下，选择的对象是所有type属性为file的元素，在非IE浏览器下，选择的对象是input元素type属性为file的元素 | |
| :enabled | 返回: <jQuery对象> 数组 |
| 匹配所有可用的元素。注：即:not(:disabled)，参考:disabled的注释 | |
| :disabled | 返回: <jQuery对象> 数组 |
| 匹配所有禁用的元素。注：在非IE浏览器下，选择的对象是禁用的表单元素 | |
| :checked | 返回: <jQuery对象> 数组 |
| 匹配所有被选中的表单。注：在IE浏览器下，选择的对象是含有checked属性的所有元素 | |
| :selected | 返回: <jQuery对象> 数组 |
| 匹配所有选择的表单。注：在IE浏览器下，选择的对象是含有selected属性的所有元素 | |
5、属性滤镜
| [attribute] | 返回: <jQuery对象> 数组 |
| 匹配拥有attribute属性的元素 | |
| [attribute=value] | 返回: <jQuery对象> 数组 |
| 匹配属性attribute为value的元素 | |
| [attribute!=value] | 返回: <jQuery对象> 数组 |
| 匹配属性attribute不为value的元素 | |
| [attribute^=value] | 返回: <jQuery对象> 数组 |
| 匹配属性attribute的值以value开始的元素 | |
| [attribute$=value] | 返回: <jQuery对象> 数组 |
| 匹配属性attribute的值以value结尾的元素 | |
| [attribute*=value] | 返回: <jQuery对象> 数组 |
| 匹配属性attribute的值包含value的元素 | |
| [selector1][selector2][selectorN] | 返回: <jQuery对象> 数组 |
| 匹配满足属性选择器selector1、selector2、selectorN的元素 | |
属性滤镜我举个例子：
<divid='1'rel='mydiv'></div><divid='2'rel='mydiv'></div>
<divid='3'rel='mydiv'></div>
<divid='4'rel='mydiv'></div>
<divid='5'rel='mydiv'></div>
<script>...
$('div[@rel*=mydiv]')//获得所有rel属性为mydiv的div
</script>
更多相关文章
- ajax回调json数组对象，jquery中$.each()循环解析
- 禁用焦点上的锚点（）元素上的灰色边框
- 在jQuery中使用部分ID查找元素?(复制)
- 使用数字作为javascript对象元素的名称
- 将php jsonencode数组结果显示为ajax成功函数
- 如何使用XMLHttpRequest向服务器发送数组
- 使用类似$（“。someClass”）的JQuery确定元素集合是否可见
- 【JavaScript】jQuery+ajax传递json数组（局部响应处理）
- 创建一个未排序的数组，其中包含重复元素和唯一元素的总和