1.jQuery 子元素选择器-内容
(1)[attribute]
概述:匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
<script>
$(function () {
let size = $('[href]').size();
console.log(size);
})
</script>
作用:查找有href属性的元素,在控制台打印总共大小。
(2)[attribute=value]
概述:匹配给定的属性是某个特定值的元素
<script>
$(function () {
console.log($("[id='taobao']").get(0));
})
</script>
作用:查找id等于taobao的元素,在控制台打印第一个找到的元素。
(3)[attribute!=value]
概述:匹配所有不含有指定的属性,或者属性不等于特定值的元素。
此选择器等价于:not([attr=value])
要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
<script>
$("a[id!='taobao']").each(function () {
console.log(this);
});
</script>
作用:查找所有属性id不等于taobao的元素,控制台打印。
(4)[attribute^=value]
概述:匹配给定的属性是以某些值开始的元素
<script>
$(function () {
console.log($("a[href^='https']").get(0));
});
</script>
作用:查找所有属性id以https开头的元素,控制台打印找到的第一个。
(5)[attribute$=value]
概述:匹配给定的属性是以某些值结尾的元素
<script>
$(function () {
console.log($("img[src$='jpg']").get(0));
});
</script>
作用:查找所有img的src属性以.jpg结尾的元素,控制台打印找到的第一个。
(6)[attribute*=value]
概述:匹配给定的属性是以包含某些值的元素
<script>
$(function () {
console.log($("a[href*='sina']").get(0));
});
</script>
作用:查找所有a的href属性含sina的元素,控制台打印找到的第一个。
(5)源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 选择器:属性</title>
<script src="../jquery-2.2.4.js"></script>
<style>
div >p > img {
border: 10px solid blueviolet;
}
</style>
<script>
$(function () {
let size = $('[href]').size();
console.log(size);
console.log($("[id='taobao']").get(0));
$("a[id!='taobao']").each(function () {
console.log(this);
});
console.log($("a[href^='https']").get(0));
console.log($("img[src$='jpg']").get(0));
console.log($("a[href*='sina']").get(0));
console.log($("div [src$='.jpg'][height][width]").get(0));
})
</script>
</head>
<body>
<h3><a id="reture" href="../index.html">返回</a></h3>
<h1>jQuery 选择器:属性</h1>
<pre>
属性
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attribute~=value]
[attribute|=value]
[attrSel1][attrSel2][attrSelN]
</pre>
<div class="my">
<h4><a id="taobao" href="https://www.taobao.com">淘宝</a></h4>
<h4><a id="sina" href="http://www.sina.com">新浪</a></h4>
<br>
<p><img src="../images/adv_2.jpg" height="190" width="360"/></p>
</div>
</body>
</html>
运行结果: