zoukankan      html  css  js  c++  java
  • Jquery 之 使用选择器

    jQuery选择器描述

    jQuery选择器是jQuery框架的基础,jQuery对事件的处理、DOM操作、CSS动态控制、Ajax通信、动画设计都是在选择器基础上进行的。jQuery 选择器采用CSS和Xpath选择符的能力,能够满足用户在DOM中快捷而轻松地获取元素或元素组。

    jQuery选择器的种类

    基本选择器

    层级选择器

    伪类选择器(简单的伪类选择器、与内容相关的伪类选择器、与元素显示状态相关的伪类选择器、匹配子元素的伪类选择器、与表单对象相关的伪类选择器、与表单属性相关的伪类选择器)

    属性选择器

    (1)基本选择器

    基本选择器主要包括ID选择器、标签选择器、类选择器、通配选择器和组选择器 5种类型,这与CSS基本选择器类型相一致。

    这里主要说一下通配选择器和组选择器

    通配选择器能够匹配指定上下文中所有元素。具体用法如下:jQuery("*"); 参数* 为字符串,表示将匹配指定范围内所有的标签元素。

    示例:

    将匹配文档中<body>标签下包含的所有标签,然后定义所有标签包含的字体显示为红色。

    $(function(){

      $("body *").css("color","red");

    })

    组选择器

    jQuery支持CSS的分组选择器,通过这种方式可以扩大选择器的选择范围,同时增强jQuery选择器引擎的应用能力。具体用法如下:jQuery("selector1,selector2,selectorN");

    示例:

    $(function(){

      $("h2,#wrap,span.red,[title='text']").css("color","red");

    })

    (2)层级选择器

    层级选择器就是通过DOM嵌套关系结构来实现准确匹配,如果通过DOM元素之间的层次关系来获取特定的元素,那么使用层级选择器将是最佳方式。

    层级选择器主要包括 包含选择器、子选择器、相邻选择器和兄弟选择器 4种类型。

    包含选择器,就是在给定的祖先元素下匹配所有的后代元素。

    示例:$("form input") 可以匹配表单下所有的input元素

    子选择器,就是在匹配的父元素下选择所有匹配的子元素。具体用法如下:jQuery("parent>child");

    示例:$("form>input")可以匹配表单下所有的子集input元素

    相邻选择器,就是在所有匹配的元素后选择同级的相邻元素。具体用法如下:jQuery("prev + next");

    示例:$("label + input") 可以匹配所有跟在label后面的input元素

    兄弟选择器,就是在所有匹配的元素后选择同级的所有元素。具体用法如下:jQuery("prev ~ siblings");

    示例:$("form ~ siblings")可以匹配所有与表单同级结构的input 元素

    (3)简单的伪类选择器

    伪类可以看作是一种特殊的类选择符,是能被浏览器自动识别的特殊选择符。伪类选择器的最大语法特征就是在选择符中添加“:”标识符。

    特定位置选择器:主要包括 :first 、 :last 和 :eq(index) 3种

    :first  匹配找到的第1个元素。  例如:$("tr:first") 表示匹配表格的第1行

    :last  匹配找到的最后一个元素。 例如: $("tr:last") 表示匹配表格的最后一行

    :eq    匹配一个给定索引的元素,从0开始计数。 例如: $("tr:eq(0)")  可以匹配第1行表格行

    指定范围选择器:主要包括 :even 、:odd 、:gt(index) 、 :lt(index) 4种。

    :even  匹配所有索引值为偶数的元素,从0开始计数。 例如: $("tr:even")可以匹配表格的1,3,5行(即 索引值 0、2、4 ...)

    :odd  匹配所有索引值为奇数的元素,从0开始计数。   例如: $("tr:odd")可以匹配表格的 2,4,6行(即 索引值 1、3、5 ...)

    :gt    匹配所有大于给定索引值的元素,从0开始技术。  例如: $("tr:gt(0)") 可以匹配第2行及其后面行

    :lt     匹配所有小于给定索引值的元素。      例如: $("tr:lt(5)")  可以匹配第5行以及之前的行

    排除选择器  :not 选择器比较特殊,它能够在匹配元素集合中排除符合特定匹配规则的元素,也就是说它以反向方式过滤掉不需要的元素。

    具体用法如下:jQuery("selector1:not(selector2)");

    $("tr:not(tr:lt(3))")  匹配的数据行为 第4行和后面的所有行。

    特殊选择器 :animated 和 :header 选择器是两个比较特殊的选择器,它们分别用来匹配动画元素和标题元素。

    :header 匹配如  h1、h2、h3 之类的标题元素

    :animated 匹配所有正在执行动画效果的元素

    (4)与内容相关的伪类选择器

    主要是根据元素包含内容作为筛选条件进行匹配,这类选择器主要包括4种,如下:

    :contains  匹配包含给定文本的元素。  例如: $("div:contains('图片')")  匹配所有包含“图片”的div元素

    :empty  匹配所有不包含子元素或者文本的空元素

    :has    匹配含有选择器所匹配的元素的元素。  例如: $("div:has(p)")  匹配所有包含p元素的div元素

    :parent  匹配含有子元素或者文本的元素

    (5)与元素显示状态相关的伪类选择器

    :hidden   匹配所有不可见元素,或者type 为hidden的元素

    :visible    匹配所有的可见元素

    (6)匹配子元素的伪类选择器

    子元素选择器主要包括 4 种类型:

    :nth-child  匹配其父元素下的第N个子或奇偶元素

    :first-child 匹配第一个子元素。   (:first 选择器只匹配一个元素,而:first-child 选择符将为每个父元素匹配一个子元素)

    :last-child 匹配最后一个子元素。   (:last 只匹配一个元素,而:last-child 选择符将为每个父元素匹配一个子元素)

    :only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配;如果父元素中含有其他元素,那将不会被匹配。

    使用表达式的方式:

    :nth-child(even)  //匹配偶数位元素

    :nth-child(odd)   //匹配奇数位元素

    :nth-child(3n)     //匹配第3个及其后面间隔3的每个元素

    :nth-child(2)       //匹配第2个元素

    :nth-child(3n+1) //匹配第一个及其后面间隔3的每个元素

    :nth-child(3n+2) //匹配第二个及其后面间隔3的每个元素

    (7)与表单对象相关的伪类选择器

    :input  匹配所有input、textarea、select和button元素

    :text    匹配所有的单行文本框

    :password 匹配所有密码框

    :radio   匹配所有单选按钮

    :checkbox  匹配所有复选框

    :submit   匹配所有提交按钮

    :image   匹配所有图像域

    :reset     匹配所有重置按钮

    :button   匹配所有按钮

    :file        匹配所有文件域

    :hidden  匹配不可见元素或者type为hidden的元素

    (8)与表单属性相关的伪类选择器

    :enabled   匹配所有可用元素

    :disabled   匹配所有不可用元素

    :checked   匹配所有选中的被选中元素(复选框、单选按钮等,不包括 select 中的option)

    :selected   匹配所有选中的option 元素

    (9)属性选择器

    就是根据元素的属性及其值作为过滤条件,来匹配对应的DOM元素。

    [attribute]

    [attribute=value] 匹配属性等于特定值的元素

    例如:   $("input[name='text']") 表示查找所有name属性值是text的input 元素

    [attribute!=value]匹配属性不是特定值的元素

    例如:   $("input[name!='text']") 表示查找所有name属性值不是text的input 元素

    [attribute^=value] 匹配给定的属性是以某些值开始的元素

    例如:   $("input[name^='text']") 表示所有name属性值以text开头的input元素

    [attribute$=value] 匹配给定的属性是以某些值结尾的元素

    例如:   $("input[name$='text']") 表示所有name属性值以text结束的input 元素

    [attribute*=value] 匹配给定的属性是以包含某些值的元素

    例如:   $("input[name*='text']") 表示所有name属性值包含text字符串的input 元素

    jQuery 选择器应用优化

    (1)多用ID选择器

    (2)少直接使用Class 选择器

    (3)多用父子关系,少用嵌套关系

    (4)缓存jQuery对象

     完

  • 相关阅读:
    Spring 整合 Redis
    Spring 整合 Redis
    C#,Java,MD5加密对等实现
    Java调用JavaWebService
    c#,Java aes加密
    Kettle环境变量配置
    Maven环境配置
    Win10,JDK8,tomact7.0.85配置
    ReverseEngineerCodeFirst 自定义模板
    Aspnet_Session
  • 原文地址:https://www.cnblogs.com/ck168/p/5517290.html
Copyright © 2011-2022 走看看