当前位置:网络安全 > jQuery 系列:选择器

jQuery 系列:选择器

  • 发布:2023-10-07 11:43

-->

  jQuery 选择器通过标签名称、属性名称或内容选择 DOM 元素,无需担心浏览器兼容性。

1。基本选择器

  基本选择器是 jQuery 中最常用的选择器。它由元素 ID、类、元素名称和多个选择器组成。大多数页面元素都可以通过基本选择器找到。

选择器 功能 返回值 示例
* 匹配所有元素 元素集合 $("*")
#id 根据指定的ID匹配元素。该示例选择 id="loading" 的元素 单个元件 $("#loading")
.class 元素集合 $(".readonly")
.class.class 元素集合 $(".www.sychzs.cned")
元素 根据指定元素名称匹配所有元素 元素集合 $("div")
选择器1,选择器2,...选择器N 将每个选择匹配的元素组合在一起并返回 元素集合 $("div,span")

  示例:


  • 选项 1

  • 选项2
  • 选项 3

  • 选项 4

  • 选项 5

  • 2。电平选择器

      层次选择器通过DOM元素之间的层次关系来获取元素。主要的层次关系包括后代、父子、相邻、兄弟关系等,通过它们之间的关系来定位元素。

    选择器 功能 返回值 示例
    祖先后代 匹配基于祖先元素的所有后代元素 元素集合
    数组
    $("表单输入")
    父 > 子 匹配给定父元素下的所有子元素 元素集合 $("表单 > 输入")
    上一页 + 下一页 匹配紧随上一个元素之后的所有下一个元素 元素集合 $(“标签+输入”)
    prev ~ 兄弟姐妹 匹配上一个元素之后的所有同级元素 元素集合 $("表格~输入")
    下一个([expr]) 选择一个元素集,其中包含匹配元素集中每个元素的紧随其后的同级元素。 元素集合 $("#first-item").next()
    $("#first-item").next(".selected")
    nextAll([expr]) 查找当前元素之后的所有兄弟元素。 元素集合 $("#first-item").nextAll()
    $("#first-item").nextAll(".selected")
    nextUntil([expr | 元素][,过滤器]) 搜索当前元素之后的所有兄弟元素,直到遇到匹配的元素。 元素集合 $("#first-item").nextUntil(".selected")
    prev([expr]) 选择一组元素,其中包含匹配元素集中每个元素的前一个同级元素。 元素集合 $("#last-item").prev()
    $("#last-item").prev(".selected")
    prevAll([expr]) 查找当前元素之前的所有兄弟元素 元素集合 $("#last-item").prevAll()
    $("#last-item").prevAll(".selected")
    prevUntil([expr | 元素][,过滤器]) 查找当前元素之前的所有兄弟元素,直到遇到匹配元素。 元素集合 $("#last-item").prevUntil(".selected")
    兄弟姐妹([expr]) 选择一组元素,其中包含匹配元素集中每个元素的所有唯一同级元素。 元素集合 $("#third-item").siblings()
    $("#third-item").siblings(".selected")

      示例:祖先后代








    $("表单输入")

      结果:

    [,]

      示例:父 > 子








    $("表单 > 输入")

      结果:

    []

      示例:下一个([expr])


    • 选项 1

    • 选项 2

    • 选项 3

    • 选项 4

    • 选项 5


    • 选项 1

    • 选项2
    • 选项 3

    • 选项 4

    • 选项 5


    • 选项 1

    • 选项 2

    • 选项3
    • 选项 4

    • 选项 5

      示例:nextAll([expr])


    • 选项 1

    • 选项 2

    • 选项3
      选项4
    • 选项 5

    $("#first-item").nextAll(".selected").css("背景颜色", "#F5F5F5");

      示例:nextUntil([expr | elelment][,filter])


    • 选项 1

    • 选项 2

    • 选项 3

    • 选项4
    • 选项 5

    $("#first-item").nextUntil(".selected").css("背景颜色", "#F5F5F5");

      示例:兄弟姐妹([expr])


    • 选项 1

    • 选项 2

    • 选项3

    • 选项 4

    • 选项 5

    $("#third-item").siblings().css("背景颜色", "#F5F5F5");


      选项1
    • 选项 2

    • 选项3

    • 选项4
    • 选项 5

    $("#third-item").siblings(".selected").css("背景颜色", "#F5F5F5");

    3。索引过滤器选择器

      过滤器选择器 某些类型的过滤规则匹配元素。它们在书写时总是以冒号 (:) 开头。

    选择器 功能 返回值 示例
    first() 或:first 选择第一个元素 单个元件 $("li").first()
    $("李:第一")
    last() 或:last 选择最后一个元素 单个元件 $("li").last()
    $("li:最后")
    :非(选择器) 删除与给定选择器匹配的所有元素 元素集合 $("li:not(.selected)")
    $(“输入:未(:检查)”)
    :均匀 选择索引值为偶数的所有元素,从 0 开始。 元素集合 $("li:偶数")
    :奇数 选择所有具有奇数索引值的元素,从 0 开始。 元素集合 $("li:奇数")
    :eq(索引) 选择指定索引值的元素,索引号从0开始。 单个元件 $("li:eq(1)")
    :gt(索引) 选择所有大于指定索引值的元素,索引号从0开始。 元素集合 $("li:gt(3)")
    :lt(索引) 选择所有小于指定索引值的元素,索引号从0开始。 元素集合 $("li:lt(3)")
    :标题 选择所有标题类型元素,例如:h1、h2、... 元素集合 $(":标题")
    :动画 选择所有正在执行动画效果的元素 元素集合 $(":动画")

      示例::not(选择器)


      选项1
    • 选项 2

    • 选项 3

    • 选项4
    • 选项 5

    $("li:not(.selected)").css("背景颜色", "#F5F5F5");

    4。内容过滤器选择器

      内容过滤选择器根据元素的文本内容或其包含的子元素的特征来获取元素。文本内容可以是模糊的,也可以是绝对匹配的元素定位。

    选择器 功能 返回值 示例
    :包含(文本) 获取包含指定文本的元素 元素集合 $("div:包含('A')")
    :空 获取所有不包含子元素或文本的空元素 元素集合 $("td:空")
    :有(选择器) 获取选择器匹配的元素 元素集合 $("div:has(span)")
    :父母 匹配包含子元素或文本的元素 元素集合 $("td:parent")

    5。可见性过滤器选择器

    选择器 功能 返回值 示例
    :隐藏 获取所有不可见元素,或 type="hidden" 的元素 元素集合$("tr:隐藏")
    :可见 获取所有可见元素 元素集合 $("tr:可见")

    6。属性过滤器选择器

      属性过滤器选择器根据元素的某个属性来获取元素。

    选择器 功能 返回值 示例
    [属性] 选择包含指定属性的元素 元素集合 $("div[id]")
    [属性=值] 选择指定属性等于特定值的元素 元素集合 $("输入[类型='文本']")
    [属性!=值] 选择指定属性不等于特定值的元素 元素集合 $("输入[类型!='文本']")
    [属性^=值] 选择指定属性以特定值开头的元素 元素集合 $("div[标题^='A']")
    [属性$=值] 选择指定属性以特定值结尾的元素 元素集合 $("div[title$='A']")
    $("a[href$='.jpg']")
    [属性*=值] 选择指定属性包含特定值的元素 元素集合$("div[标题*='A']")
    [选择器1][选择器2][选择器N] 选择满足多个条件的复合属性元素 元素集合 $("输入[id][类型='输入']")

    7。子元素过滤器选择器

    选择器 功能 返回值 示例
    :第 n 个子级(eq|偶数|奇数|索引) 获取每个元素下的具体位置元素,索引号从1开始。 元素集合 $("#container li:nth-child(2)")
    $("li:第n个孩子(偶数)")
    $("li:第n个孩子(奇数)")
    $("li:第n个孩子(3n)")
    $("li:第n个孩子(3n+1)")
    $("li:第n个孩子(3n+2)")
    :第 n 个最后一个子节点(eq|偶数|奇数|索引) 获取每个元素下特定位置的元素,从最后一个元素开始算到第一个元素。 元素集合 $("#container li:nth-last-child(2)")
    $("li:第n个最后一个孩子(偶数)")
    $("li:第n个最后一个孩子(奇数)")
    $("li:第n个最后一个孩子(3n)")
    $("li:第n个最后一个孩子(3n+1)")
    $("li:第n个最后一个孩子(3n+2)")
    :第一个孩子 获取每个父元素下的第一个子元素 元素集合 $("li:第一个孩子")
    :最后一个孩子 获取每个父元素下的最后一个子元素 元素集合 $("li:最后一个孩子")
    :独生子女 每个父元素下只获取一个子元素 元素集合 $("li:独生子女")

    8。表单对象属性过滤选择器

      表单对象属性选择器通过表单对象属性特征来选择该类型的元素。

    选择器 功能 返回值 示例
    :启用 选择表单中具有可用属性的所有元素 元素集合 $("输入:启用")
    :禁用 选择表单中所有属性不可用的元素 元素集合 $("输入:禁用")
    :已勾选 选择表单中所有选定的元素 元素集合 $("输入:已选中")
    :已选择 选择表单中具有选定选项的所有元素 元素集合 $("选择选项:已选择")

      示例::已选择

    $("选择选项:已选择").text();

    9。表单选择器

    -->

    相关文章

    选择器 功能 返回值 示例
    :输入 选择所有输入、文本区域,选择 元素集合 $(":输入")
    :文字 选择所有类型为“text”的输入元素 元素集合 $(":文本")
    :密码 选择所有类型为“password”的输入元素 元素集合 $(":密码")
    :收音机 选择所有类型为“radio”的输入元素 元素集合 $(":收音机")
    :复选框 选择所有类型为“checkbox”的输入元素 元素集合 $(":复选框")
    :提交 选择所有类型为“submit”的输入元素 元素集合 $(":提交")
    :图像选择所有类型为“image”的输入元素 元素集合 $(":图片")
    :重置 选择所有类型为“reset”的输入元素 元素集合 $(":重置")
    :按钮 选择所有类型为“button”的输入元素 元素集合 $(":按钮")
    :文件 选择所有类型为“file”的输入元素 元素集合 $(":文件")