一、jQuery选择器
1、基本选择器:
所有选择器    *
标签选择器    标签名
ID选择器    #ID
类选择器    .className
组合选择器    selector1,selector2
    多个选择器使用逗号分割,多个选择器选择的元素均选中
嵌套选择器    selector1 selector2    
    多个选择器共同使用,在select1中再选择selector2元素
    
2、层次选择器
a、后代选择器  selector1 selector2    【选择后代元素】
两个选择器使用空格隔开,表示选择selector1所有后代selector2的元素
b、子代选择器  selector1>selector2    【选择子代元素】
两个选择器使用>隔开,表示选择所有后代元素中符合selector2的元素
    
3、兄弟选择器    
a、下一个兄弟选择器     selector1+selector2    【选择下一个兄弟元素】
两个选择器使用+隔开,表示可以获取selector1的下一个兄弟元素且该兄弟元素要符合selector2选择器
b、之后所有兄弟选择器  selector1~selector2    【选择后面所有的兄弟元素】
两个选择器使用~隔开,表示可以获取selector1元素之后的所有兄弟元素中符合selector2的元素
    
二、jQuery过滤器
对jQuery选择器选择到的内容的再进行过滤  【建立在前面选择器已经选择到元素的基础之上】
 
1、基本过滤器
语法:  selector:过滤器
selector:first           获取所有已选择到的元素中的第一个元素
selector:last           获取所有已选择到的元素中的最后一个元素
selector:even         获取所有已选择到的元素中的索引为偶数元素
selector:odd           获取所有已选择到的元素中的索引为奇数元素
selector:eq(index)     获取所有已选择到的元素中的索引为index的元素
selector:lt(index)       获取所有已选择到的元素中索引值小于index的元素
selector:gt(index)      获取所有已选择到的元素中索引值大于index的元素
selector1:not(selector2)  获取所有已选择到的元素中不为selector2的元素
selector:header                获取所有已选择到的元素中的标题元素【标题h1~h6】

2、内容过滤器
语法:  selector:过滤器            
selector:contains(text)    获取所有已选择到的元素中文本包含text的元素
selector:empty                获取所有已选择到的元素中没有子节点的元素
selector:parent                获取所有已选择到的元素中有子节点的元素
selector:has(selector2)  获取所有已选择到的元素中包含selector2的元素
                    
3、可见性过滤器
语法:  selector:过滤器
隐藏类型分2种:
a、不占据屏幕空间

    display:none;    //显示为none
<input type="hidden"> //隐藏input标签

b、占据屏幕空间

    visibility:hidden;    // 可见度为隐藏
opacity:0; //透明度为0

使用:    
        :visible    选择所有占据屏幕空间的元素
        :hidden        选择所有不占据屏幕空间的元素
        
4、属性过滤器
语法:  selector[属性过滤器]
selector[attr]        
    获取所有已选择到的元素中具有属性attr的元素
selector[attr=Val]    
    获取所有已选择到的元素中具有属性attr,并且属性值为Val的元素
selector[attr^=Val]    
    获取所有已选择到的元素中具有属性attr,并且属性值为以Val开头的元素
selector[attr$=Val]    
    获取所有已选择到的元素中具有属性attr,并且属性值为以Val结尾的元素
selector[attr*=Val]    
    获取所有已选择到的元素中具有属性attr,并且属性值中包含Val的元素
selector[attr!=Val]    
    获取所有已选择到的元素中具有属性attr,并且属性值不为Val的元素或者没有该属性attr的元素

5、后代过滤器
选择器一定要先选择到后代元素,是对选择到的后代元素的过滤
注意:
选择所有符合selector的后代中的相应元素【批处理】
空格是表示所有后代
>是表示所有子代

下面示例使用的是空格【可能存在多个层级关系】
selector :nth-child(n)    
    获取每个selector元素中所有后代且后代中作为别人的第n个孩子的元素
selector :first-child    
    获取每个selector元素中所有后代且后代中作为别人的第一个子元素【可能选择到一个或多个元素】
    注意与selector :first的区别,获取所有selector元素的所有后代元素中的第一个【只选择到一个元素】
selector :last-child        
    获取每个selector元素中所有后代且后代中作为别人的最后一个子元素【每个父元素的最后一个子元素】
selector :only-child        
    获取每个selector元素中所有后代且后代中作为别人的作为别人的父元素且只有一个子元素【每个父元素如果只有一个孩子元素,获取该元素】
