zoukankan      html  css  js  c++  java
  • JQuery之选择集转移

    JQuery之选择集转移方法如下图:

    所谓选择集,就是通过$()方法获取到的所有标签的集合。

     代码实现:

     1 <script src="JS/jquery-1.12.4.min.js"></script>
     2     <script>
     3         $(function(){
     4             var $div1 = $('#div1');
     5             $div1.prev().css({
     6                 // 获取当前元素的上一个同级别的元素
     7                 'color':'red'
     8             });
     9             $div1.prevAll().css({
    10                 // 获取当前元素上面的所有同级别元素
    11                 'font-size' : '20px'
    12             });
    13             $div1.next().css({
    14                 // 获取当前元素的下一个同级别元素
    15                 'color':'blue'
    16             });
    17             $div1.nextAll().css({
    18                 // 获取当前元素下面的所有同级别元素
    19                 'font-size':'20px'
    20             });
    21         });
    22         $(function(){
    23             var $div3 = $('#div3');
    24             $div3.parent().css({
    25                 // 获取当前元素的父元素
    26                 'background':'red'
    27             });
    28             $div3.parent().parent().css({
    29                 // 获取当前元素的爷爷元素
    30                 'background':'blue'
    31             });
    32             $div3.children().css({
    33                 // 获取当前元素的所有孩子元素
    34                 'background':'yellow'
    35             });
    36             $div3.siblings().css({
    37                 // 获取当前元素的所有兄弟元素
    38                 'background':'pink'
    39             });
    40             // $div3.find('.spn1').css({
    41             //     // 在当前元素内查找class名为spn1的元素
    42             //     'font-size':30
    43             // });
    44             $div3.find('#spn1').css({
    45                 // 在当前元素内查找class名为spn1的元素
    46                 'font-size':99
    47             });
    48         });
    49    </script>
    50 
    51 
    52 <body>
    53     <h1>h1</h1>
    54     <h2>h2</h2>
    55     <h3>h3</h3>
    56     <div id="div1"></div>
    57     <h4>h4</h4>
    58     <h5>h5</h5>
    59     <h6>h6</h6>
    60         
    61     <div>62             <div >63                     <div>子兄弟1</div>
    64                     
    65                     <div id="div3" style="background: brown;">66                         <div></div>
    67                         <div>
    68                                 <div>
    69                                     <span id="spn1" class="spn1">gfgjkkhdsfhgvjskadugjvkoiuvjhfdsyiufhdsjou</span>   
    70                                 </div>
    71                         </div>
    72                         
    73                         
    74                     </div>
    75                     <div>子兄弟2</div>
    76                     <div>子兄弟3</div>
    77                     
    78                        
    79             </div>
    80     </div>
    81 </body>
    该花的钱要花,该吃的饭要吃。
  • 相关阅读:
    关于applet
    Hello.java
    filter用户授权的例子
    logfilter
    Java EE课程设计——企业人力资源管理系统
    条件查询、SQL、JPQL、HQL比较
    web service和ejb的区别
    RPC
    hashcode()和equals()的区别
    关于JSON
  • 原文地址:https://www.cnblogs.com/chao666/p/12018380.html
Copyright © 2011-2022 走看看