目錄

一.動(dòng)畫(huà)

1. 默認(rèn)顯示和隱藏方式

2. 滑動(dòng)顯示和隱藏方式

3. 淡入淡出顯示和隱藏方式

二.遍歷

1. js的遍歷方式

2. jq的遍歷方式

三. 事件綁定

1. jquery標(biāo)準(zhǔn)的綁定方式

2. on綁定事件/off解除綁定

3. 事件切換：toggle

四. 插件：增強(qiáng)JQuery的功能

---

一.動(dòng)畫(huà)

1. 默認(rèn)顯示和隱藏方式

1. show([speed,[easing],[fn]])

????????1. speed：動(dòng)畫(huà)的速度。三個(gè)預(yù)定義的值("slow","normal", "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
?? ??? ??2. easing：用來(lái)指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"
?? ??? ??? ??? ??? ??? ?* swing：動(dòng)畫(huà)執(zhí)行時(shí)效果是 先慢，中間快，最后又慢
?? ??? ??? ??? ??? ??? ?* linear：動(dòng)畫(huà)執(zhí)行時(shí)速度是勻速的
? ? ? ? ?3. fn：在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次

2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])

2. 滑動(dòng)顯示和隱藏方式

1. slideDown([speed],[easing],[fn])

2. slideUp([speed,[easing],[fn]])

3. slideToggle([speed],[easing],[fn])

3. 淡入淡出顯示和隱藏方式

1. fadeIn([speed],[easing],[fn])

2. fadeOut([speed],[easing],[fn])

3. fadeToggle([speed,[easing],[fn]])

二.遍歷

1. js的遍歷方式

for(初始化值;循環(huán)結(jié)束條件;步長(zhǎng))

2. jq的遍歷方式

1. jq對(duì)象.each(callback)

? ? ? ? ? ? 1. 語(yǔ)法：
?? ??? ??? ??? ?jquery對(duì)象.each(function(index,element){});
?? ??? ??? ??? ??? ?* index:就是元素在集合中的索引
?? ??? ??? ??? ??? ?* element：就是集合中的每一個(gè)元素對(duì)象

?? ??? ??? ??? ??? ?* this：集合中的每一個(gè)元素對(duì)象
?? ??? ??? ?2. 回調(diào)函數(shù)返回值：
?? ??? ??? ??? ?* true:如果當(dāng)前function返回為false，則結(jié)束循環(huán)(break)。
?? ??? ??? ??? ?* false:如果當(dāng)前function返回為true，則結(jié)束本次循環(huán)，繼續(xù)下次循環(huán)(continue)

? ? ? ? ? ? 3.例子：

//2. jq對(duì)象.each(callback)var citys = $("#city li");citys.each(function (index,element) {//3.1 獲取li對(duì)象 第一種方式 this//alert(this.innerHTML);//alert($(this).html());//3.2 獲取li對(duì)象 第二種方式 在回調(diào)函數(shù)中定義參數(shù) index（索引） element（元素對(duì)象）//alert(index+":"+element.innerHTML);//alert(index+":"+$(element).html());//判斷如果是上海，則結(jié)束循環(huán)if("上海" == $(element).html()){//如果當(dāng)前function返回為false，則結(jié)束循環(huán)(break)。//如果返回為true，則結(jié)束本次循環(huán)，繼續(xù)下次循環(huán)(continue)return true;}alert(index+":"+$(element).html());});

??2. $.each(object, [callback])

//3 $.each(object, [callback])$.each(citys,function () {alert($(this).html());});

? 3. for..of: jquery 3.0 版本之后提供的方式
?? ??? ??? ?for(元素對(duì)象 of 容器對(duì)象)

三. 事件綁定

1. jquery標(biāo)準(zhǔn)的綁定方式

* jq對(duì)象.事件方法(回調(diào)函數(shù))；
?? ??? ?* 注：如果調(diào)用事件方法，不傳遞回調(diào)函數(shù)，則會(huì)觸發(fā)瀏覽器默認(rèn)行為。
?? ??? ??? ?* 表單對(duì)象.submit();//讓表單提交

//1.獲取name對(duì)象，綁定click事件$("#name").click(function () {alert("我被點(diǎn)擊了...")});

2. on綁定事件/off解除綁定

* jq對(duì)象.on("事件名稱",回調(diào)函數(shù))
?? ??? ?* jq對(duì)象.off("事件名稱")
?? ??? ??? ?* 如果off方法不傳遞任何參數(shù)，則將組件上的所有事件全部解綁

$(function () {//1.使用on給按鈕綁定單擊事件 click$("#btn").on("click",function () {alert("我被點(diǎn)擊了。。。")}) ;//2. 使用off解除btn按鈕的單擊事件$("#btn2").click(function () {//解除btn按鈕的單擊事件//$("#btn").off("click");$("#btn").off();//將組件上的所有事件全部解綁});});

3. 事件切換：toggle

* jq對(duì)象.toggle(fn1,fn2...)
?? ??? ??? ?* 當(dāng)單擊jq對(duì)象對(duì)應(yīng)的組件后，會(huì)執(zhí)行fn1.第二次點(diǎn)擊會(huì)執(zhí)行fn2.....
?? ??? ??? ?
?? ??? ?* 注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復(fù)此功能。
?? ??? ??? ? <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

$(function () {//獲取按鈕，調(diào)用toggle方法$("#btn").toggle(function () {//改變div背景色backgroundColor 顏色為 green$("#myDiv").css("backgroundColor","green");},function () {//改變div背景色backgroundColor 顏色為 pink$("#myDiv").css("backgroundColor","pink");});});

四. 插件：增強(qiáng)JQuery的功能

1. 實(shí)現(xiàn)方式：
?? ??? ?1. $.fn.extend(object)?
?? ??? ??? ?* 增強(qiáng)通過(guò)Jquery獲取的對(duì)象的功能 ?$("#id")
?? ??? ?2. $.extend(object)
?? ??? ??? ?* 增強(qiáng)JQeury對(duì)象自身的功能 ?$/jQuery

<script type="text/javascript">//使用jquery插件 給jq對(duì)象添加2個(gè)方法 check()選中所有復(fù)選框，uncheck()取消選中所有復(fù)選框//1.定義jqeury的對(duì)象插件$.fn.extend({//定義了一個(gè)check()方法。所有的jq對(duì)象都可以調(diào)用該方法check:function () {//讓復(fù)選框選中//this:調(diào)用該方法的jq對(duì)象this.prop("checked",true);},uncheck:function () {//讓復(fù)選框不選中this.prop("checked",false);}});$(function () {// 獲取按鈕//$("#btn-check").check();//復(fù)選框?qū)ο?check();$("#btn-check").click(function () {//獲取復(fù)選框?qū)ο?("input[type='checkbox']").check();});$("#btn-uncheck").click(function () {//獲取復(fù)選框?qū)ο?("input[type='checkbox']").uncheck();});});</script>

總結(jié)

以上是生活随笔為你收集整理的JQuery高级的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。