zoukankan      html  css  js  c++  java
  • 第二节 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>
  • 相关阅读:
    P4009 汽车加油行驶问题
    P2761 软件补丁问题
    P1251 餐巾计划问题
    P2766 最长不下降子序列问题
    P4011 孤岛营救问题
    P2765 魔术球问题
    P2770 航空路线问题
    P2762 太空飞行计划问题
    P2764 最小路径覆盖问题
    P3355 骑士共存问题
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12493119.html
Copyright © 2011-2022 走看看