选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点:
1.简化代码的编写
2.隐式迭代
3.无须判断对象是否存在
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") 选择所有标题元素,如h1,h2,h3等
$("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*='news']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且name属性以man结尾的元素
子元素过滤选择器:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素下的span元素,只取第一个
$("div span:last-child") 返回所有的div元素下的span元素,只取最后一个
$("div button:only-child") 返回所有的div下的所有的button元素中只有一个子元素的数组
表单元素选择器:
$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
$('input:text') 选择所有input元素中类型为text的input元素
$('input:password') 选择所有input元素中类型为password的input元素
$('input:radio') 选择所有input元素中类型为radio的input元素
$('input:checkbox') 选择所有input元素中类型为checkbox的input元素
$('input:submit') 选择所有input元素中类型为submit的input元素
$('input:image') 选择所有input元素中类型为image的input元素
$('input:button') 选择所有input元素中类型为button的input元素
$('input:file') 选择所有input元素中类型为file的input元素
$("input:hidden") 选择所有input元素中类型为hidden的input元素
表单元素过滤选择器:
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
以上所述是给大家介绍的jQuery选择器总结之常用元素查找方法,希望对大家有所帮助,如果大家有任何疑问

dw选择器的更多相关文章

  1. CSS概述<选择器总结>

    概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...

  2. 怎么使用dreamweaver制作网页教程 dw建站设计网页

    对于网页制作相关专业人士一定对dreamweaver有所认识,下面小编就问大家总结一下相关网页制作的一些步骤,喜欢的朋友可以一起来学习一下   Dreamweaver这一款专业的网页制作软件,相信相关 ...

  3. 2016/2/26 jQuery的技术 1,安装 2,语法选择器$ 事件触发 3,常用jQuery函数

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  4. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  5. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  6. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  7. 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  9. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

随机推荐

  1. Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法

    今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...

  2. Numpy | ndarray数组基本操作

    搞不懂博客园表格的排版... 说明: 0 ndarray :多维数组对象 1 np :import numpy as np 2 nda :表示数组的名称 1 生成数组 函数名 描述 np.array ...

  3. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(8.7)Standard Vendor Specific Command Format

    8.7 Standard Vendor Specific Command Format 标准的厂商特定命令格式 Controller可以支持Figure 106中定义的标准的Vendor Specif ...

  4. 微信小程序自定义顶部导航

    注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...

  5. Jupyter Notebook快捷键总结

    1. Jupyter Notebook有两种mode Enter:进入edit模式 Esc:进入command模式 2. Command命令快捷键: A:在上方增加一个cell B:在下方增加一个ce ...

  6. NIO 和BIO

    讲讲NIO? 传统的IO流是阻塞式的,会一直监听一个ServerSocket,在调用read等方法时,他会一直等到数据到来或者缓冲区已满时才返回.调用accept也是一直阻塞到有客户端连接才会返回.每 ...

  7. jQuery---版本问题

    jQuery的版本 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 大版本分类: 1.x版本:能够兼容IE678浏览器 2.x ...

  8. 为QT应用程序添加图标 转

    第1,第2种方法经本人验证可行 1:通过qmake生成makefile实现过程: (1) 找到一张图片.ico,名字改为myappico.ico: (2) 创建一个新的文本文档,内部添加  IDI_I ...

  9. 论Mac与windows的STS下的路径问题

    mac下的 <!-- javaBean生成在哪里 --> <javaModelGenerator targetPackage="com.atcrowdfunding.bea ...

  10. Win10激活工具 —— HWIDGen的使用方法

    一:引言 众所周知,Windows系统在安装完成之后,第一步就是激活系统,网上的一些激活方法大多数都是KMS激活,激活持续时间为半年. 因此,我找到了一个可以永久激活的工具:HWIDGen,它可以数字 ...