这一节详细的总结jQuery选择器。

一、基础选择器

$('#info');        // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素
$('.infoClass');    // 选择class为infoClass的所有元素
$('div');      // 选择标签名为div的所有的元素
$('*');       // 选择所有标签元素

二、基本过滤器

基本选择器获取的元素集合,通过过滤器的筛选,使选择更加精确。

$('.infoClass:first');    // 选择class为infoClass的所有元素集合,并筛选集合中的第一个元素
$('.infoClass:last'); // 选择class为infoClass的所有元素集合,并筛选集合中的最后一个元素
$('.infoClass:odd'); // 选择class为infoClass的所有元素集合,并筛选集合中索引为奇数的元素,如1,3,5
$('.infoClass:even'); // 选择class为infoClass的所有元素集合,并筛选集合中索引为偶数的元素,如0,2,4
$('.infoClass:eq(2)'); // 选择class为infoClass的所有元素集合,并筛选集合中索引为2的元素
$('.infoClass.lt(2)'); // 选择class为infoClass的所有元素集合,并筛选集合中索引小于2的元素集合
$('.infoClass.gt(2)'); // 选择class为infoClass的所有元素集合,并筛选集合中索引大于2的元素集合

三、内容过滤器

jQery准备了内容过滤器用于对选择的元素集合内容进行过滤。

统一名称:

  • 空元素:不包含任何后代元素或文本内容的元素,如<div></div>
  • 非空元素:包含后代元素或者包含文本内容的元素
$('div:contains("info")');     // 选择标签为div的所有元素集合,并筛选集合中文本内容包含info字段的元素
$('div:empty'); // 选择标签为div的所有元素集合,并筛选集合中所有空元素
$('div:parent'); // 选择标签为div的所有元素集合,并筛选集合中所有非空元素
$('div:has(p)'); // 选择标签为div的所有元素集合,并筛选集合中后代元素含有p标签的元素

四、可视化过滤器

对于元素是否可见,jQuery也进行了处理。

$('div:visible');            // 选择标签为div的所有元素集合,并筛选集合中可见的元素
$('div:hidden'); // 选择标签为div的所有元素集合,并筛选集合中不可见的元素

五、属性过滤器

不同元素之间,拥有不同的属性参数,jQuery允许通过参数进行过滤。

$('input[placeholder]');               // 选择所有标签为input的元素集合,并筛选包含placeholder属性的元素
$('input[placeholder="info"]'); // 选择所有标签为input的元素集合,并筛选placeholder属性值为info的元素
$('input[placeholder^="info"]'); // 选择所有标签为input的元素集合,并筛选placeholder属性值以info开头的元素
$('input[placeholder$="tion"]'); // 选择所有标签为input的元素集合,并筛选placeholder属性值以tion结尾的元素
$('input[placeholder*="mat"]'); // 选择所有标签为input的元素集合,并筛选placeholder属性值中包含字段mat的元素
$('input[id][placeholder*="mat"]'); // 选择所有标签为input的元素集合,并筛选包含id属性并且placeholder属性值中包含字段mat的元素

六、子元素过滤器

这个比较容易混淆,进行对比总结。

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$('ul li:first-child').css('background-color', 'red');   // 选择每一个ul标签下的li元素集合中的第一个

$('ul li:first').css('background-color', 'red');   // 选择所有ul标签下的li元素集合中的第一个

$('ul li:last-child');   // 选择每一个ul标签下的li元素集合中的最后一个

七、关系选择器

  • 同级元素:即当前元素处于同一层级。
  • 父级元素:即当前元素的直属上层元素。
  • 祖先元素:即当前元素的所有上层元素。
  • 子级元素:即当前元素的直属子层元素。
  • 后代元素:即当前元素的所有子层元素。
$('form input');           // 选择所有标签为form的元素中,后代元素标签为input的元素
$('form>input'); // 选择所有标签为form的元素中,子级元素标签为input的元素
$('label+input'); // 选择所有标签为label的同级元素中,标签为input的元素集合中的第一个
$('label~input'); // 选择所有标签为label的同级元素中,标签为input的元素集合

八、表单选择器

方便表单元素的选择。

$(':input');                // 选择所有表单输入元素,包括input,textarea,select
$(':text'); // 选择所有的type为text的input元素
$(':password'); // 选择所有的type为password的input元素
$(':radio'); // 选择所有的type为radio的input元素
$(':checkbox'); // 选择所有的type为checkbox的input元素
$(':submit'); // 选择所有的type为submit的input元素
$(':image'); // 选择所有的type为image的input元素
$(':reset'); // 选择所有的type为reset的input元素
$(':button'); // 选择所有的type为button的input元素
$(':file'); // 选择所有的type为file的input元素
$(':hidden'); // 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤器

