这一篇主要写过滤选择器和表单选择器

在这里,我不再已表格形式说明(自己太懒了),主要以文字形式说明一下每个选择器的作用描述。

 3.过滤选择器

过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素。过滤规则和css中的伪类选择器语法相同。即都是已冒号(:)开头。按照不同的过滤规则,可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象过滤选择器。

3-1 基本过滤选择器

:first 用于选取第一个元素。如$("div:first")选取所有<div>元素中的第一个<div>元素

:last 选取最后一个元素。  如$("div:last")选取所有<div>元素中最后一个<div>元素

:not(selector) 去除所有与给定选择器匹配的元素。 如$("input:not(.myClass)")选取class不是myClass的<input>元素

:even 选取索引是偶数的所有元素,索引从0开始。如$("input:even")选取索引是偶数的<input>元素

:odd  选取索引是奇数的所有元素,索引从0开始。如$("input:odd")选取索引时奇数的<input>元素

:eq(index)选取索引等于index的元素(index从0开始)。如$("input:eq(1)")选取索引等于1的<input>元素

:gt(index)选取索引大于index的元素(index从0开始)。如$("input:eq(1)")选取索引大于1的<input>元素(不包括1)

:lt(index)选取索引小于index的元素(index从0开始)。如$("input:lt(1)")选取索引小于1的<input>元素(不包括1)

:header 选取所有的标题元素,例如h1,h2,h3等等。如$("header")选取网页中所有的<h1>,<h2>,<h3>.....

:animated 选取当前正在执行动画的所有元素。如$("div:animated")选取正在执行的动画的<div>元素

:focus  选取当前获得焦点的元素 如$(":focus")选取当前获得焦点的元素

3-2 内容过滤选择器

其规则主要体现在它所包含的子元素或文本内容上。内容过滤选择器的介绍说明如下:

:contains(text) 选取含有文本内容为"text"的元素 如$("div:contains('我')")选取文本内容还有"我"的<div>元素

:empty 选取不包含子元素或者本文的空元素 $("div:epmty")选取不包含子元素(包括文本元素)的<div>空元素

:has(selector)选取含有选择器所匹配的元素的元素 如$("div:has(p)")选取含有<p>元素的<div>元素

:parent 选取含有子元素或者文本的元素 如$("div:parent")选取拥有子元素(包括文本元素)的<div>元素

3-3 可见性过滤选择器

其规则主要是根据元素的可见与不可见状态开区分选择相应的元素。

:hidden 选取所有不可见元素。 如$(":hidden")选取所有不可见元素。包括<input type="hidden"/>,<div style="display:none">和<div style="visbility:hidden">等元素,如果只是选取<input type="hidden"/>可以使用$("input:hidden");

:visible 选取所有可见元素 如$("div:visible")选取所欲哦可见的<div>元素

3-4 属性过滤选择器

属性过滤选择器的规则是通过元素的属性来获取相应的元素。

[attribute]选取用于此属性的元素 如$("div[id]")选取用于属性id的元素

[attribute=value]选取属性值等于value的元素。如$("div[title=test]")选取属性值等于"test"的<div>元素[attribute!=value]不解释。。。

[attribute^=value]选取属性值以value开头的元素。如$("div[title^=test]")选取属性title以"test"开头的<div>元素

