id选择器

语法：$(“#id”)

class选择器

语法：$(“.class 名称”)

标签选择器

语法：$(“标签名”)

所有选择器

语法：$(“*”)， 选取页面中所有 DOM 对象。

组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“#id, .class, 标签名”)
注意：“，”的意思是或者，是选择如上的#id或者.class或者标签名

实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script src="static/js/jquery.js"></script>
  9.     <style>
  10.         div{
  11.             background: grey;
  12.             width: 200px;
  13.             height:100px ;
  14.             font-size: 20px;
  15.         }
  17.         span{
  18.             font-size: 20px;
  19.         }
  20.     </style>
  22.     <script>
  23.        function fun1(){
  24.            let obj1=$("#one");
  25.            obj1.css("background","red");
  26.        }
  28.        function fun2(){
  29.            let obj2=$(".two");
  30.            obj2.css("background","green");
  31.        }
  33.        function fun3(){
  34.            let obj3=$("span");
  35.            obj3.css("font-size","15px");
  36.        }
  38.        function fun4(){
  39.            let obj4=$("*");
  40.            obj4.css("font-size","15px")
  41.        }
  43.        function fun5(){
  44.            let obj4=$("#one,span");
  45.            obj4.css("font-size","25px")
  46.        }
  47.     </script>
  49. </head>
  50. <body>
  52. <div id="one">我是第一个盒子，id是one</div>
  53. <br>
  54. <div class="two"> 我是第二个盒子，class是two</div>
  55. <br>
  56. <div class="two">我是第三个盒子，没有id也没有class</div>
  57. <br>
  58. <span>我是span标签1</span>
  59. <br>
  60. <span>我是span标签2</span>
  61. <br>
  62. <input type="button" value="id=one的dom对象" onclick="fun1()">
  63. <br>
  64. <input type="button" value="class=two的dom对象" onclick="fun2()">
  65. <br>
  66. <input type="button" value="span标签的dom对象" onclick="fun3()">
  67. <br>
  68. <input type="button" value="所有dom对象" onclick="fun4()">
  69. <br>
  70. <input type="button" value="组合选择器获取的dom对象" onclick="fun5()">
  71. </body>
  72. </html>

上面5种选择器是基本选择器，下面再介绍一种开发中用的比较多的表单选择器。

表单选择器

表单选择器是用来定位带type属性的input标签的，表单选择器和表单（form标签）没有什么关系，如：







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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="static/js/jquery.js"></script>
  8.     <style>
  10.     </style>
  12.     <script>
  13.         function f1(){
  14.             let $obj=$(":text");
  15.             alert($obj.val());
  16.         }
  18.         function f2(){
  19.             let $obj=$(":radio");
  20.             for(let i=0;i<$obj.length;i++){
  21.                 alert($obj[i].value);
  22.             }
  23.         }
  25.         function f3(){
  26.             let $obj=$(":checkbox");
  27.             for(let i=0;i<$obj.length;i++){
  28.                 alert($obj[i].value);
  29.             }
  30.         }
  31.     </script>
  33. </head>
  34. <body>
  36. <p>文本框：</p>
  37. <input type="text" value="我是的type是text"><br>
  38. <p>性别：</p>
  39. <input type="radio" name="sex" value="man">男<br>
  40. <input type="radio" name="sex" value="woman">女<br>
  41. <p>爱好：</p>
  42. <input type="checkbox" name="hobby" value="football">足球<br>
  43. <input type="checkbox" name="hobby" value="girl">女孩<br>
  44. <input type="checkbox" name="hobby" value="game">游戏<br>
  45. <p>功能按钮：</p>
  46. <input type="button" value="按钮1" onclick="f1()"><br>
  47. <input type="button" value="按钮2" onclick="f2()"><br>
  48. <input type="button" value="按钮3" onclick="f3()"><br>
  49. </body>
  50. </html>