jQuery的end()方法使用详解
内容摘要
end()方法的定义和用法:
end()方法能够回到最近的一个"破坏性"操作之前,即将匹配的元素列表变为前一次的状态。
如果没有破坏性操作将返回一个空集。
破坏性操作的概念:指
end()方法能够回到最近的一个"破坏性"操作之前,即将匹配的元素列表变为前一次的状态。
如果没有破坏性操作将返回一个空集。
破坏性操作的概念:指
文章正文
end()方法的定义和用法:
end()方法能够回到最近的一个"破坏性"操作之前,即将匹配的元素列表变为前一次的状态。
如果没有破坏性操作将返回一个空集。
破坏性操作的概念:指任何改变所匹配元素的操作。可能大家对这个概念比较模糊,举个例子:
1 | $( "li" ).css( "color" , "red" ); |
以上代码的CSS函数就不是一个破坏性操作,因为匹配元素列表并没有发生变化,改变的是元素中的文本内容的CSS属性。
1 | $( "li" ).find( ".first" ) |
以上代码就是一个破坏性操作,因为匹配元素的列表发生了变化,比如有三个li元素,那么匹配元素的列表有三个元素,但是经过使用find()方法筛选以后,匹配元素列表只有一个元素了,这就是发生了"破坏性"操作。
语法结构:
1 | $(selector). end () |
实例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>phpstudy</title> <script type= "text/javascript" src= "mytest/jQuery/jquery-1.8.3.js" ></script> <script type= "text/javascript" > $(document).ready( function (){ $( ".first" ).find( ".div" ).css( "color" , "green" ); $( ".second" ).find( ".div" ). end ().css( "color" , "blue" ); $( ".third" ).find( ".js" ).css( "color" , "blue" ). end ().css( "color" , "red" ) }) </script> </head> <body> <div> <ul class = "first" > <li>HTML专区</li> <li>Javascript专区</li> <li class = "div" >Div+Css专区</li> <li>Jquery专区</li> </ul> <ul class = "second" > <li>HTML专区</li> <li>Javascript专区</li> <li class = "div" >Div+Css专区</li> <li>Jquery专区</li> </ul> <ul class = "third" > <li>HTML专区</li> <li class = "js" >Javascript专区</li> <li>Div+Css专区</li> <li>Jquery专区</li> </ul> </div> </body> </html> |
以上所述就是本文的全部内容了,希望大家能够喜欢。
代码注释