选择器：就是定位条件，通知jQuery函数定位满足条件的DOM对象。

基础选择器

id选择器
- 语法：$("id值")
- 通过DOM对象的id值定位DOM对象，id在HTML页面中必须是唯一值。
class选择器
1. 语法：$(".class类名")
2. class是表示css中的类选择器，使用样式名称定位DOM对象
标签选择器
1. 语法：$("标签名")
2. 使用标签名定位DOM对象，如：div、p….

举个例子：我们可以通过这些选择器来修改我们css样式

<style type="text/css">
    div{
        background-color: gray;
        width: 100px;
        height: 100px;
    }
</style>
<script type="text/javascript">
    function fun1(){
        //使用id选择器
        var $obj = $("#one");
        $obj.css("backgroundColor","blue");
    }
    function fun2(){
        //使用class选择器
        var $obj = $(".two");
        $obj.css("backgroundColor","green");
    }
    function fun3(){
        //使用标签选择器
        var $obj = $("div");
        //因为这是一个数组，jQuery会操作数组中的全部成员
        $obj.css("backgroundColor","red");
    }
      function fun4(){
        //使用通配符匹配全部选择器
        var $obj = $("*");
        $obj.css("backgroundColor","hotpink");
     }
</script>    
...
<body>
    <div id="one">one</div>
    </br>
    <div class="two">two</div>
    </br>
    <div>div标签</div>
    </br>
    <span>span标签</span>
    </br>
    <button onclick="fun1();">演示1</button>
    <button onclick="fun2();">演示2</button>
    <button onclick="fun3();">演示3</button>
        <button onclick="fun4();">演示4</button>
</body>

组合选择器：

我们可以把多个选择器用逗号隔开，组合起来作为jQuery对象
语法：$("id值,class类名...")

使用规则

//省略部分内容，样式于上面相同
<script type="text/javascript">
      function fun5(){
          //使用通配符匹配全部选择器
          var $obj = $("#one,.two");
          $obj.css("backgroundColor","orange");
      }
</script>
...
<body>
...
<button onclick="fun5();">演示5</button>
...
</body>

同时还可以使用后代选择器…和css选择器的选择器使用方法相同，这里不做过多演示。

表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法不管是否存在
，均可做出选择。

语法：$(“:type属性值”)
例如：

$(":text")    //选取所有单行文本框
$(":password")    //选取所有的密码款
$(":radio")    //选取所有的单选框
$(":checkbox")    //选取所有的复选框

注意：$(“:tr”)是错误的，因为必须要有type属性值才能使用这种方法读取到，tr不是input标签。

示例

<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script>
        function fun1(){
            //使用表单选择器
            var $obj = $(":text");
            //读取value属性值，val()是jQuery中的函数
            alert($obj.val());
        }
        //dom打印radio中的value
        function fun2(){
            //定位radio
            var $obj = $(":radio"); //数组，目前是两个对象：man、woman
            //循环数组，需要转换会dom对象
            for (var i = 0;i<$obj.length;i++){
                var dom = $obj[i];
                alert(dom.value);
            }
        }
        //使用jQuery对象输出checkbox的值
        function fun3(){
            //先定位复选按钮
            var $obj = $(":checkbox");
            //循环复选按钮
            for (var i = 0;i<$obj.length;i++){
                //将其中一个复选按钮转换为dom对象
                var dom = $obj[i];
                //再将这一个复选按钮转换为jQuery对象，使用val()函数
                alert($(dom).val());
                //alert($($obj[i]).val())  <-   再简洁些
            }
        }
</script>
...
<body>
    文本框：<input type="text" value="t1"/><br/>
    性别：<br/>
    <input type="radio" name="sex" value="man">男<br/>
    <input type="radio" name="sex" value="woman">女<br/>
    爱好：<br/>
    <input type="checkbox" value="bike">骑行<br/>
    <input type="checkbox" value="football">足球<br/>
    <input type="checkbox" value="music">音乐<br/>
    <br/>
    <p>功能按钮</p>
    <input type="button" value="读取t1属性值" onclick="fun1();"/>
    <input type="button" value="读取radio属性值" onclick="fun2();"/>
    <input type="button" value="读取checkbox属性值" onclick="fun3();"/>
</body>