jQuery--dom对象选择器-526互联

一、概述

选择器：就是一个字符串，用来定位dom对象

定位了dom对象就可以通过jquery的函数操作dom对象

二、常用选择器

1、id选择器$("#id值")

通过dom对象的id定位dom对象。id是当前页面唯一值

2、class选择器$(".class样式名")

使用样式的名称定位dom对象

3、标签选择器$("标签名称")

使用标签名称定位dom对象

4、所有选择器$("*")

定位所有的dom对象

5、组合选择器$("#id,.class,标签名")

是多个被选对象间使用逗号分割形成的选择器，可以组合id，class，标签名等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器演示</title>
    <script src="jquery-3.7.0.js"></script>
    <style>
        div{
            background: gold;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

    <script>
        function fun1(){
            // id选择器
            var obj = $("#one")
            obj.css("background","red")
        }
        function fun2(){
            var obj = $(".two")
            obj.css("background","blue")
        }
        function fun3(){
            var obj = $("div")
            // 操作jquery对象数组中的全部成员
            obj.css("background","pink")
            obj[1].css("background","red")
            var span = $("span")
        }
        function fun4(){
            var obj = $("#one,.two")
            obj.css("background","green")
        }
    </script>

    <div id="one">我是one的div</div>
    <br>
    <div class="two">我是样式two的div</div>
    <br>
    <div>我没有id也没有class</div>
    <br>
    <span>我是span标签</span>
    <br>
    <input type="button" value="获取id是one的dom对象" onclick="fun1()">
    <input type="button" value="获取class是two的dom对象" onclick="fun2()">
    <input type="button" value="使用标签选择器" onclick="fun3()">
    <input type="button" value="组合选择器" onclick="fun4()">
</body>
</html>

三、表单选择器$(":type属性值")

使用input标签的type属性值，定位dom对象

表单相关元素的选择器：文本框、单选框、复选框、下拉列表等。无论是否有form标签，都可以选择。

根据元素类型来定义

// 举例
$(":text")选取所有的单行文本框
$(":password")选取所有的密码文本框
$(":button")选取所有的按钮
$(":radio")选取所有的单选框
$(":checkbox")选取所有的复选框