jquery 連寫注釋;siblings() 方法;jQuery 的3種滑動方法;slideUp()向上滑動;slideDown()向下滑動;slideToggle()來回滑動

首先我們看兩個連寫注釋

第一個:

 

/* 點擊頭像，顯示基本資料 */
    $(".f-chatTit a.avatar").click(function(){
        $(this).hide().parents(".f-chatWrapUnfold").find(".f-chatWrapBar").css({"width":"500px"}).find(".basicInfo").show();
    });

翻譯過來就是 當類名為  .f-chatTit 下的超鏈接(類名為avatar) 點擊的時候,

首先自己隱藏,然后去所有的父層里面找 類名為 f-chatWrapUnfold 的元素,並且在這個元素里面找到 類名為 f-chatWrapBar的元素,給這個元素加上css寬度為500px,然后在這個f-chatWrapBar元素里面找一個 類名為 basicInfo的元素,設置顯示.

注意,這里是用的 parents ,如果parents里面找到類名為  f-chatWrapUnfold 的元素有4個的話,那么下面的find類名為f-chatWrapBar以及接下來的操作  就會分別操作4次

 

第二個:

/* 點擊最小化按鈕，最小化聊天窗口 */
    $(".minimize").click(function(){
        $(this).parents(".f-chatWrapUnfold").hide().parent().find(".minimizeBox").show();
    });

當類名為minimize的元素點擊的時候,首先去所有的父類里面查找類名為 f-chatWrapUnfold的元素,每個這樣的元素都隱藏.並且每個元素的父節點里面去找 類名為 minimizeBox的元素,設置為顯示

 

再來看看  siblings() 方法  詳情http://www.w3school.com.cn/jquery/traversing_siblings.asp

siblings是指 自己之外的 其他同級元素

舉例1:查找每個 p 元素的所有類名為 "selected" 的所有同胞元素：

$("p").siblings(".selected")

舉例2:

舉例3:

 

jQuery 的3種滑動方法分別是 slideUp()向上滑動;slideDown() 向下滑動;slideToggle() 來回滑動

詳情請看:http://www.w3school.com.cn/jquery/jquery_slide.asp

 

(1)slideUp()向上滑動方法;

$(selector).slideUp(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成后所執行的函數名稱。

下面的例子演示了 slideUp() 方法：

點擊前

點擊后

代碼如下

<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>
 
<p class="flip">請點擊這里</p>

<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

(2)jQuery slideDown() 方法

jQuery slideDown() 方法用於向下滑動元素。

$(selector).slideDown(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成后所執行的函數名稱。

下面的例子演示了 slideDown() 方法：

點擊前

點擊后

代碼如下,注意在點擊前,上面的div是隱藏的

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>

<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>
 
<p class="flip">請點擊這里</p>

<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>

(3)jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

如果元素向下滑動，則 slideToggle() 可向上滑動它們。

如果元素向上滑動，則 slideToggle() 可向下滑動它們。

 

$(selector).slideToggle(speed,callback);

第一次點擊前

點擊后

再次點擊

注意第一次點擊之前的div是隱藏的狀態

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>

 

<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>