jQuery选择器全面总结


Posted in Javascript onJanuary 06, 2014

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法  

jQuery选择器使得获得页面元素变得更加容易、更加灵活,从而大大减轻了开发人员的压力。如同盖楼一样,没有砖瓦,就盖不起楼房。得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性。当然想一下子掌握所有选择器也是很困难的,这个得靠实践和积累。

现在我们正式进入jQuery选择器的学习。我们将jQuery选择器进行分类学习,将jQuery选择器分为以下几种:

1、基本选择器

◦id                              根据元素ID选择
◦elementname       根据元素名称选择
◦classname            根据元素css类名选择

举例:

<input type="text" id="ID" value="根据ID选择" />

<a>根据元素名称选择</a>

<input type="text" class="classname" value="根据元素css类名选择" />
jQuery("#ID").val();

jQuery("a").text();

jQuery(".classname").val();

即可分别得到元素的值。以上三种为最常见的选择器,其中ID选择器是效率最高的,在可能的情况下应该尽量使用它。

2、层次选择器

◦ancestor descendant  祖先和子孙选择器
◦parent > child           父子节点选择器
◦prev + next                同级别选择器
◦prev ~ siblings         过滤选择器

举例:

<div id="divTest">

    <input type="text" value="投资" />

    <input id="next" type="text" />

    <input type="text"  value="担当" />

    <input type="text" title="学习" value="学习" />

    <a>1</a>

    <a>2</a>

</div>
//得到div中的a标签内容 结果为12

jQuery("#divTest a").text();

//输出div直接子节点 结果为投资

jQuery("#divTest>input").val();

//输出id为next的后一个同级别元素 结果为担当

jQuery("#next+input").val();

//同上,并且是有title的元素 结果为学习

jQuery("#next~[title]").val();

3、基本过滤选择器

◦:first                       找到第一元素
◦:last                       找到最后一个元素
◦:not(selector)      去除与给定选择器匹配的元素
◦:even                     匹配索引值为偶数的元素 从0开始计数
◦:odd                       匹配索引值为奇数的元素 从0开始计数
◦:eq(index)             匹配一个给定索引值元素 从0开始
◦:gt(index)              匹配大于给定索引值元素
◦:lt(index)               匹配小于给定索引值元素
◦:header                 选择h1,h2,h3一类的标签 (目前没用过)
◦:animated             匹配正执行动画效果的元素 (目前没用过)

举例:

<div id="divTest">

    <ul>

        <li>投资</li>

        <li>理财</li>

        <li>成熟</li>

        <li>担当</li>

        <input type="radio" value="学习" checked="checked" />

        <input type="radio" value="不学习" />

    </ul>

</div>
//第一个li内容 结果为投资

jQuery("li:first").text();

//最后一个li内容 结果为担当

jQuery("li:last").text();

//input未被选中的值 结果为不学习

jQuery("li input:not(:checked)").val();

//索引为偶数的li 结果为投资 成熟

jQuery("li:even").text();

//索引为奇数的li 结果为理财 担当

jQuery("li:odd").text();

//索引大于2的li的内容 结果为担当

jQuery("li:gt(2)").text();

//索引小于1的li的内容 结果为投资

jQuery("li:lt(1)").text();

4、内容过滤器

◦:contains(text)              匹配包含给定文本的元素
◦:empty                        匹配所有不包含子元素或者文本的空元素
◦:has(selector)              匹配含有选择器所匹配的元素

举例:

<div id="Test">

    <ul>

        <li>hyip投资</li>

        <li>hyip</li>

        <li></li>

        <li>理财</li>

        <li><a>投资</a></li>

    </ul>

</div>  
//包含hyip的li的内容 结果为hyip投资 hyip

jQuery("li:contains('hyip')").text();

//内容为空的li的后一个li内容 结果为理财

jQuery("li:empty+li").text();

//包含a标签的li的内容 结果为投资

jQuery("li:has(a)").text();

5、可见性过滤器

◦:hidden    匹配不可见元素
◦:visible     匹配可见元素

举例:

<ul>

    <li>可见</li>

    <li style="display:none;">不可见</li>

</ul>
//不可见的li的内容 结果为不可见

jQuery("li:hidden").text();

//可见的li的内容 结果为可见

jQuery("li:visible").text();

6、属性过滤器

◦[attribute=value]                 匹配属性是给定值的元素
◦[attribute^=value]               匹配属性是以给定值开始的元素
◦[attribute$=value]              匹配属性是以给定值结束的元素
◦[attribute*=value]               匹配属性包含给定值的元素

举例:

<input type="text" name="hyipinvest" value="hyip投资" />

<input type="text" name="investhyip" value="投资hyip" />

