jQuery记录--普通元素过滤选择器

最新推荐文章于 2024-07-23 11:32:13 发布

长青道长

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量425

点赞数

分类专栏： js 文章标签： javascript jquery

本文链接：https://blog.csdn.net/AloneDonkey/article/details/48471011

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

编写网页的时候,很可能会出现多次出现同一种标签的情况;

如: <ol>

</ol>

<li>标签出现了多次,我们需要选择标签<li>的几个元素,难道还要一个个的去给他们添加ID么?

如: 我们想要选择第一个<li>标签,我们可以这样:

$("li:first")----li标签后面加冒号(:),

或者选最后一个:

$("li:last")

如果我们要灵活选择任意的一个标签元素，我们可以使用

:eq(index)

其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素

如:$("li:eq(3)");

我们还可以通过文本来内容来查找(?爬虫是不是就是这样--菜鸟的猜测)

我们使用:

:contains(text)--

eg:

<body>
        <div>改变包含"jQuery"字符内容的背景色：</div>
        <ol>
            <li>强大的"jQuery"</li>
            <li>"javascript"也很实用</li>
            <li>"jQuery"前端必学</li>
            <li>"java"是一种开发语言</li>
            <li>前端利器——"jQuery"</li>
        </ol>

        <script type="text/javascript">
             $("li:contains('jQuery')").css("background", "green");
        </script>
    </body>

有没有突然发现向我们小时的找规律,找出一堆相同的出来,有时候,我们的<li>标签里还会含有其他的标签:如

<ol>
            <li><p>我是P先生</p></li>
            <li><label>L妹纸就是我</label></li>
            <li><p>我也是P先生</p></li>
            <li><label>我也是L妹纸哦</label></li>
            <li><p>P先生就是我哦</p></li>
        </ol>

我么选择所要<label>标签:

可以看出，通过使用$("li:has('p')")选择器代码，获取了包含<p>元素的全部<li>元素，并通过css方法改变了这些元素在页面中显示的文字样式。

我么还可通过一些的元素的状态来选,如隐藏(:hidden),显示(:visible),

eg:

$("li:visible"),

我们还可以通过元素内部的属性(attribute)来选择某些元素:

eg:

[attribute=value];

eg:$("li [attribute=value] "),

<ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>

        <script type="text/javascript">
             $("li[title='蔬菜']").css("background-color", "green");
        </script>

关于属性选择,我们有匹配的 [attribute=value];就有不匹配的 [attribute!=value];甚至还有包含某个值的 [attribute*=value];看需要应用;

长青道长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery记录--普通元素过滤选择器

编写网页的时候,很可能会出现多次出现同一种标签的情况;如: 香蕉橘子西瓜苹果葡萄标签出现了多次,我们需要选择标签的几个元素,难道还要一个个的去给他们添加ID么?如:我们想要选择第一个标签,我们可以这样:$("li:fir
复制链接

扫一扫

专栏目录