• JQuery选择器总结


    JQery选择器写法简单,能够支持CSS1至CSS3选择器并且具有完善的处理机制。是我们常用的选择器。今天就JQuery选择器我们做简单的总结。

    JQuery选择器分类

    1、基本选择器

    2、层次选择器

    3、过滤选择器

      3.1、基本过滤选择器

      3.2、内容过滤选择器

      3.3、可见性过滤选择器

      3.4、属性过滤选择器

      3.5、子元素过滤选择器

      3.6、表单对象属性过滤选择器

    4、表单选择器

    JQuery选择器详解

    1、JQuery基本选择器

    选择器 相关描述 返回 选择器示例
    #id  根据指定的id匹配元素 单个元素 $("#main")选择id=main的元素
    .class 根据类匹配元素 集合元素 $(".main")选择class=main的元素
    * 匹配所有元素 集合元素 $("*")选择所有的元素
    Element 根据元素名匹配元素 集合元素 $("div")选择所有的div元素
    E1,E2,E3 分组匹配元素 集合元素 $("div,span,.old)选择所有的idv.span,class=old的元素

    应该注意的是:

          $("E1+E2")可以用$(E1).next(E2)代替

          $("E1~E2")可以用$(E1).nextAll(E2)代替

    2、Jquery层次选择器

     选择器 描述  返回值 选择器用例
     $("E1 E2")  选择E1下所有的E2  集合元素  $("div span")选择div下面的所有span元素
      $("E1>E2")  选择E1下的子E2,不包含E2下满足的元素  集合元素

     $("div>span")选择div下面的span元素,不包含span中的span元素

      $("E1+E2")  选择E1后紧相邻的E2  集合元素  $(".one+div")选择class=one的下一个div元素
      $("E1~E2")  选择E1之后的所有E2  集合元素  $("#one~div")选择id为one后的所有div元素

    3、JQuery过滤选择器

    过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素,过滤规则与css中的伪类选择器语法相同,即过滤选择器都是以冒号(:)开头

    3.1、基本过滤选择器

    选择器 描述 返回值 选择器用例
    :first  选择第一个元素  单个元素 $("div:first”)选择第一个div元素
    :last 选择最后一个元素 单个元素 $("div:last”)选择最后一个div元素
    :not(E1) 去除所有E1选择器匹配的元素 集合元素 $("div:not(.my)")选择所有的class不是my的div元素
    :even 选择所有索引号为偶数的元素,索引从0开始  集合元素 $("tr:even")选择表格中所有的偶数行
    :odd 选择所有索引为奇数的元素,索引从0开始 集合元素 $("tr:odd")选择表格中所有的奇数行
    :eq(index) 选择索引值为Index的元素,Index从0开始 单个元素 $("tr:eq(1)")选择所有索引值为1的行
    :gt(index) 选择所有索引值大于index的元素,index从0开始 集合元素 $("tr:gt(1)")选择所有索引值大于1的行
    :lt(index) 选择所有索引值小于index的元素,index从0开始 集合元素 $("tr:lt(1)")选择所有索引值小于1的行
    :header 所取所有标题元素 h1-h6 集合元素 $(".header")选择网页中所有的<h1><h2>
    :animated 选择当前正在执行动画的元素 集合元素 $("div:animated") 选择正在执行动画的div元素

     3.2、JQuery内容过滤选择器

    选择器 描述 返回值 选择器用例
    :contains(text) 选择包含text文本内容的元素 集合元素 $(“div:contain('好')”)选择内容包含好的所有div
    :empty  选择不包含元素或者文本的空元素 集合元素 $("div:empty")选择不包含子元素的所有div元素
    :has(E1) 选择包含有(E1选择器匹配到的元素)的所有元素   集合元素 $("div:has(p)")选择含有P元素的所有div元素
    :parent 选择含有子元素或者文本的元素 集合元素 $("div:parent")选择用于子元素的所有div元素

     3.3、可见性过滤选择器

    选择器 描述 返回值 选择器用例
    :hidden 选择所有不可见元素 集合元素

    $(“.hidden”)选择所有不可见元素

    包括:<input type="hidden"/>

    <div style="display:none">

    <div style="visibility:hidden">

    :visibke 选择所有可见元素 集合元素 $("div:visible")选择所有的div元素
  • 相关阅读:
    2017-2018-1 20155232 嵌入式C语言——时钟
    实践——ELF文件格式分析
    实践——程序破解
    实践——模块
    《Linux内核分析》期终总结
    《Linux内核分析》第八周:进程的切换和系统的一般执行过程
    《Linux内核设计与实现》读书笔记六
    《深入理解计算机系统》读书笔记五
    《Linux内核分析》第七周: 可执行程序的装载
    《Linux内核设计与实现》读书笔记四
  • 原文地址:https://www.cnblogs.com/chongzixing/p/9276622.html
Copyright © 2020-2023  润新知