jQuery end()執行個體
執行個體一、
<body> <p><span>Hello</span>, how are you?</p> <script>$("p").find("span").end().css("border", "2px red solid");</script></body>//說明//$("p").find("span")表示尋找P元素下的SPAN元素//但是我想更改P的邊框,這時我就要返回到P元素(即從SPAN返回到P,就是還原為之前的狀態)//$("p").find("span").end()這個語句就返回來了。//$("p").find("span").end().css("border", "2px red solid")把P的邊框設定了。
執行個體二、
<div id="test"> <h1>jQuery end()方法</h1> <p>講解jQuery中end()方法。</p> </div><scripg>$(document).ready(function() { $("#test").click(function() { $(this).find("p").hide().end().hide(); }); });</script>
//說明 //點擊id為test的div時,首先找到div裡邊的p標籤,將其隱藏。 //接下來使用end()方法結束了對p標籤的引用,此時返回的是#test(jQuery對象),從而後邊的hide()方法隱藏了div。 執行個體三、
<script type="text/javascript"> $(function(){ $('<input type="button" value="click me" /><input type="button" value="triggle click me" /><input type="button" value="detach handle" /><input type="button" value="show/hide text" />').appendTo($('body')); $('input[type="button"]').eq(0).click(function(){ alert('you clicked me!'); }) .end().eq(1).click(function(){ $('input[type="button"]:eq(0)').trigger('click'); }) .end().eq(2).click(function(){ $('input[typw="button"]:eq(0)').unbind('click'); }) .end().eq(3).toggle(function(){ $('.panel').hide('slow'); },function(){ $('.panel').show('slow'); }); })</script><div class="panel">welcome to jQuery!</div>