jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布

sgls652709

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量348

点赞数

分类专栏：待分类文章标签： jquery

本文链接：https://blog.csdn.net/sgls652709/article/details/51705987

版权

待分类专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

本文内容摘自《锋利的jQuery》，梳理了jQuery里面的几种选择器的用法，这里只给出一个大概的结构，具体用法还请查资料

正文

jQuery选择器完全继承了CSS选择器的风格，可以随意将选择器组合在一起，下面来看看它支持哪些写法吧

常用选择器

标签选择器： $(“td”)
ID选择器： $(“#note”)
类选择器 : $(“.note”)
群组选择器：$(“td，#note, .note”)
后代选择器: $(“td input”) $(“td > input”）
通配符选择器： $(“*”) 、 $(“select *”) 、 $(“#note *”)

选择器可以组合使用，例如标签、Id、后代组合：$(“td#note span”)

层次选择器

选取ancestor所有后代： $(“ancestor descendant”)
选取parent元素子元素： $(“parent > child”)
prev元素下个同辈元素： $(“prev + next”)
prev之后所有兄弟节点： $(“prev~siblings”）

最后两个选择器注意和jQuery函数nextAll()、prevAll()、siblings()区分或者代替

过滤选择器

:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated
:focus

上面的选择器其实也可以和之前的常用选择器、层次选择器混合使用，代表不同的含义。例如select:first 与select :first 一个表示相同类型下的第一个元素，而另一个表示这个类型下元素的第一个子元素；当然组合还有很多种方式：var name = $(“select > option:first”).val();

<body>
    <select name="review">
        <option value="0">苹果</option>
        <option value="1">香蕉</option>
        <option value="2">荔枝</option>
        <option value="3">芒果</option>
    </select>
    <select class="retrieve">
        <option value="3">芒果</option>
        <option value="2">荔枝</option>
        <option value="1">香蕉</option>
        <option value="0">苹果</option>
    </select>
    <script>
        $(function(){
            var name = $("select:first").attr("name")
            alert(name);
            var val = $("select.retrieve :first").val();
            alert(val);

        })
    </script>
</body>

内容过滤选择器

:contains
:empty
:has
:parent

可见性过滤选择器

:hidden
:visible

属性过滤选择器

[attribute] 例：$(“div[id]”)
[attribute=value] 例： $(“div[name=’test’]”)
[attribute!=value]
[attribute^=value] 注：以value开头
[attribute$=value] 注：以value结束
[attribute*=value]
[attribute|=value]
[attribute~=value]
[attribute1][attribute2][attributeN] 注：合并成复合属性熟悉器，范围每选择一次，缩小一次

这里用一个select的例子来说明

<body>
    <select name="review">
        <option value="0">苹果</option>
        <option value="1" selected="selected">香蕉</option>
        <option value="2">荔枝</option>
        <option value="3">芒果</option>
    </select>

    <script>
           var text = $("select[name='review'] option[selected]").text();
            alert(text); //输出香蕉
    </script>
</body>

子元素过滤选择器

:first-child
:last-child
:only-child
:nth-child

nth-child可以使用n这个字母，组成任意表达式，如2n 、2n+1 ,n会从1开始将满足条件的元素选取

表单对象属性过滤选择器

:enabled
:disabled
:checked
:selected

selected这个选择器，我想用select来举个例子

<body>
    <select name="review">
        <option value="0">苹果</option>
        <option value="1" selected="selected">香蕉</option>
        <option value="2">荔枝</option>
        <option value="3">芒果</option>
    </select>

    <script>
         var text =  $("select[name='review'] option:selected").text();
        alert(text); //输出香蕉
    </script>
</body>

表单选择器

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

例子

<body>
    <input type="radio" name="test" value="0" /> 一级
    <input type="radio" name="test" checked value="1"/> 二级
    <script>
       var val = $("input:radio:checked").val();
        alert(val); //输出1
    </script>
</body>