提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery选择器空格与大于号、加号与波浪号的区别

jQuery 区别 选择器 空格 波浪 加号
2023-09-11 14:22:49 时间

空格：$('parent childchild')表示获取parent下的所有的childchild节点（所有的子孙）。

大于号：$('parent > child')表示获取parent下的所有child的儿子( 第一代)。

加号：$('pre + nextbrother')表示获得pre节点的下一个兄弟节点，相当于next()方法

波浪号：$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点，相当于nextAll()方法。 

下面是一个小例子，看看他们的区别吧~~~~ (注意：代码测试效果不对，有时间再试试）

[html] view plain copy
 
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    2. <html>  
    3. <head>  
    4.     <title>New Document </title>  
    5.     <meta name="Generator" content="EditPlus">  
    6.     <meta name="Author" content="">  
    7.     <meta name="Keywords" content="">  
    8.     <meta name="Description" content="">  
    9.     <script src='f:/study/jquery.js'></script>  
    10.     <script>  
    11.         $(function () {  
    12.   
    13.             $("#b").append($("#a span").clone());  
    14.             $("#c").append($("#span12 + span").clone());  
    15.             $("#d").append($("#span12 ~ span").clone());  
    16.             $("#e").append($("#a > span").clone());  
    17.   
    18.         })  
    19.   
    20.     </script>  
    21. </head>  
    22.   
    23. <body>  
    24.     <div id='a'>  
    25.         <span>span1</span>  
    26.         <div>  
    27.             <span>span1.1</span>  
    28.             <span id='span12'>span1.2</span>  
    29.             <span>span1.3</span>  
    30.   
    31.             <span>span1.4</span>  
    32.             <span>span1.5</span>  
    33.             <span>span1.6</span>  
    34.         </div>  
    35.         <span>span2</span>  
    36.         <div>  
    37.             <span>span2.1</span>  
    38.             <span>span2.2</span>  
    39.             <span>span2.3</span>  
    40.             <span>span2.4</span>  
    41.             <span>span2.5</span>  
    42.             <span>span2.6</span>  
    43.         </div>  
    44.         <span>span3</span>  
    45.         <span>span4</span>  
    46.     </div>  
    47.     <hr>  
    48.     <div id='b'></div>  
    49.     空格：  
    50.   <hr>  
    51.     <div id='c'></div>  
    52.     +：  
    53.   <hr>  
    54.     <div id='d'></div>  
    55.     ~：  
    56.   <hr>  
    57.     <div id='e'>  
    58.         >  
    59.     </div>  
    60. </body>  
    61. </html>  

相关文章