jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

当用户点击按钮后，有 id="test" 属性的元素将被隐藏:

1 $(document).ready(function(){
2   $("button").click(function(){
3     $("#test").hide();
4   });
5 });

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

1 $(document).ready(function(){
2   $("button").click(function(){
3     $(".test").hide();
4   });
5 });
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="node_modules/jquery/dist/jquery.min.js"></script>
 7 </head>
 8 <body>
 9 <div id="div1">click me</div>
10 <ul>
11     <li class="liC">1</li>
12     <li class="liC">2</li>
13     <li>3</li>
14     <li class="liC">4</li>
15     <li>5</li>
16     <li>6</li>
17     <li class="liC">7</li>
18     <li class="liC">8</li>
19 </ul>
20 <ul></ul>
21 <input type="text">
22 <input type="password">
23 </body>
24 </html>
25 <script>
26     const div1=document.getElementById('div1')//js获取dom
27     // $('#div1')//jquery获取dom
28 
29     // js dom和jq dom可以相互转换
30     console.log($(div1))//js dom ==>jq dom
31     console.log($('#div1')[0])//jq dom==>js dom
32 
33     console.log($('.liC'))
34     console.log($('ul'))
35     console.log($('ul>li'))
36     console.log($('ul,div'))
37     console.log($('#div1+ul'))
38     console.log($('#div1~ul'))
39     $('#div1').on('mousemove',function () {
40         console.log('move')
41     })
42     $('#div1').on('mousedown',function () {
43         console.log('down')
44     })
45     $('#div1').off('mousedown','mousemove')
46     $('ul').one('mousemove',function () {
47         console.log('ulmove')
48     })
49     $('input[type="text"]').blur(function () {
50        /* $('#div1').css('color','yellow')//单行css样式
51         $('#div1').css({//多行css样式
52             'color':'red',
53             'background':'lightblue',
54             "width":"100px"*/
55         alert("Hello World!")
56         })
57 
58 
59 
60 </script>

独立文件中使用 jQuery 函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

1 <head>
2 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
3 </script>
4 <script src="my_jquery_functions.js"></script>
5 </head>

 

posted @ 2021-12-18 20:03  LLLLY  阅读(25)  评论(0)    收藏  举报