jQuery选择器(满足你的所有业务)
jQuery 所有 业务 选择器 满足
2023-06-13 09:17:01 时间
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 //选择所有的多选框
相关文章
- jwplayer html插件,jQuery插件JWPlayer视频播放器用法实例分析
- jquery选择器用法_jQuery属性选择器
- Js/JQuery将数字金额转换为其他国家货币格式(包括货币符号和千分符)
- jQuery添加dom节点的方法
- jQuery 自动补全详解编程语言
- 替换掉所有图片失效链接的jQuery代码片段详解编程语言
- jquery禁用右键单击、F5刷新详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jQuery $.get()方法的用法
- jQuery $.makeArray()方法的用法
- JQuery初体验(建议学习jquery)
- Jquery实战_读书笔记1—选择jQuery
- Jquery知识点三jquery表单对象操作
- 推荐10个超棒的jQuery工具提示插件
- JQuery选择器特辑详细小结
- Jquery插件写法笔记整理
- 事件冒泡是什么如何用jquery阻止事件冒泡
- input输入框获得/失去焦点时隐藏/显示文字(jquery版)
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- 让input框实现类似百度的搜索提示(基于jquery事件监听)
- jquery获取tr并更改tr内容示例代码
- Jquery遍历checkbox获取选中项value值的方法
- jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
- jQuery知识点整理
- jQuery如何获取同一个类标签的所有值(默认无法获取)