jQuery 选择器有几种,分别是什么

简介: jQuery 选择器有几种,分别是什么

jQuery选择器是用于“选择”(或查找)HTML元素的强大工具。jQuery选择器基于元素的名称、ID、类、类型、属性等进行选择。以下是jQuery选择器的几种主要类型,以及它们的详细代码示例:

  1. 基本选择器
  • 元素选择器:选择HTML元素。
$("p") // 选择所有的 <p> 元素
  • ID选择器:选择具有特定ID的元素。
$("#myId") // 选择ID为 "myId" 的元素
  • 类选择器:选择具有特定类的元素。
$(".myClass") // 选择所有class为 "myClass" 的元素
  • 通配符选择器:选择所有元素。
$("*") // 选择所有元素
  1. 层次选择器
  • 后代选择器:选择某个元素内部的所有后代元素。
$("div p") // 选择 <div> 元素内部的所有 <p> 元素
  • 子元素选择器:选择某个元素的直接子元素。
$("div > p") // 选择 <div> 元素的直接 <p> 子元素
  • 相邻兄弟选择器:选择紧接在另一个元素后的元素,且二者有相同的父元素。
$("div + p") // 选择紧接在 <div> 元素后的 <p> 元素
  • 一般兄弟选择器:选择某个元素之后的所有同辈元素。
$("div &#126; p") // 选择 <div> 元素之后的所有 <p> 同辈元素
  1. 过滤选择器
  • 首元素选择器:选择第一个元素。
$("p:first") // 选择第一个 <p> 元素
  • 末元素选择器:选择最后一个元素。
$("p:last") // 选择最后一个 <p> 元素
  • 索引选择器:选择指定索引位置的元素。
$("p:eq(1)") // 选择索引为1的 <p> 元素(索引从0开始)
  • 偶数/奇数选择器:选择索引为偶数的元素或索引为奇数的元素。
$("p:even") // 选择所有索引为偶数的 <p> 元素
$("p:odd") // 选择所有索引为奇数的 <p> 元素
  • 头部选择器:选择第一个元素。
$("p:header") // 选择所有作为标题的 <p> 元素(如 <p><h1>标题</h1></p>)
  • 动画选择器:选择当前正在执行动画的所有元素。
$("p:animated") // 选择当前正在执行动画的 <p> 元素
  1. 属性选择器
  • 属性选择器:选择带有指定属性的元素。
$("p[target]") // 选择所有带有 target 属性的 <p> 元素
  • 属性值选择器:选择带有指定属性和值的元素。
$("p[target='_blank']") // 选择所有 target 属性值为 '_blank' 的 <p> 元素
  • 属性值开头/结尾/包含选择器:选择属性值以特定字符串开头、结尾或包含特定字符串的元素。
$("p[href^='https']") // 选择 href 属性值以 'https' 开头的 <p> 元素
$("p[href$='.jpg']") // 选择 href 属性值以 '.jpg' 结尾的 <p> 元素
$("p[href*='keyword']") // 选择 href 属性值包含 'keyword' 的 <p> 元素

以上只是jQuery选择器的一部分,实际上还有更多高级和复杂的选择器可用。这些选择器可以帮助你更精确地选择和操作HTML文档中的元素。

相关文章
N..
|
1月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
20 1
|
1月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
35 2
|
1月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
42 5
|
30天前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
30天前
|
JSON JavaScript 前端开发
Jquery常用的选择器有哪些?用途有什么不同?
Jquery常用的选择器有哪些?用途有什么不同?
|
1月前
|
JavaScript 前端开发 开发者
jquery选择器有哪些
jquery选择器有哪些
12 0
|
1月前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
1月前
|
Web App开发 JavaScript 前端开发
JQuery的选择器有哪些?
JQuery的选择器有哪些?
14 1
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
15 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
10 1