[JavaScript知识库]jQuery选择器

在jQuery中选择器有多种多样 其中经常用的有 id选择器 类选择器 标签选择器

css选择器选择元素有

1.基本选择器(类选择器、id选择器、并集选择器、全局选择器、标签选择器)(下面的1~5)

2.层次选择器(后代选择器、子代选择器、同辈元素选择器)

3.属性选择器

1.类选择器

????????顾名思义根据类名(class)来选中页面中的元素,如页面中有两个标签给相同的class名字

需求:使用类选择器选中这两个标签给字体渲染上红色

<h1 class="label">这个是h1标签</h1>
<h2 class="label">这个是h2标签</h2>

<script>
    $(document).ready(function () {
        $(".label").css("color","red")
    })
</script>

?

?2.id选择器

? ? ? ? 根据id名字选中对应的元素给设置样式,如使用id选中器选中div给设置背景颜色

    <div style="width: 100px;height: 100px" id="div">

    </div>
    <script>
        $(document).ready(function () {
            // 需要注意的是使用id选择器选择元素需要加 # 符号
            $("#div").css("background-color","skyblue")
        })
    </script>

?

3.并集选择器 jquery中的并集选择器和css中的并集选择器是很相似的 都是有","隔开的

    <span id="first">我是span标签</span>
    <h4 id="last">我是h4标签</h4>
    <script>
        $(document).ready(function () {
            // 这里的并集选择器 是由两个id选择器组成的 第一个id和第二个id选择器都需要使用 # 符号
            $("#first,#last").css("color","red")
        })
    </script>

?4.全局选择器 用 * 符号调用 全局选择器调用页面中所有的内容

    <div style="width: 200px;height: 20px">
        我是div里面的文字
    </div>
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <script>
        $(document).ready(function () {
            $("*").css("color","red")
        })
    </script>

?

?5.标签选择器 根据标签来选中元素

    <h4>我是h4标签</h4>
    <script>
        $(document).ready(function () {
            $("h4").css("color","blue")
        })
    </script>

?

?6.层次选择器

????????层次选择器根据层次来进行对应的选择如页面中有一个ul里面有三个li标签

    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
    </ul>

1.后代选择器 选择ul所有的后代(注意需要使用空格隔开)

    <script>
        $(document).ready(function () {
            // 用空格隔开
            $("ul li").css("color","red")
        })
    </script>

2.子代选择器(这里用 > 符号隔开) 选中ul的子代

    <script>
        $(document).ready(function () {
            // 用 > 隔开
            $("ul>li").css("color","red")
        })
    </script>

3. 同辈选择器

    <script>
        $(document).ready(function () {
            // 用 + 隔开
            $("ul+li").css("color","red")
        })
    </script>

?

7. 属性选择器

(1).根据是否包含属性选择元素
?? ??? ??? ??? ?$("a[class]").css()
?? ??? ??? ?(2).根据属性的值来选择元素?
?? ??? ??? ??? ?$("a[class = 'hot']")
?? ??? ??? ?(3).选中class值不等于hot的元素
?? ??? ??? ??? ?$("a[class != 'hot']").css()
?? ??? ??? ?(4).选取属性值以开头的元素
?? ??? ??? ??? ?$("a[href ^= 'sale']")
?? ??? ??? ?(5).选取属性值以结尾的元素?? ?
?? ??? ??? ??? ?(a[href $= 'com'])?? ?
?? ??? ??? ?(6).选取属性包含的指定值的元素
?? ??? ??? ??? ?a[href *= 'id']