<input type="text" name="google" value="HYIP" />

//name为hyipinvest的值 结果为hyip投资

alert(jQuery("input[name='hyipinvest']").val());

//name以hyip开始的值 结果为hyip投资

alert(jQuery("input[name^='hyip']").val());

//name以hyip结束的值 结果为投资hyip

alert(jQuery("input[name$='hyip']").val());

//name包含oo的值 结果为HYIP

alert(jQuery("input[name*='oo']").val());

jQuery选择器就总结到这里,这些基本上都是在学习过程中遇到的,还有极少部分没有总结出来。经过一段时间实践,相信大家就能够熟练的使用jQuery选择器了。
 
$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 
$("div")           选择所有的div标签元素,返回div元素数组 
$(".myClass")      选择使用myClass类的css的所有元素 
$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass") 
 
层叠选择器: 
$("form input")         选择所有的form元素中的input元素 
$("#main > *")          选择id值为main的所有的子元素 
$("label + input")     选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 
$("#prev ~ div")       同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 
 
基本过滤选择器: 
$("tr:first")               选择所有tr元素的第一个 
$("tr:last")                选择所有tr元素的最后一个 
$("input:not(:checked) + span")   
 
过滤掉:checked的选择器的所有的input元素 
 
$("tr:even")               选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) 
 
$("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素 
$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 
$("td:gt(4)")             选择td元素中序号大于4的所有td元素 
$("td:ll(4)")              选择td元素中序号小于4的所有的td元素 
$(":header") 
$("div:animated") 

内容过滤选择器: 
 
$("div:contains('John')") 选择所有div中含有John文本的元素 
$("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组 
$("div:has(p)")        选择所有含有p标签的div元素 
$("td:parent")          选择所有的以td为父节点的元素数组 

可视化过滤选择器: 
 
$("div:hidden")        选择所有的被hidden的div元素 
$("div:visible")        选择所有的可视化的div元素 

属性过滤选择器: 
 
$("div[id]")              选择所有含有id属性的div元素 
$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素 
 
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 
 
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素 
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 
$("input[name*='man']")          选择所有的name属性包含'news'的input元素 
 
$("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 
 
子元素过滤选择器: 
 
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 
 
$("div span:first-child")          返回所有的div元素的第一个子节点的数组 
$("div span:last-child")           返回所有的div元素的最后一个节点的数组 
$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组 
 
表单元素选择器: 
 
$(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button 
 
$(":text")                     选择所有的text input元素 
$(":password")           选择所有的password input元素 
$(":radio")                   选择所有的radio input元素 
$(":checkbox")            选择所有的checkbox input元素 
$(":submit")               选择所有的submit input元素 
$(":image")                 选择所有的image input元素 
$(":reset")                   选择所有的reset input元素 
$(":button")                选择所有的button input元素 
$(":file")                     选择所有的file input元素 
$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域 
 
表单元素过滤选择器: 
 
$(":enabled")             选择所有的可操作的表单元素 
$(":disabled")            选择所有的不可操作的表单元素 
$(":checked")            选择所有的被checked的表单元素 
$("select option:selected") 选择所有的select 的子元素中被selected的元素 
 
 
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text() 
 
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 
 
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val(); 
 
 
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 
 
1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点 
 
例子:找到表单中所有的 input 元素 
 
HTML 代码: 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 

jQuery 代码: 
$("form input") 

结果: 
[ <input name="name" />, <input name="newsletter" /> ] 
 
2. $("A>B") 查找A元素下面的直接子节点 

例子:匹配表单中所有的子级input元素。 
 
HTML 代码: 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 

jQuery 代码: 
$("form > input") 

结果: 
[ <input name="name" /> ] 
 
3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 

例子:匹配所有跟在 label 后面的 input 元素 
 
HTML 代码: 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 

jQuery 代码: 
$("label + input") 

结果: 
[ <input name="name" />, <input name="newsletter" /> ] 
 
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 

例子:找到所有与表单同辈的 input 元素 
 
HTML 代码: 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 

jQuery 代码: 
$("form ~ input") 

结果: 
[ <input name="none" /> ]

Javascript 相关文章推荐
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
JavaScript定义类的几种方式总结
Jan 06 #Javascript
javascript函数定义的几种区别小结
Jan 06 #Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 #Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 #Javascript
JavaScript将数据转换成整数的方法
Jan 04 #Javascript
jquery.post用法关于type设置问题补充
Jan 03 #Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 #Javascript
You might like
php构造函数实例讲解
2013/11/13 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python3爬取数据至mysql的方法
2018/06/26 Python
python3实现猜数字游戏
2020/12/07 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
python3跳出一个循环的实例操作
2020/08/18 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
小学感恩主题班会
2015/08/12 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技