第二节 jQuery选择器 

 1 <!-- jQuery选择器可以快速的选择元素，选择规则和css样式相同，使用length属性判断是否选择成功：
 2         $('#myid') 选择ID为myid的网页元素
 3         $('.myClass') 选择class为myClass的元素
 4         $('li') 选择所有的li元素
 5         $('#ul1 li span')  选择id为ul1元素下所有li下的span元素
 6         $('input[name=first]') 选择name属性等于first的input元素
 7 
 8      对选择集进行过滤
 9          $('div').has('p'); 选择包含p元素的div元素
10          $('div').not('.myClass'); 选择class不等于myClass的div元素
11          $('div').filter(',myClass'); 选择class等于myClass的div元素
12          $('div').eq(5); 选择第6个div元素，从0开始计数
13 
14      选择集转移
15          $('div').prev(); 选择div元素前面紧挨着的同辈元素
16          $('div').prevAll(); 选择div元素之前的所有的同辈元素
17          $('div').next(); 选择div元素后面紧挨的同辈元素
18          $('div').nextAll(); 选择div元素后面的所有同辈元素
19          $('div').parent(); 选择div的父元素
20          $('div').children(); 选择div的所有子元素
21          $('div').siblings(); 选择div的同级元素
22          $('div').find('.myClass'); 选择div你的从class等于myClass的元素
23 
24      判断是否选择到了元素：jQuery有容错机制，即使没有找到元素也不会出错，可以用length属性来判断是否找到了元素，length等于0就是没有找到元素，大于0就是找到了元素
25          -->
26 <!DOCTYPE html>
27 <html lang="en">
28 <head>
29     <meta charset="UTF-8">
30     <title>Document</title>
31     <script type="text/javascript" src="../jquery-1.12.2.js"></script>
32     <script type="text/javascript">
33         $(function(){
34             var $div = $('#div1');
35             $div.css({'color':'red'});
36 
37             var $div2 = $('.box');
38             $div2.css({'backgroundColor':'gold','color':'red'});
39 
40             var $li = $('.list li');
41             $li.css({'color':'green'});
42 
43             alert($li.length);
44 
45         });
46     </script>
47 </head>
48 <body>
49     <div id="div1">这是第一个div元素</div>
50     <div class="box">这是第二个div元素</div>
51     <div class="box">这是第三个div元素</div>
52     <!-- ul.list>li{$}*8  $自动编号 -->
53     <ul class="list">
54         <li>1</li>
55         <li>2</li>
56         <li>3</li>
57         <li>4</li>
58         <li>5</li>
59         <li>6</li>
60         <li>7</li>
61         <li>8</li>
62     </ul>
63 
64 </body>
65 </html>

 

posted @ 2020-03-14 17:25  kog_maw  阅读(151)  评论(0)    收藏  举报