$(':enabled');                  // 选择所有的可操作的表单元素
$(':disabled'); // 选择所有的不可操作的表单元素
$(':checked'); // 选择所有的被checked的表单元素
$('select option:selected'); // 选择所有的select 的子元素中被selected的元素

九、对比总结

为了方便记忆,将功能相关的选择器进行总结:

1. $('#id')与$('.calss')

$('#id');        // 根据id选择元素
$('.class');    // 根据class选择元素

2.$('div:first')与$('div:last')

$('div:first');     // 选择div元素集合中的第一个
$('div:last'); // 选择div元素集合中的最后一个

3.$('div:odd')与$('div:even')

$('div:odd');       // 选择div元素集合中的奇数个元素
$('div:even'); // 选择div元素集合中的偶数个元素

4.$('div:gt(i)')与$('div:lt(i)')

$('div:gt(i)');       // 选择div元素集合中索引大于i的元素
$('div:lt(i)'); // 选择div元素集合中索引小于i的元素

5.$('div:empty')与$('div:parent')

$('div:empty');        // 选择div元素集合中空元素
$('div:parent'); // 选择div元素集合中非空元素

6.$('div:visible')与$('div:hidden')

$('div:visible');      // 选择div元素集合中可见元素
$('div:hidden'); // 选择div元素集合中隐藏元素

7.$('ul li:first')与$('ul li:first-child')

$('ul li:first');             // 选择所有ul后代元素li元素集合中的第一个
$('ul li:first-child'); // 选择每个ul后代元素li元素集合中的第一个

8.$(':disable')与$(':enable')

$(':disable');             // 选择所有可以操作的表单元素
$(':enable'); // 选择所有不可以操作的表单元素

jQuery学习笔记(三):选择器总结的更多相关文章

  1. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  2. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  3. jquery学习笔记(三):事件和应用

    内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...

  4. jQuery学习笔记(2)-选择器的使用

    一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...

  5. JQuery学习笔记之选择器

    JQuery与DOM对象 <div id="test1" class="test2"></div> DOM对象获取方式: var dom ...

  6. jQuery学习笔记三

    使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...

  7. 初步学习jquery学习笔记(三)

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  10. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

随机推荐

  1. mysql执行计划

         烂sql不仅直接影响sql的响应时间,更影响db的性能,导致其它正常的sql响应时间变长.如何写好sql,学会看执行计划至关重要.下面我简单讲讲mysql的执行计划,只列出了一些常见的情况, ...

  2. ASP.NET MVC 拓展ViewResult实现word文档下载

      最近项目中有同事用到word文档导出功能,遇到了一些导出失败问题,帮其看了下解决问题的同事,看了下之前的代码发现几个问题: 代码编写不规范,word导出功能未收口 重复代码导出都是 实现逻辑比较复 ...

  3. 烂泥:学习Nagios(二):Nagios配置

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 nagios安装完毕后,我们现在就来配置nagios.有关nagios的安装,可以参考<烂泥:学习Nagios(一):Nagios安装>这篇文 ...

  4. Mac下开启FTPserver

    开启命令 sudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist   关闭命令 sudo -s launchctl unlo ...

  5. DNS 原理入门

    导读 DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识.本文详细介绍DNS的原理,以及如何运用工具软件观察它的运作.我的目标是,读完此文后,你就能完全理解DNS. 一 ...

  6. gvim的菜单乱码解决方法

    gvim的菜单乱码解决方法: (乱码是由于系统内码不兼容导致,系统内码包括gb2312 gb18030 utf-8 utf-16[unicode]等) 生成文件 ~/.gvimrc 并添加如下语句:s ...

  7. 在JazzyViewPager中调用其它layout布局xml并使用

    开源地址:https://github.com/jfeinstein10/JazzyViewPager 发现网上的例子使用的是直接创建的一个TextView来做的.但是实际上使用,不可能只有这一个控件 ...

  8. IO - 同步,异步,阻塞,非阻塞 (亡羊补牢篇)

    IO - 同步,异步,阻塞,非阻塞 (亡羊补牢篇) 当你发现自己最受欢迎的一篇blog其实大错特错时,这绝对不是一件让人愉悦的事. <IO - 同步,异步,阻塞,非阻塞 >是我在开始学习e ...

  9. MMORPG大型游戏设计与开发(客户端架构 part10 of vegine)

    界面是游戏中必不可少的一部分,就算你进入游戏没有看到什么UI窗口,你也不必着急,因为多多少少都会有隐藏着的界面等你去体验.一个好的UI大部分应该归功于设计的人与提供美术支持的人员,因为他们是直接设计U ...

  10. OpenStack Networking overview

    原文地址:http://docs.openstack.org/newton/install-guide-ubuntu/neutron-concepts.html Networking service ...