[attribute$=value]选取属性值以value结尾的元素。不举例咯。。
[attribute*=value]选取属性值包含value的元素。如$("div[title*=test]")选取
属性title包含"test"的<div>元素
[attribute|=value]选取属性等于给定字符串或者以该字符串为前缀(该字符串后跟
一个连字符'-')的元素。如$("div[title|='en']")选取属性title等于"en"或者
以"en"为前缀的<div>元素
[attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素。如$("div[title~='uk']")选取属性title用空格分隔的值中包含字符uk的<div>元素
[attribute1][attribute2][attribute3]用属性选择器合并成一个复合属性选择器
,满足多个条件。每选择一次,缩小一次范围。如$("div[id][title$='test']")选
取拥有属性id并且属性title以"test"结尾的<div>元素。

3-5 子元素过滤选择器
子元素过滤选择器的过滤规则相对于其他选择器稍微有些复杂。
:nth-child(index/even/odd/equation)选取每一个父元素下的第index个子元素或者奇偶元素.(index从1开始)。
注意:eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起的。
:first-child 选取每一个父元素下的第一个子元素。
注意与:first的区别。:first只是返回单个元素,而:first-child选择符则是将为每一个父元素匹配第一个子元素。
如$("ul li:first-child");选取每个<ul>中第1个<li>元素。
:last-child.不解释。。。
:only-child 如果某个元素是它的父元素的唯一的子元素,那么它将会被匹配。$("ul li:only-child")在ul中选取是唯一子元素的<li>元素。
由于:nth-child()选择器是非常重要的过滤选择器,下面单独详细介绍下它的功能:
(1):nth-child(even)能选取每一个父元素下索引值为偶数的元素
(2):nth-child(odd)能选取每一个父元素下索引值为基数的元素
(3):nth-child(2)能选取每一个父元素下的索引值等于2的元素
(4):nth-child(3n)能选取每一个父元素下的索引值为3的倍数的元素(n从1开始)
(5):nth-child(3n+1)能选取每一个父元素下的索引值是(3n+1)的元素(n从1开始)

3-6表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤。例如选择被选中的下拉框,多选框等元素。
:enabled 选取所有可用元素。如$("#form1 :enabled");选取id为"form1"的表单内的所有可用元素
:disabled 选取所有不可用元素。如$("#form2 :disabled");选取id为form3的表单内的所有不可用元素
:checked选取所有被选中的元素(单选框,复选框)如$("input:checked");选取所有被选中的<input>元素。
:selected选取所有被选中的选项元素(下拉列表) 如$("select option:selected");选取所有被选中的选项元素

4、表单选择器

为了使用户能过更加灵活的操作表单,jquery中专门加入了表单选择器。

:input 选取所有的<input>、<textarea>、<select>、<button>元素 如$(":input")选取所有的<input>、<textarea>、<select>、<button>元素

:text选取所有的单行文本框 如$(":text")

:password 选取所有的密码框

:radio 选取所有的单选框

:checkbox 选取所有的多选框

:submit 选取所有的提交按钮

:image 选取所有的图像按钮

:reset 选取所有的重置按钮

:button 选取所有的按钮

:file 选取所有的上传域

:hidden选取所有不可见元素

jQuery中的选择器(下)的更多相关文章

  1. js进阶 10-4 jquery中基础选择器有哪些

    js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...

  2. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

  3. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  4. jquery中判断选择器,找没找到元素用$().size()==0

    jquery中判断选择器,找没找到元素用$().size()==0

  5. jQuery中,选择器既匹配开头又匹配结尾

    jQuery中,选择器既匹配开头又匹配结尾的方法: [attr^=val]attr$=val [attr^=val][attr$=val]

  6. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  7. jQuery中的选择器(上)

    从学习jquery开始,现在已经是第三遍看锋利的jQuery这本书了,现在打算对jQuery中的各种选择器进行一下总结,主要是是为了进一步系统的巩固自己对知识的掌握,另外也可以为那些学习jQuery并 ...

  8. JQuery中checkbox选择器

    今天我们讲的是如何选择HTML网页中CheckBox选择器 如下图,是几个checkbox <input type='checkbox'checked="checked"/& ...

  9. JQuery中的选择器的总结

    JQuery的选择器十分的强大,但是我平常经常用到的却十分的有限,趁现在有时间我感觉有必要总结一下. 基本选择器 $("#ID") 选择ID所对应的标签元素 返回一个标签元素$(& ...

随机推荐

  1. java做帐户登录失败锁定

    对于连续失败登录应用系统5次的帐号,需锁定该帐号至少30分钟不允许登录. 这里也用简单的map集合进行判定,功能能实现,但并不是很完美,不用更改数据库的表字段 1.首先建立一个用户登陆失败的实体类 p ...

  2. 【Egret】Lakeshore 使用中的一些疑难解决技巧!

    用Lakeshore 1.2.1版本发布的html,会出现一些用户不想要的东西,下面讲讲如何去掉: 一.问题:游戏或者动画在PC端也能跟随游览器自适应. 解决方法:①找到发布文件下的  egret_l ...

  3. 手机自动化测试:appium源码分析之bootstrap十一

    手机自动化测试:appium源码分析之bootstrap十一   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...

  4. 老李分享:JVM调优

    老李分享:JVM调优   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨 ...

  5. JDBC基础学习(三)—处理BLOB类型数据

    一.BLOB类型介绍      在MySQL中,BLOB是一个二进制的大型对象,可以存储大量数据的容器,它能容纳不同大小的数据.      在MySQL中有四种BLOB类型.          实际使 ...

  6. Executor以及线程池

    在应用程序中,总是会出现大量的任务,包括相同类型的和不同类型的.要快速处理这些任务,常见方法就是利用多线程,但是也不可能为每个任务都创建一个线程,这样内存也不够,并且线程的创建销毁开销很大.最好是少量 ...

  7. 统计web应用程序的访问人数

    新建一个空网站,添加Global.asax全局处理. 文件目录如图: 在global类中添加代码: using System; using System.Collections.Generic; us ...

  8. 关于苹果真机 getFullYear()返回值为NAN的问题

    问题描述: 在html页面中获得后台传过来的一个时间并显示在页面上,我用getFullYear() ,getMonth(),getDate()分别获得了年月日在电脑上和三星手机上页面都能正确的显示时间 ...

  9. less学习笔记(二)

    1.作用域:基本与javascrip的作用域相似,即先找局部变量,后找全局变量.找变量时遵循就近原则. 2.条件表达式:.mixin (@a) when (lightness(@a) >= 50 ...

  10. 找到一个新的超好用的U盘启动制作工具了

    有同事叫帮装电脑,弄个U盘说制作一个启动盘,结果一搜,出了“雨林木风”的主页. 太好用了,高手的产物,比以前找的方便一百倍.又简单,又实用,同步又下载好GHO文件.唯一 的问题是XP中用的GHO,好多 ...