jQuery常见的选择器操作运算符

简介: >表示直接子元素表示("parent > child") 选择器选取指定元素的直接子元素的所有元素。$("div > p") 元素的直接子元素的所有 元素+表示相邻的元素$("div + p") 每个 元素相邻的下一个 元...

>表示直接子元素

表示("parent > child") 选择器选取指定元素的直接子元素的所有元素。

$("div > p") <div> 元素的直接子元素的所有 <p> 元素

+表示相邻的元素

$("div + p")    每个 <div> 元素相邻的下一个 <p> 元素

~ 表示同级的元素

$("div ~ p")    <div> 元素同级的所有 <p> 元素

:表示集合过滤的元素

$("ul li:lt(3)")    列举 index 小于 3 的元素
$("ul li:gt(3)")    列举 index 大于 3 的元素
$("ul li:eq(3)")    列表中的第四个元素(index 值从 0 开始)
$(":input") 所有 input 元素
$(":text")  所有带有 type="text" 的 input 元素

=表示属性值等于的元素

$("[href='default.htm']")   所有带有 href 属性且值等于 "default.htm" 的元素

^=表示属性且值以指定单词的元素 开头的元素

$("[title^='Tom']") 所有带有 title 属性且值以 "Tom" 开头的元素

~=表示属性且值包含指定单词的元素

$("[title~='hello']")   所有带有 title 属性且值包含单词 "hello" 的元素

*=表示属性且值包含指定字符串的元素。

$("[title*='hello']")   所有带有 title 属性且值包含字符串 "hello" 的元素

[]表示属性容器

$("[href]") 所有带有 href 属性的元素
$("[href='default.htm']")   所有带有 href 属性且值等于 "default.htm" 的元素

$=表示属性值以指定字符结尾的元素

$("[href$='.jpg']") 所有带有 href 属性且值以 ".jpg" 结尾的元素

!=表示表示属性值不等于的元素

$("[href!='default.htm']")  所有带有 href 属性且值不等于 "default.htm" 的元素

*表示所有元素

$("*")  所有元素

,表示多个元素

$(".intro,.demo")   class 为 "intro" 或 "demo" 的所有元素
$("h1,div,p")   所有 <h1>、<div> 和 <p> 元素
目录
相关文章
|
1月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
30 2
|
2月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
40 5
|
27天前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
5月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
34 0
|
5月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
6月前
|
缓存 JavaScript
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
JavaScript
jQuery 选择器
jQuery 选择器
24 3
|
2月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
29 1
|
3月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
35 1