jQuery的属性选择器

木头人2345

已于 2024-06-12 00:37:03 修改

阅读量1k

点赞数 22

文章标签： jquery 前端 javascript

于 2024-06-12 00:34:50 首次发布

本文链接：https://blog.csdn.net/weixin_54443214/article/details/139610925

版权

简介

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的属性选择器有带属性的、包括某个属性值的、不包括某个属性值的、以某个字符开头的、以某个字符结束的还有包含某个字符的。

木头人2345

关注

22
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