selector :first-of-type    
    获取每个selector元素中所有后代且后代中作为别人的每种类型子元素中的第一个
Selector :last-of-type    
    获取每个selector元素中所有后代且后代中作为别人的每种类型子元素中的最后一个    
    
6、表单过滤器    【对选择的表单元素进行过滤】
:enabled    
    选取所有可用元素该选择器仅可用于选择支持disabled属性(attribute)的HTML    元素【<button>, <input>,<optgroup>,<option>,<select>,<textarea>】
:disabled    
    选取所有不可用的元素该选择器也是仅可用于支持disabled属性的HTML元素
:checked    
    选取所有被选中的元素,用于复选框和单选框、下拉框
:selected    
    选取所有被选中的选项元素,该选择器只适用于<option>
:focus    
    选择当前获取焦点的元素
:input    
    选取所有的<input>,<textarea>,<select>,<button>元素。
    注意:
    $(":input")是选择可以让用户输入的标签元素; 而$("input")是选择名字为input的所有标签元素
:text    
    选取所有的单行文本框(<input type="text">)
:password    
    选取所有的密码框
:radio    
    选取所有的单选框
:checkbox    
    选取所有的多选框        
:submit    
    选取所有的提交按钮【有提交功能的按钮】
:reset    
    选取所有input类型为reset的表单元素     
:image    
    选取所有input类型为image的表单元素       
:button    
    选取所有input类型为button的表单元素    
:file        
    选取所有input类型为file的表单元素

jQuery选择器与过滤器(二)的更多相关文章

  1. jQuery-强大的jQuery选择器、过滤器

    1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $(" ...

  2. WEB入门之十三 jQuery选择器

    学习内容 jQuery层次选择器 jQuery属性选择器 jQuery表单选择器 jQuery过滤选择器 能力目标 熟悉jQuery各种选择器的使用场合 能熟练使用jQuery各种选择器 本章简介 上 ...

  3. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  4. jQuery(二):jQuery选择器

    jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red" ...

  5. jQuery-1.9.1源码分析系列(二)jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

  6. 二、jquery选择器

    在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...

  7. jQuery学习之二 jQuery选择器

    一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制  传统js选择器假如要操作的元素不存 ...

  8. JQuery选择器&过滤器

    JQuery对象: JQuery对象的本质上是DOM数组,它对DOM元素进行了封装 JQuery对象和JavaScript对象可以互转(\$()/$obj()[i]),但是JQuery对象和Javas ...

  9. jQuery-1.9.1源码分析系列(二)jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

随机推荐

  1. actuator beans不展示

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  2. 201871010106-丁宣元 《2019面向对象程序设计(java)课程学习进度条》

    <2019面向对象程序设计(java)课程学习进度条> 周次 (阅读/编写)代码行数 发布博客量/评论他人博客数量 课余学习时间(小时) 学习收获最大的程序阅读或编程任务 1 25/10 ...

  3. wordpress调用指定类型post_type的文章

    wordpress很强大,可以添加多种post_type文章类型,假如我们要调用product产品模型的文章要如何操作呢?随ytkah一起来看看吧.我们用'post_type' => 'prod ...

  4. redisTemplate 键值序列化策略

    redisTemplate 键值序列化策略 RedisSerializer<T> StringRedisSerializer JdkSerializationRedisSerializer ...

  5. Resource Site

    GameDevMarket.net Collection of Music, Sound effects (sfx), 2D/3D/GUI Art. http://gaurav.munjal.us/U ...

  6. ReplaceGoogleCDN 真的好使

    在国内访问 stackoverflow快了很多. 谢谢开发者 https://github.com/justjavac/ReplaceGoogleCDN

  7. 几款不错的java表达式引擎

    mvel 比较老牌了,很强大,但是好久没更新了 参考地址: http://mvel.documentnode.com/ https://github.com/mvel/mvel ScriptEngin ...

  8. vb.net 读取 excel

    Dim myConn AsNew ADODB.Connection myConn.CursorLocation = ADODB.CursorLocationEnum.adUseClient '   用 ...

  9. spring cloud 服务链路追踪 skywalking 6.1

    随着微服务架构的流行,服务按照不同的维度进行拆分,一次请求往往需要涉及到多个服务.互联网应用构建在不同的软件模块集上,这些软件模块,有可能是由不同的团队开发.可能使用不同的编程语言来实现.有可能布在了 ...

  10. python jenkins api

    #!/usr/bin/pythonimport sys, timeimport shutil, commands#coding=utf-8 import sysreload(sys)sys.setde ...