简介
jQuery的属性选择器
准备工作
双击桌面上的vsCode
进入vsCode软件中鼠标滑动左侧的导航栏鼠标右键点击选择新建文件
文件名就叫jQuery的属性选择器.html
在右侧的代码编辑区域打上叹号然后敲回车,html模板就出来了
紧接着我们将title标签中的标题修改成jQuery的属性选择器
然后在head标签中引入jQuery包
在body标签中先写一个按钮和5个带属性的div标签
这样我们的前期准备工作就完成了
<body>
<button id="b1">按钮</button>
<div title="test1">test1</div>
<div title="test2">test2</div>
<div title="test3">test3</div>
<div title="test4">test4</div>
<div title="test5">test5</div>
</body>
jQuery的属性选择器
将含有属性title的div标签背景颜色改为红色
在body标签的下面写一对script标签
先通过jQuery来通过id获取到按钮,并且使用jQuery的.click()方法,将含有属性title的div标签背景颜色改为红色。
jQuery可以通过$("标签[属性]")这种模式来选取到有指定属性的标签
这里div就是模板里的标签,title就是模板里的属性。
打开浏览器点击按钮可以查看一下。
将属性title的值等于test1的div标签的背景颜色改为红色
将上一步的jQuery代码注释掉
这次与上次不同这次需要制定属性title的值为test1,那么jQuery就应该写成$("标签[属性='属性值']")这种写法。
test1代表属性值
我们打开浏览器可以查看一下,最后只有属性title的值是test1的div标签的背景颜色改成了红色。
将属性title的值不等于test1的div标签的背景颜色改为红色
将上一个注释掉
既然等于test1的jQuery代码属性与属性值之间的关系是‘=’号,那么不等于test1的jQuery代码属性与属性值之间的关系是‘!=’号
可以打开浏览器来查看一下猜测的对不对。
将属性title以te开始的div标签的背景颜色改为红色
将上一个jQuery的代码注释掉
如果需求变成了以xx开始的属性值时jQuery的语法应该是$("标签[属性^='xx']"),xx代表以xx开头的属性值。
按照jQuery这种写法来说应该是全部的div标签的背景颜色都会变成红色的。
打开浏览器查看一下
将属性title以t3结束的div标签的背景颜色改为红色
将上一个jQuery代码注释掉
上一个加上^是以xx开头,如果是以xx结尾的话jQuery的语法写成$("标签[属性$='xx']"),使用$符号是属性值以xx结束。
可以打开浏览器去查看一下。
将属性title含有5的div标签的背景颜色改为红色
将上一个jQuery代码注释掉
要写一个属性值包含5的div标签的jQuery语法是$("标签[属性*=xx]"),这里*代表包含xx的属性值。
这回打开浏览器查看一下。
<script>
// 将含有属性title的div标签背景颜色改为红色
// $("#b1").click(function () {
// $("div[title]").css("background", "red");
// });
// 将属性title的值等于test1的div标签的背景颜色改为红色
// $("#b1").click(function () {
// $("div[title='test1']").css("background", "red");
// });
// 将属性title的值不等于test1的div标签的背景颜色改为红色
// $("#b1").click(function () {
// $("div[title!='test1']").css("background", "red");
// });
// 将属性title以te开始的div标签的背景颜色改为红色
// $("#b1").click(function () {
// $("div[title^='te']").css("background", "red");
// });
// 将属性title以t3结束的div标签的背景颜色改为红色
// $("#b1").click(function () {
// $("div[title$='t3']").css("background", "red");
// });
// 将属性title含有5的div标签的背景颜色改为红色
$("#b1").click(function () {
$("div[title*='5']").css("background", "red");
});
</script>
补充
如果有多个条件语句呢,在test1中添加一个属性为id=t1的,如果既想要title属性等于test1的又想要id属性为t1该怎么写?
我们可以先把上一个jQuery代码注释掉。
如果有多个条件那么jQuery的语法是这样写的$("标签[属性=''][属性='']...")这种写法。
我们先将test1的属性添加一个id=t1。
然后我们编写一个jQuery的多个条件的语句
然后可以打开浏览器查看一下test1的背景颜色是否变成了红色
$("#b1").click(function () {
$("div[title='test1'][id='t1']").css("background", "red");
});
小结
这次我学会了jQuery的属性选择器有带属性的、包括某个属性值的、不包括某个属性值的、以某个字符开头的、以某个字符结束的还有包含某个字符的。