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 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
canvas绘制的直线动画
Jan 23 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
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之字符串变相相减的代码
2007/03/19 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python实现飞机大战项目
2020/03/11 Python
python打包生成so文件的实现
2020/10/30 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
大学信息公开实施方案
2014/03/09 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
企业党员个人自我评价
2014/09/20 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书