slideToggle():
語法:
$(selector).slideToggle(speed,callback)
speed
可選。規(guī)定元素從隱藏到可見的速度(或者相反)。默認(rèn)為 "normal"。
可能的值:
毫秒 (比如 1500)
"slow"
"normal"
"fast"
在設(shè)置速度的情況下晕鹊,元素在切換的過程中岛请,會逐漸地改變其高度(這樣會創(chuàng)造滑動效果)旭寿。callback
可選。toggle 函數(shù)執(zhí)行完之后崇败,要執(zhí)行的函數(shù)盅称。
除非設(shè)置了 speed 參數(shù),否則不能設(shè)置該參數(shù)后室。
提示:如果元素已經(jīng)隱藏缩膝,則該效果不產(chǎn)生任何變化,除非規(guī)定了 callback 函數(shù)岸霹。
ready():
語法 1
$(document).ready(function)
語法 2
$().ready(function)
語法 3
$(function)
當(dāng) DOM(文檔對象模型) 已經(jīng)加載疾层,并且頁面(包括圖像)已經(jīng)完全呈現(xiàn)時,會發(fā)生 ready 事件贡避。
由于該事件在文檔就緒后發(fā)生云芦,因此把所有其他的 jQuery 事件和函數(shù)置于該事件中是非常好的做法。
ready() 函數(shù)規(guī)定當(dāng) ready 事件發(fā)生時執(zhí)行的代碼贸桶。
ready() 函數(shù)僅能用于當(dāng)前文檔舅逸,因此無需選擇器。
提示:ready() 函數(shù)不應(yīng)與 <body onload=""> 一起使用皇筛。
detach()
語法
$(selector).detach()
detach() 方法移除被選元素琉历,包括所有文本和子節(jié)點。
這個方法會保留 jQuery 對象中的匹配的元素水醋,因而可以在將來再使用這些匹配的元素旗笔。
detach() 會保留所有綁定的事件、附加的數(shù)據(jù)拄踪,這一點與 remove() 不同蝇恶。
實例:
//移動元素
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>移動 p 元素</button>
</body>
//使用 detach() 方法來刪除并恢復(fù)一個元素。
<script type="text/javascript">
$(document).ready(function(){
var x;
$("#btn1").click(function(){
x=$("p").detach();
});
$("#btn2").click(function(){
$("body").prepend(x);
});
});
</script>
</head>
<body>
<p>這是一個段落惶桐。</p>
<button id="btn1">刪除 p 元素</button>
<button id="btn2">恢復(fù) p 元素</button>
</body>
//使用 detach() 方法來移動元素撮弧,并保留元素的 jQuery 數(shù)據(jù)。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
$("p").click(function(){
$(this).animate({fontSize:"+=1px"})
});
});
</script>
</head>
<body>
<p>在本段落移動之后姚糊,試著點擊該段落贿衍,請注意它保留了 click 事件。</p>
<button>移動 p 元素</button>
</body>
animate()
語法:
$(selector).animate({params},speed,callback);
- 必需的 params 參數(shù)定義形成動畫的 CSS 屬性救恨。
- 可選的 speed 參數(shù)規(guī)定效果的時長贸辈。它可以取以下值:"slow"、"fast" 或毫秒肠槽。
- 可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱擎淤。
實例:
$("button").click(function(){
$("div").animate({left:'250px'});
});
animate() - 操作多個屬性
實例:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
stop()
stop() 方法停止當(dāng)前正在運行的動畫奢啥。
語法
$(selector).stop(stopAll,goToEnd)
參數(shù) | 描述 |
---|---|
stopAll | 可選。規(guī)定是否停止被選元素的所有加入隊列的動畫嘴拢。 |
goToEnd | 可選桩盲。規(guī)定是否允許完成當(dāng)前的動畫。該參數(shù)只能在設(shè)置了 stopAll 參數(shù)時使用炊汤。 |
實例:
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(true);
});
});
finish()
語法:
$(*selector*).finish(*queueName*)
停止當(dāng)前運行的動畫,移除所有排隊的動畫弊攘,并為被選元素完成所有動畫抢腐。該方法與 .stop(true,true) 方法類似,不同的是襟交,finish() 也會引起所有排隊動畫的 CSS 屬性停止迈倍。
queueName可選。規(guī)定要停止動畫的隊列名稱捣域。
slideToggle()
slideDown()
slideUp()
- slideToggle()方法通過使用滑動效果(高度變化)來切換元素的可見狀態(tài)啼染。
如果被選元素是可見的,則隱藏這些元素焕梅,如果被選元素是隱藏的迹鹅,則顯示這些元素。- slideUp() 方法在已經(jīng)顯示的情況下,隱藏選中的元素
- slideDown() 方法在已經(jīng)隱藏的情況下,顯示選中的元素
語法
$(selector).slideToggle(speed,callback) //在顯示與隱藏之間來回切換
$(selector).slideUp(speed,callback) //在已經(jīng)顯示的情況下,隱藏選中的元素
$(selector).slideDown(speed,callback) //在已經(jīng)隱藏的情況下,顯示選中的元素
參數(shù) | 描述 |
---|---|
speed | 可選贞言。規(guī)定元素從隱藏到可見的速度(或者相反)斜棚。默認(rèn)為 "normal"「么埃可能的值:毫秒 (比如1500)"slow""normal""fast"在設(shè)置速度的情況下弟蚀,元素在切換的過程中,會逐漸地改變其高度(這樣會創(chuàng)造滑動效果)酗失。 |
callback | 可選义钉。toggle 函數(shù)執(zhí)行完之后,要執(zhí)行的函數(shù)规肴。除非設(shè)置了 speed 參數(shù)捶闸,否則不能設(shè)置該參數(shù)。 |
index()
語法
$(selector).index() //獲得第一個匹配元素相對于其同胞元素的 index 位置拖刃。
$(selector).index(element) //獲得元素相對于選擇器的 index 位置鉴嗤。該元素可以通過 DOM 元素或 jQuery 選擇器來指定。
index() 方法返回指定元素相對于其他指定元素的 index 位置序调。
這些元素可通過 jQuery 選擇器或 DOM 元素來指定醉锅。
注釋:如果未找到元素,index() 將返回 -1发绢。
實例:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($(".hot").index($("#favorite")));
});
});
</script>
</head>
<body>
<p>請點擊下面的按鈕硬耍,以獲得 id="favorite" 的元素相對于 jQuery 選擇器 (class="hot") 的 index:</p>
<button>獲得 index</button>
<ul>
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot" id="favorite">Coffee</li>
</ul>
</body>
展示元素$node, 隱藏元素$node
$(ele).show()
$(ele).hide()
獲取元素$node 的 屬性: id垄琐、src、title经柴, 修改以上屬性
$node.attr('id');//獲取
$node.attr('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改
給$node 添加自定義屬性data-src
$node.data("src",str)
在$ct 內(nèi)部最開頭添加元素$node
$(".ct").prepend(node);
在$ct 內(nèi)部最末尾添加元素$node
$(".ct").append(node);
刪除$node
$node.remove()
把$ct里內(nèi)容清空
$ct.empty()
在$ct 里設(shè)置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
獲取狸窘、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距坯认、包括內(nèi)邊距翻擒、包括邊框、包括外邊距)
$node.width();//不包括內(nèi)邊距寬度,僅包括內(nèi)容
$node.height();//不包括內(nèi)邊距高度,僅包括內(nèi)容
$node.innerWidth();//包括內(nèi)容和內(nèi)邊距寬度
$node.innerHeight();//包括內(nèi)容和內(nèi)邊距高度
$node.outerWidth();//包括內(nèi)容,內(nèi)邊距,邊框?qū)挾?$node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度
$node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度
獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
獲取$node 到根節(jié)點水平牛哺、垂直偏移距離
$node.offset().left
$node.offset().top
修改$node 的樣式陋气,字體顏色設(shè)置紅色,字體大小設(shè)置14px
$node.css({"color":"red","font-size":"14px"})
遍歷節(jié)點引润,把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
console.log($(this).text())
})
從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
獲取$ct 里面的所有孩子
$ct.children()
對于$node巩趁,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子
$node.parents('.ct').children('.panel')
獲取選擇元素的數(shù)量
$(ele).length
$(ele).size()
獲取當(dāng)前元素在兄弟中的排行
$(ele).index();