jQuery选择器(满足你的所有业务)

简介: jQuery选择器(满足你的所有业务)
+关注继续查看

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。


jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。


jQuery 中所有选择器都以美元符号开头:$()。


使用jquery请先引入

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 


元素选择器


$(this)      //当前 HTML 元素
$("p")    //选取 <p> 元素。
$("p#demo")  //选取所有 id="demo" 的 <p> 元素。
$("p.intro") //选取所有 class="intro" 的 <p> 元素。
$("ul li:first")   //选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")//选取每个 <ul> 元素的第一个 <li> 元素
$("div#intro .head")  //id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("*")       //所有元素


类别选择器


$(".intro")      //所有 class="intro" 的元素
$(".intro.demo")   //所有 class="intro" 且 class="demo" 的元素,中间见了空格就是层级


ID选择器


$("#intro")   //id="intro" 的元素


后代选择器


$("p span")   //选取<p>元素里的所有的<span>元素(注:后代选择器选择父元素所有指定选择的元素,不管是儿子级,还是孙子级)


子选择器


$("p>span")    //选择<p>元素下的所有<span>元素 (注:子选择器只选择直属于父元素的子元素)


同辈选择器

$(".intro+p")   //选取class为intro的下一个<p>同辈元素集合
$("#demo~p")  //选取id为demo的元素后所有<p>同辈元素集合


属性选择器(返回元素集合)


$("[href]")     //选取所有带有 href 属性的元素。
$("[href='#']")    //选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']")    //选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']")     //选取所有 href 值以 ".jpg" 结尾的元素。
$("p[id]")      //选取拥有id属性的p元素
$("input[name=text]")   //选取拥有name属性等于text的input元素
$("input[name!=text]")      //选取拥有name属性不等于text的input元素
$("input[name^=text]")      //选取拥有name属性以text开始的input元素
$("input[name$=text]")      //选取拥有name属性以text结束的input元素
$("input[name*=text]")      //选取拥有name属性含有text的input元素
$("input[class~=text]")  //选取拥有class属性以空格分割的值中含有text的input元素
[attribute1][attribute2][attributeN]  //合并多个属性过滤选择器


CSS选择器


$("p").css("background-color","red");  //把所有 p 元素的背景颜色更改为红色:


基本过滤选择器


$("p:first")    //选取所有<p>元素中第一个<p>元素
$("p:last")    //选取所有<p>元素中最后一个<p>元素
$("input:not(.myClass)")//选取class不是myClass的<input>元素
:even      //选取索引是偶数的所有元素,索引从0开始,返回元素集合
:odd      //选取索引是奇数的所有元素,索引从0开始,返回元素集合
:eq(index)      //选取索引等于index的元素,索引从0开始,返回单个元素
:gt(index)      //选取索引大于index的元素,索引从0开始,返回元素集合
:lt(index)    //选取索引小于于index的元素,索引从0开始,返回元素集合
:focus      //选取当前获取焦点的元素
$("tr:even")    //选取偶数位置的 <tr> 元素
$("tr:odd")    //选取奇数位置的 <tr> 元素


内容过滤选择器


$("p:contains('我')")  //选取含有文本“我”的元素
$("p:empty")    //选取不包含子元素或者文本元素的空<p>元素
$("p:has(p)")    //选取含有<p>元素的<p>元素
$("p:parent")    //选取含有子元素或者文本元素的<p>元素


可见性过滤选择器


:hidden    //选取所有不可见的元素,返回元素集合
:visible  //选取所有可见的元素,返回元素集合


表单对象属性过滤选择器(返回元素集合)


:enabled    //选取所有可用元素
:disabled   //选取所有不可用元素
:checked    //选取所有被选中的元素(单选框,复选框)
$("input:checked")  //选取所有被选中的<input>元素
:selected   //选取所有被选中的选项元素(下拉列表)
$("select option:selected") //选取所有被选中的选项元素
:read-only    //用于匹配设置 "readonly"(只读) 属性的元素


表单选择器(返回元素集合)


$(":text")  //选取所有的单行文本框
:password  //选择所有的密码框
:button  //选取所有 type="button" 的 <input> 元素 和 <button> 元素
:checkbox   //选择所有的多选框
相关文章
|
7天前
|
JavaScript
jQuery 基本过滤选择器
jQuery 基本过滤选择器
6 0
|
7天前
|
JavaScript
jQuery 筛选选择器
jQuery 筛选选择器
8 0
|
7天前
|
存储 JavaScript 前端开发
JQuery(入门~选择器)
JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。
|
9天前
|
JavaScript 数据可视化 前端开发
JQuery选择器大全
JQuery选择器大全
15 0
|
26天前
|
JavaScript 前端开发 数据可视化
jQuery选择器
jQuery选择器
52 0
jQuery选择器
|
27天前
|
设计模式 JavaScript 前端开发
jQuery的概述和选择器的使用
jQuery的概述和选择器的使用
16 0
|
2月前
|
JavaScript 数据安全/隐私保护 索引
jQuery选择器
jQuery选择器
20 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery 选择器全部详细笔记
jQuery 选择器全部详细笔记
27 0
|
2月前
|
JavaScript 前端开发 索引
JQuery全部过滤选择器详细介绍上
JQuery全部过滤选择器详细介绍上
27 0
|
2月前
|
JavaScript 索引 AI芯片
JQuery全部过滤选择器详细介绍下
JQuery全部过滤选择器详细介绍下
30 0