JavaScript 学习-43.jQuery 选择器
JavaScript 学习-43.jQuery 选择器
前言
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 选择器
jQuery 中所有选择器都以美元符号开头：$()
常用的一些选择器总结
语法 | 描述 |
|---|---|
$(this) | 选取当前 HTML 元素 |
$("*") | 选取所有元素 |
$("p") | 匹配 <p> 标签元素 |
$("#kw") | 匹配属性 id="kw" 的元素 |
$(".info") | 选取 class 属性为 info 的元素 |
$("p.intro") | 选取 class 为 intro 的 <p>元素 |
$("p:first") | 选取第一个<p> 元素 |
$("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$(“ul li:last”) | 选取每个 <ul> 元素的最后一个 <li> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$("a[target='_blank']") | 选取所有 target 属性值等于 “_blank” 的 <a> 元素 |
$("a[target!='_blank']") | 选取所有 target 属性值不等于 “_blank” 的<a> 元素 |
$(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
$("tr:even") | 选取偶数位置的 <tr> 元素 |
$("tr:odd") | 选取奇数位置的<tr> 元素 |
$('[name^="value"]') | 匹配 name 以 value 开头的元素 |
$('[name$="end"]') | 匹配 name 以 end 结尾的元素 |
$('[class*="text"]') | 匹配class属性包含text的元素 |
$('#demo>p') | 子代选择器,通过父元素找子元素 |
$('#demo p') | 后代选择器,通过父元素找子孙元素 |
$('#p1+div') | 兄弟相邻选择器,通过定位当前元素，找到同一层级的下一个兄弟元素 |
$('#p1~div') | 同辈选择器，,通过定位当前元素，找到同一层级的该元素后面的全部兄弟元素 |
$('p, div') | p标签和div标签元素 |
基础选择器
jQuery 查找元素语法，主要是基于css 选择器
- 根据标签匹配，不用加符号，直接是标签名称，如：
pdivinput等 - 根据id属性匹配，前面加
#号，如：#kw - 根据class 属性匹配。前面加点，如：
.info - 根据其它属性定位，加中括号，如：
[name="user"]
上面基本属性可以任意组合如：p.info div#kw [name="user"]
示例
<div id="demo">
<p class="text-info">hello world</p>
<form>
<p id="p1" class="text-info">用户登录</p>
<div>
<label for="user">用户名</label>
<input id="user" type="text" name="username" placeholder="请输入">
</div>
<div>
<input type="submit" value="提交按钮">
</div>
</form>
</div>jquery 查找元素示例
var p1 = $('p'); // 查找p标签元素
console.log(p1);
var p2 = $('.text-info'); // 查找class="text-info"
console.log(p2);
var d1 = $('#demo'); // 查找 id="demo"
console.log(d1);
var b = $('[type="submit"]'); // 查找 type="submit"
console.log(b);
var p3 = $('p.text-info'); // 查找class="text-info"的p标签
console.log(p3);父子层级选择器
通过父子层级关系查找元素
- 1.子代选择器, 如
#demo>p - 2.后代选择器, 如
#demo p - 3.兄弟相邻选择器, 如
#p1+div - 4.同辈选择器, 如
#p1~div
子代选择器,通过父元素找子元素用大于号>
// 父元素找子元素
var a1 = $('#demo>p') // 找出id为demo的 的子元素p
console.log(a1)
var a2 = $('div>input') // 找出div的子元素input
console.log(a2)后代选择器,通过父元素找子孙元素，中间用空格
// 后代选择器
var a1 = $('#demo p'); // id为demo的后代p元素 （包含子元素和子孙元素）
console.log(a1)兄弟相邻选择器,通过定位当前元素，找到同一层级的下一个兄弟元素，中间用加号+
// 兄弟元素选择器
var d = $('#p1+div'); //查找id=p1的下一个兄弟div
console.log(d)同辈选择器，,通过定位当前元素，找到同一层级的该元素后面的全部兄弟元素，中间用~
// 兄弟元素选择器
var d = $('#p1~div'); //查找id=p1的全部div兄弟元素
console.log(d)first 和 last
从查询结果筛出第一个和最后一个元素
var p1 = $('p:first'); //查找 第一个p元素
console.log(p1)
var p2 = $('p:last'); //查找 最后一个p元素
console.log(p2)模糊匹配
模糊匹配属性以什么开头和以什么结尾的元素
var p1 = $('[class^="text"]'); // 匹配以text开头的class属性
console.log(p1)
var p2 = $('[class$="info"]'); //匹配以info结尾的class属性
console.log(p2)匹配属性包含指定字符的元素
var p3 = $('[class*="text"]'); // 匹配包含text的class属性
console.log(p3)
var p4 = $('[class*="info"]'); //匹配包含info的class属性
console.log(p4)
var p5 = $('[class*="t-in"]'); //匹配包含t-in的class属性
console.log(p5)匹配多个
匹配多个元素中间逗号隔开
var p3 = $('p, div'); // p标签和div标签元素