jQuery知識(shí)點(diǎn)
1 基礎(chǔ)知識(shí)
- jQuery API
- 網(wǎng)站：jQuery庫(kù)網(wǎng)站
- 知識(shí)點(diǎn)解讀
- 原生JS與jQuery代碼放在head標(biāo)簽中的知識(shí)
- 原生JS代碼顺少，放在head標(biāo)簽中憨降，無(wú)法獲取到body中的內(nèi)容糟红，因?yàn)轫?yè)面是由上向下加載娃循，所以不能獲取到body中的內(nèi)容胎围，會(huì)報(bào)錯(cuò)欲低；
- 原生JS代碼，放在head標(biāo)簽中韭畸，需要添加在
window.onload=function(){}中宇智，才能獲取成功，指的是在頁(yè)面加載完事之后胰丁，再執(zhí)行JS代碼普筹； - jQuery代碼，放在head標(biāo)簽中隘马，必須先在head標(biāo)簽中引入jQuery庫(kù)太防，才能使用；
- jQuery代碼，放在head標(biāo)簽中蜒车，也需要放在固定的格式中讳嘱，如：
$(function(){ 代碼 })或$(document).ready(function(){ 代碼 });
-
window.onload=function(){}與$(function(){ 代碼 })的區(qū)別：-
window.onload=function(){}是等頁(yè)面所有的內(nèi)容（圖片、音頻酿愧、視頻沥潭、DOM結(jié)構(gòu)...）都加載完成的時(shí)候，才執(zhí)行JS代碼嬉挡； -
$(function(){ 代碼 })只要DOM結(jié)構(gòu)加載完成钝鸽，就開(kāi)始執(zhí)行JS代碼；
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery驗(yàn)證</title> <script src="jquery/jquery.js"></script> <script> //console.log(oDiv.innerHTML);//會(huì)報(bào)錯(cuò)庞钢，因?yàn)轫?yè)面從上向下進(jìn)行加載拔恰，新進(jìn)行head后進(jìn)行body，所以不會(huì)拿到oDiv基括； window.onload=function () { console.log(oDiv);//結(jié)果為：<div id="div1" class="div1">div1</div> }; //jQuery代碼會(huì)快于上面的原生JS代碼颜懊； $(function () { //以下$(".div1")獲取的是一個(gè)類數(shù)組對(duì)象，不是一個(gè)元素风皿，長(zhǎng)度為1河爹，第一項(xiàng)為元素 console.log($(".div1"));//結(jié)果為：[div#div1.div1, prevObject: jQuery.fn.init(1), context: document, selector: ".div1"] console.log($(".div1")[0]);//結(jié)果為：<div id="div1" class="div1">div1</div> }); $(document).ready(function () { console.log($(".div2,.div1"));//結(jié)果為：[div#div1.div1, div.div2, prevObject: jQuery.fn.init(1), context: document, selector: ".div2,.div1"] }) </script> </head> <body> <div id="div1" class="div1">div1</div> <div class="div2">div2</div> <script> var oDiv=document.getElementById("div1"); </script> </body> </html> - 原生JS與jQuery代碼放在head標(biāo)簽中的知識(shí)
2 jQuery選擇器
- 基本選擇器：
-
$("#div"):查找ID；$(".div"):查找class名桐款；$("div"):查找標(biāo)簽名咸这；$(".div1,.div2"):查找多個(gè)class名； - 獲取的都是類數(shù)組對(duì)象魔眨，里面每一項(xiàng)為元素內(nèi)容媳维；
-
- 代碼驗(yàn)證：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選擇器驗(yàn)證</title> </head> <body> <div class="div1">內(nèi)容：Div1</div> <div class="div2">內(nèi)容：Div2</div> <div class="div3">內(nèi)容：Div3</div> <div class="div4">內(nèi)容：Div4</div> <script src="jquery/jquery.js"></script> <script> //1 獲取第一個(gè)class名為div1的類數(shù)組 console.log($(".div1")); console.log($("div:first")); console.log($("div").first()); console.log($("div:eq(0)")); //以上代碼結(jié)果均為：[div.div1, prevObject: jQuery.fn.init(1), context: document, selector: ".div1"] //2 獲取除了第一個(gè)元素的其他元素 console.log($("div:not(.div1)"));//not是除了哪個(gè)元素； console.log($(".div2,.div3,.div4")); //以上代碼結(jié)果為：[div.div2, div.div3, div.div4, prevObject: jQuery.fn.init(1), context: document, selector: ".div2,.div3,.div4"] //3 奇數(shù)冰沙，偶數(shù) even odd 指的是索引的奇偶 $("div:even").css("backgroundColor","red");//索引為偶數(shù)的元素設(shè)置 $("div:odd").css("backgroundColor","blue");//索引為奇數(shù)的元素設(shè)置 //4 gt(n)大于索引n, lt(n)小于索引n; $("div:gt(1)").css("backgroundColor","yellow");//大于1的索引的元素設(shè)置 $("div:lt(3)").css("backgroundColor","pink");//小于3的索引的元素設(shè)置 </script> </body> </html>
3 jQuery選項(xiàng)卡制作實(shí)例
- 知識(shí)點(diǎn)：每個(gè)方法返回的都是實(shí)例this,所以都能使用原型上的方法
- 代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選項(xiàng)卡實(shí)例</title> <style> *{ margin: 0; padding: 0; list-style: none; } .wrap{ width: 600px; height: 350px; } .wrap button{ width: 200px; height: 50px; text-align: center; line-height: 50px; float: left; } .wrap button.active{ background-color: lightseagreen; } .wrap div{ width: 600px; height: 300px; text-align: center; line-height: 300px; display: none; font-size: 30px; } .wrap div.show{ background-color: lightseagreen; display: block; } </style> </head> <body> <div class="wrap"> <button value="按鈕1" class="active">按鈕1</button> <button value="按鈕2">按鈕2</button> <button value="按鈕3">按鈕3</button> <div class="show">內(nèi)容1</div> <div>內(nèi)容2</div> <div>內(nèi)容3</div> </div> <script src="jquery/jquery.js"></script> <script> $("button").click(function () { $(this).addClass("active").siblings("button").removeClass("active"); $(".wrap div").eq($(this).index()).addClass("show").siblings("div").removeClass("show"); }) </script> </body> </html>
4 取值賦值合體
-
css()- 一個(gè)參數(shù)的時(shí)候：1）參數(shù)為屬性名侨艾，則為獲取屬性值执虹，其中width等含單位的拓挥，會(huì)獲取到單位；2）參數(shù)為對(duì)象袋励，則為設(shè)置一組屬性
- 兩個(gè)參數(shù)的時(shí)候：第一個(gè)為屬性名侥啤，第二個(gè)為屬性值；其中屬性名為width時(shí)茬故，屬性值可以不加單位盖灸；
-
html()- 獲取 html()
- 設(shè)置 html("內(nèi)容")
-
val()獲取設(shè)置同html()- 針對(duì)表單元素的值：input textarea select ；可以通過(guò):input來(lái)獲取所有表單元素磺芭；
-
attr()- 獲取 attr("class")
- 設(shè)置 attr("class","xxx")
5 原生JS與jQuery
- 特性：二者只能共存赁炎，不能混淆；
- 共存：指的是JS和jQuery之間能相互轉(zhuǎn)換
- JS代碼獲取的是一個(gè)標(biāo)簽元素钾腺，而jQuery代碼獲取的是一個(gè)實(shí)例對(duì)象數(shù)組徙垫；數(shù)組中的每一項(xiàng)為標(biāo)簽元素讥裤；
- JS轉(zhuǎn)成jquery: 只需要被
$()包裹即可；如：this => $(this),var oDiv=xxx => $(oDiv); - jQuery轉(zhuǎn)成JS: [index]或get(index)姻报，其中index為索引己英，即數(shù)組中的第幾項(xiàng)；
- 混淆：原生JS只能使用JS的方法吴旋，jQuery只能使用jQuery的方法损肛；
- 原生JS與jQuery共存轉(zhuǎn)換實(shí)例
- 知識(shí)點(diǎn)：jQuery代碼中點(diǎn)擊事件函數(shù)中的
this為原生JS中的標(biāo)簽元素；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>共存實(shí)例</title> <style> .div1{ width: 200px; height: 200px; background-color: red; } </style> </head> <div class="div1"></div> <body> <script src="jquery/jquery.js"></script> <script> //需求：當(dāng)點(diǎn)擊div元素時(shí)荣瑟，讓其背景色變?yōu)辄S色 $(".div1").click(function () { //jQuery中事件函數(shù)中獲取的this為原生JS中的元素標(biāo)簽 console.log(this);//結(jié)果為：<div class="div1"></div> //1 用原生JS設(shè)置顏色 this.style.backgroundColor="yellow"; //2 將原生JS代碼this轉(zhuǎn)化為jQuery代碼治拿，使用jQuery方法 $(this).css("backgroundColor","yellow"); //3 可以將jQuery代碼轉(zhuǎn)化為原生JS代碼，添加[index]或者.get(index) $(this)[0].style.backgroundColor="blue"; //也可以寫成.get(index) $(this).get(0).style.backgroundColor="blue"; //二者可以相互轉(zhuǎn)化褂傀，但是不能混淆使用忍啤，各自使用各自的方法； }) </script> </body> </html> - 知識(shí)點(diǎn)：jQuery代碼中點(diǎn)擊事件函數(shù)中的
- 實(shí)例2：
- 知識(shí)點(diǎn)：jQuery代碼中獲取一組標(biāo)簽元素后仙辟，不用遍歷同波，直接給每一個(gè)元素設(shè)置；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遍歷元素</title> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <div>div5</div> <script src="jquery/jquery.js"></script> <script> //需求：遍歷所有div元素設(shè)置其背景色為紅色 //1 利用原生JS代碼設(shè)置 var aDiv=document.getElementsByTagName("div"); for(var i=0; i<aDiv.length; i++){ aDiv[i].style.backgroundColor="red"; } //2 利用jQuery代碼設(shè)置叠国，不用遍歷未檩，直接設(shè)置； var $aDiv=$("div"); $aDiv.css("backgroundColor","red"); //3 二者共存設(shè)置 var $aDiv=$("div"); for(var i=0; i<$aDiv.length; i++){ //$aDiv為一個(gè)數(shù)組粟焊，里面每項(xiàng)為標(biāo)簽元素冤狡，即$aDiv[i]為標(biāo)簽元素，原生JS $aDiv[i].style.backgroundColor="blue"; //也可以將原生JS標(biāo)簽元素$aDiv[i]轉(zhuǎn)化為jQuery代碼项棠，即用$()包裹起來(lái)悲雳； $($aDiv[i]).css("backgroundColor","pink"); } </script> </body> </html>
6 瀏覽器可視區(qū)域數(shù)據(jù)
- 瀏覽器可視區(qū)域的寬高及卷去的長(zhǎng)度的獲取
- 瀏覽器可視區(qū)域的寬高：
- 原生JS：
utils.win("clientWidth")，utils.win("clientHeight"); - jQuery：
$(window).width(),$(window).height();
- 原生JS：
- 瀏覽區(qū)卷去的長(zhǎng)度：
- 原生JS：
utils.win("scrollTop"),utils.win("scrollLeft"); - jQuery：
$(window).scrollTop(),$(window).scrollLeft;
- 原生JS：
- 瀏覽器可視區(qū)域的寬高：
- 元素ele到body元素的偏移量
- 原生JS：
utils.offset(ele)香追，返回值為一個(gè)對(duì)象：{Left:xxx,Top:xxx}; - jQuery：
$(ele).offset(),返回值為一個(gè)對(duì)象：{left:xxx,top:xxx};
- 原生JS：
7 jQuery中DOM操作
- DOM節(jié)點(diǎn)關(guān)系：
- parent():取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合合瓢。
- 實(shí)例：
$("p").parent()指：查找每個(gè)p元素的父元素；$("p").parent(".selected")指：查找p元素的父元素中每個(gè)類名為selected的父元素透典。
- 實(shí)例：
- parents():取得一個(gè)包含著所有匹配元素的祖先元素的元素集合（不包含根元素）晴楔。可以通過(guò)一個(gè)可選的表達(dá)式進(jìn)行篩選峭咒。
- children():取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有子元素的元素集合税弃。
- next():取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合。
- nextAll():查找當(dāng)前元素之后所有的同輩元素凑队。
- pre():取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合则果。
- prevAll():查找當(dāng)前元素之前所有的同輩元素。
- index():取得當(dāng)前元素的索引值。
- siblings():取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有唯一同輩元素的元素集合西壮〉枷唬可以用可選的表達(dá)式進(jìn)行篩選。
- parent():取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合合瓢。
- DOM動(dòng)態(tài)操作
- 創(chuàng)建元素：
$("<div></div>")或$("<div>") - clone(): 復(fù)制克隆匹配的DOM元素并且選中這些克隆的副本茸时。參數(shù)為boolean值贡定；默認(rèn)值為false：復(fù)制表層；true：深度復(fù)制可都；
- append():向每個(gè)匹配的元素內(nèi)部追加內(nèi)容缓待。主體為元素；
- appendTo():把所有匹配的元素追加到另一個(gè)指定的元素元素集合中渠牲。主體為插入的內(nèi)容旋炒；
- prepend():向每個(gè)匹配的元素內(nèi)部前置內(nèi)容。
- prependTo():把所有匹配的元素前置到另一個(gè)签杈、指定的元素元素集合中瘫镇。
- before():在每個(gè)匹配的元素之前插入內(nèi)容。
- insertBefore():把所有匹配的元素插入到另一個(gè)答姥、指定的元素元素集合的后面铣除。
- after():在每個(gè)匹配的元素之后插入內(nèi)容。
- insertAfter():把所有匹配的元素插入到另一個(gè)鹦付、指定的元素元素集合的后面尚粘。
- replaceWith():將所有匹配的元素替換成指定的HTML或DOM元素。在dom操作中用里面的內(nèi)容替換其他的內(nèi)容敲长，會(huì)發(fā)現(xiàn)替換的內(nèi)容會(huì)移動(dòng)到被替換的內(nèi)容處郎嫁，相當(dāng)于剪切；
- replaceAll():用匹配的元素替換掉所有 selector匹配到的元素祈噪。
- remove():從DOM中刪除所有匹配的元素泽铛，相當(dāng)于自己刪除自己。這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除辑鲤，因而可以在將來(lái)再使用這些匹配的元素盔腔。但除了這個(gè)元素本身得以保留之外，其他的比如綁定的事件遂填，附加的數(shù)據(jù)等都會(huì)被移除铲觉。
- 注意：其中appendTo(), prependTo(), insertBefore(), insertAfter(),和replaceAll(),這幾個(gè)方法成為一個(gè)破壞性操作澈蝙，主體都是被操作的內(nèi)容吓坚，要選擇先前選中的元素，需要使用end()方法灯荧；
- 創(chuàng)建元素：
8 數(shù)據(jù)交互
- jOuery中的ajax請(qǐng)求
- 實(shí)例：表單元素的提交數(shù)據(jù)
- 知識(shí)點(diǎn)：
- type:請(qǐng)求方式礁击，分為get和post，get顯示數(shù)據(jù)，post不顯示哆窿；
- url:請(qǐng)求地址链烈，后臺(tái)數(shù)據(jù)地址；為防止地址相同可以加上隨機(jī)數(shù)和事件戳挚躯；如：
url:"ajax/data.txt?"+Math.random()+new Date().getTime(). - async:是否異步强衡，默認(rèn)為true；
- dataType:返回的數(shù)據(jù)類型码荔；json漩勤，text
- data:向后臺(tái)傳輸?shù)臄?shù)據(jù)；表單元素?cái)?shù)據(jù)可以通過(guò)serialize()方法獲人踅痢越败；表單序列化；
- success:成功后執(zhí)行的函數(shù)硼瓣；
- error:失敗后執(zhí)行的函數(shù)究飞；
- 注意點(diǎn)：1）表單元素提交，必須設(shè)置name屬性堂鲤；2）提交按鈕使用submit亿傅，提交不用設(shè)置data，自動(dòng)獲取提交瘟栖；3）提交按鈕使用button袱蜡，需要添加點(diǎn)擊事件，傳入data數(shù)據(jù)慢宗；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>數(shù)據(jù)交互</title> </head> <body> <form action="https://www.baidu.com/" method="get" target="_blank"> <label for="username"> 用戶名：<input type="text" name="user1" id="username"/> </label><br/> <label for="password"> 密碼：<input type="password" name="passw" id="password"/> </label> <!--<p><input type="submit" value="提交數(shù)據(jù)"/></p>--> <p><input type="button" value="提交數(shù)據(jù)"/></p> </form> <script src="jquery/jquery.js"></script> <script> // 注意：1）只要進(jìn)行表單提交坪蚁，必須設(shè)置name屬性； //1）提交按鈕使用submit镜沽，提交不用設(shè)置data敏晤，自動(dòng)獲取提交 $.ajax({ type:"GET", dataType:"json",//返回的數(shù)據(jù)類型；默認(rèn)情況下是text缅茉，文本格式嘴脾； url:"ajax/data.txt",//請(qǐng)求地址； success:function (val) { var data=val; console.log(data); }, error:function (val) { console.log("獲取失敗") } }); //2）提交按鈕使用button蔬墩，需要添加點(diǎn)擊事件译打，傳入data數(shù)據(jù) $("input[type=button]").click(function () { $.ajax({ //1 請(qǐng)求方式 type:"GET", //2 是否異步 async:true, //3 返回的數(shù)據(jù)類型，json拇颅、text dataType:"json",//返回的數(shù)據(jù)類型奏司；默認(rèn)情況下是text，文本格式樟插；解決了jsonParse的問(wèn)題 //4 data前端向后臺(tái)發(fā)送的數(shù)據(jù)韵洋， //4.1 利用字符串拼接獲取內(nèi)容 //data:`username=${$("#username").val()}&password=${$("#password").val()}`, //4.2 利用serialize()自動(dòng)獲取表單數(shù)據(jù) data:$("form").serialize(), //5 請(qǐng)求地址 url:"ajax/data.txt",//請(qǐng)求地址竿刁； //6 成功后執(zhí)行的函數(shù) success:function (val) { var data=val; console.log(data); }, //7 失敗后執(zhí)行的函數(shù) error:function (val) { console.log("獲取失敗"); } }) }) </script> </body> </html>
9 動(dòng)畫運(yùn)動(dòng)
- show():顯示隱藏的匹配元素。
- hide():隱藏顯示的元素搪缨。
- toggle:用于綁定兩個(gè)或多個(gè)事件處理器函數(shù)食拜，以響應(yīng)被選元素的輪流的 click 事件；如果元素是可見(jiàn)的副编，切換為隱藏的负甸；如果元素是隱藏的，切換為可見(jiàn)的痹届。
- slideUp():通過(guò)高度變化（向上減谢蠡獭）來(lái)動(dòng)態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)短纵。
- slideDown():通過(guò)高度變化（向下增大）來(lái)動(dòng)態(tài)地顯示所有匹配的元素带污，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
- slideToggle():通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性香到，并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)鱼冀。
- fadeIn():通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡入效果，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)
- fadeOut():通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果悠就，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)千绪。
- fadeTo(opacity):把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)梗脾。
- fadeToggle():通過(guò)不透明度的變化來(lái)開(kāi)關(guān)所有匹配元素的淡入和淡出效果荸型，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
- animate(target,duration,effect,callback):創(chuàng)建自定義函數(shù)炸茧。
- stop():停止所有在指定元素上正在運(yùn)行的動(dòng)畫瑞妇。
- delay():設(shè)置一個(gè)延時(shí)來(lái)推遲執(zhí)行隊(duì)列中之后的項(xiàng)目。如：
$(".wrap div").slideDown(3000).delay(2000).fadeOut(2000);即：添加點(diǎn)擊事件后梭冠，div用3秒滑下辕狰，然后延遲2秒后，用2秒淡出控漠；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動(dòng)畫</title>
<style>
.wrap{
width: 300px;
margin: 20px auto;
}
.wrap button{
width: 100%;
height: 50px;
line-height: 50px;
background-color: lightseagreen;
cursor: pointer;
}
.wrap div{
width: 100%;
height: 300px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<button>點(diǎn)擊動(dòng)畫</button>
<div></div>
</div>
<script src="jquery/jquery.js"></script>
<script>
//1 原生JS的原理設(shè)置蔓倍；
var bOk=true;
$(".wrap button").click(function () {
if(bOk){
$(".wrap div").slideDown(3000,function () {
alert(1)
});
}else{
$(".wrap div").slideUp(2000,function () {
alert(1)
});
}
bOk=!bOk;
});
//2 jQuery運(yùn)動(dòng)庫(kù)設(shè)置
$("button").click(function () {
//1) 直接用slideToggle來(lái)實(shí)現(xiàn)滑下滑上
$(".wrap div").slideToggle(3000,function () {
alert(1)
});
//2 分別設(shè)置滑下滑上，可以在中間添加延遲時(shí)間盐捷；
$(".wrap div").stop().slideDown(3000).delay(3000).slideUp(5000);
})
</script>
</body>
</html>
10 事件
- 點(diǎn)擊事件：click
- 在原生JS中偶翅，同一個(gè)元素添加同一個(gè)事件，事件只能發(fā)生一個(gè)碉渡，會(huì)被覆蓋聚谁；因原生JS中，事件為0級(jí)事件爆价；
<script> //1 原生JS中事件為0級(jí)事件垦巴，給同一個(gè)元素添加同一個(gè)事件時(shí)，會(huì)被覆蓋铭段； var oDiv=document.getElementsByTagName("div")[0]; oDiv.onclick=function () { alert(1);//不會(huì)彈出 }; oDiv.onclick=function () { alert(2);//會(huì)彈出 } </script>- jQuery代碼中骤宣，可以對(duì)同一個(gè)元素添加同一個(gè)事件；
<script> //2 jQuery中的點(diǎn)擊事件:多個(gè)事件都會(huì)彈出 $("div").click(function () { alert(1); }); $("div").click(function () { alert(2); }); </script> - 綁定事件：on
- 代碼：
on("click",fn);fn可以是匿名函數(shù) - on可以綁定多個(gè)事件序愚；
- 代碼：
- 解除事件：off
- 代碼：
off("click",fn);fn不能是匿名函數(shù)憔披，要與on相對(duì)應(yīng)；
<script> function fn1(){ alert(1); } function fn2(){ alert(2); } function fn3(){ alert(3); } $("div").on("click",fn1); $("div").on("click",fn2); $("div").on("click",fn3); $("div").off("click",fn1);//解除fn1爸吮，不會(huì)彈出1芬膝； </script> - 代碼：
- 添加一次：one
- 代碼：
one("click",fn1),只添加一次點(diǎn)擊事件 - 點(diǎn)擊一次后，再點(diǎn)擊的時(shí)候不會(huì)發(fā)生形娇；
- 代碼：
11 插件
- 工具方法：給jQuery類添加靜態(tài)屬性锰霜，類調(diào)用執(zhí)行
- 插件chajian1代碼：
//靜態(tài)方法的添加：直接給類添加靜態(tài)屬性 $.extend({ tab:function (ele) { $(ele).find("button").click(function () { $(this).addClass("active").siblings("button").removeClass("active"); $(ele).find("div").eq($(this).index()).addClass("show").siblings("div").removeClass("show"); }) } }); - 實(shí)例方法：給jQuery類的原型上添加屬性方法；實(shí)例調(diào)用執(zhí)行桐早；
- 插件chajian2代碼：
//給jQuery原型上添加方法 $.prototype.extend({ tab1: function () { var $aBtn = this.find("button"); var $aDiv = this.find("div"); $aBtn.click(function () { $(this).addClass("active").siblings("button").removeClass("active"); $aDiv.eq($(this).index()).addClass("show").siblings("div").removeClass("show"); }) } }) - 調(diào)用執(zhí)行代碼：
<body> <div class="wrap" id="tab1"> <button value="按鈕1" class="active">按鈕1</button> <button value="按鈕2">按鈕2</button> <button value="按鈕3">按鈕3</button> <div class="show">內(nèi)容1</div> <div>內(nèi)容2</div> <div>內(nèi)容3</div> </div> <div class="wrap" id="tab2"> <button value="按鈕1" class="active">按鈕1</button> <button value="按鈕2">按鈕2</button> <button value="按鈕3">按鈕3</button> <div class="show">內(nèi)容1</div> <div>內(nèi)容2</div> <div>內(nèi)容3</div> </div> <script src="jquery/jquery.js"></script> <script src="js/chajian.js"></script> <script src="js/chajian2.js"></script> <script> //1 工具方法：給$添加靜態(tài)屬性癣缅，類調(diào)用執(zhí)行； $.tab($("#tab1")); //2 實(shí)例原型上添加方法哄酝，實(shí)例調(diào)用執(zhí)行 $("#tab1").tab1(); $("#tab2").tab1(); </script> </body>
