jQuery是一個(gè)實(shí)用的JavaScript函數(shù)庫(kù)，jQuery極大地簡(jiǎn)化了JS對(duì)DOM的操作，封裝并實(shí)現(xiàn)的一系列常用的方法。
10年積累的網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有揭陽(yáng)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
jQuery庫(kù)封裝了JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和Ajax交互。
其實(shí)除了jQuery，還有許許多多的開(kāi)源好用的JavaScript庫(kù)，只不過(guò)jQuery較為流行，使用廣泛所以要著重了解和學(xué)習(xí)
jQuery的選擇機(jī)制構(gòu)建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強(qiáng)化了JavaScript中獲取頁(yè)面元素的方式。
jQuery中內(nèi)置了一系列的動(dòng)畫(huà)效果，可以開(kāi)發(fā)出非常漂亮的網(wǎng)頁(yè)，許多網(wǎng)站都使用jQuery的內(nèi)置的效果，比如淡入淡出、元素移除等動(dòng)態(tài)特效。
AJAX是異步的JavaScript和XML的簡(jiǎn)稱，可以開(kāi)發(fā)出非常靈敏無(wú)刷新的網(wǎng)頁(yè)，特別是開(kāi)發(fā)服務(wù)器端網(wǎng)頁(yè)時(shí)，比如PHP網(wǎng)站，需要往返地與服務(wù)器通信，如果不使用AJAX，每次數(shù)據(jù)更新不得不重新刷新網(wǎng)頁(yè)，而使用AJAX特效后，可以對(duì)頁(yè)面進(jìn)行局部刷新，提供動(dòng)態(tài)的效果。
jQuery提供了對(duì)基本JavaScript結(jié)構(gòu)的增強(qiáng)，比如元素迭代和數(shù)組處理等操作。
jQuery提供了各種頁(yè)面事件，它可以避免程序員在HTML中添加太多事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問(wèn)題。
jQuery可以修改網(wǎng)頁(yè)中的內(nèi)容，比如更改網(wǎng)頁(yè)的文本、插入或者翻轉(zhuǎn)網(wǎng)頁(yè)圖像，jQuery簡(jiǎn)化了原本使用JavaScript代碼需要處理的方式。
上文提到j(luò)Query是一個(gè)實(shí)用的JavaScript函數(shù)庫(kù)，那么引入jQuery就和引入一個(gè)JavaScript文件的方式相同，通常是外部引入
jQuery文件可以從jQuery的官網(wǎng)下載或者其他第三方網(wǎng)站下載到不同的版本，引入到HTML頁(yè)面后即可使用
jQuery的基本設(shè)計(jì)和主要用法，就是"選擇某個(gè)網(wǎng)頁(yè)元素，然后對(duì)其進(jìn)行某種操作"
jQuery 語(yǔ)法是通過(guò)選取 HTML 元素，并對(duì)選取的元素執(zhí)行某些操作
基礎(chǔ)語(yǔ)法： $(selector).action()
等著DOM結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部
資源加載完成，jQuery幫我們完成了封裝。
第一種方法
重慶分公司
重慶分公司
$(document).ready(function(){
...//此處是頁(yè)面DOM加載完成的入口
});
第二種方法
$(function(){
...//此處是頁(yè)面DOM加載完成的入口
});
$是jQuery的另外一個(gè)名稱
$(function(){
alert(111)
})//alert(111)
jQuery(function(){
alert(111)
})
$是jQuery中的頂級(jí)對(duì)象（可以把元素包裝成我們的jQuery對(duì)象）
$('div').hide();
DOM對(duì)象：用原生js獲取過(guò)來(lái)的對(duì)象就是DOM對(duì)象
var myDiv=document.querySelector('div');
jQuery對(duì)象：用jquery方式獲取過(guò)來(lái)的對(duì)象是jQuery對(duì)象。本質(zhì)：通過(guò)$符把元素進(jìn)行了封裝
$('div');
jQuery對(duì)象只能使用jQuery方法，DOM對(duì)象則使用原生的JavaScript方法和屬性
兩者之間可以相互轉(zhuǎn)換
DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象
直接獲取div，得到的就是jQuery對(duì)象
$('div');
已經(jīng)使用原生的js獲取過(guò)來(lái)DOM
var myDiv=document.querySelector('div');
$(myDiv);
jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象
$('div')[0].function();
$('div').get(0).function();
$("選擇器") //里面選擇器直接寫(xiě)CSS選擇器即可，要加引號(hào)
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $("#id") | 獲取指定id的元素 |
| 全選選擇器 | $("*") | 匹配所有的元素 |
| 類選擇器 | $(".class") | 獲取同一類class的元素 |
| 標(biāo)簽選擇器 | $("div") | 獲取同一標(biāo)簽的所有元素 |
| 并集選擇器 | $("div,p,li") | 獲取多個(gè)元素 |
| 交集選擇器 | $("li,current") | 交集元素 |
| 子代選擇器 | $("ul>li") | 使用>號(hào)，獲取親兒子層級(jí)的元素；注意，并不會(huì)獲取孫子層級(jí)的元素 |
| 后代選擇器 | $(“ul li”) | 使用空格，選擇后代選擇器，獲取ul下的所有l(wèi)i元素，包括孫子等。 |
jQuery隱式迭代
隱式迭代就是把匹配的所有元素內(nèi)部進(jìn)行遍歷循環(huán)，給每一個(gè)元素添加css這個(gè)方法
給匹配到的所有元素進(jìn)行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不是我們?cè)龠M(jìn)行循環(huán)，簡(jiǎn)化我們的操作，方便我們調(diào)用。
1
2
3
jQuery篩選選擇器
| 語(yǔ)法 | 用法 | 描述 |
|---|---|---|
| :first | $("li:first") | 獲取第一個(gè)li元素 |
| :last | $("li:last") | 獲取最后一個(gè)選擇器 |
| :eq(index) | $(li:eq(2)) | 獲取到的li元素中，選擇索引號(hào)為2的元素，索引號(hào)index從0開(kāi)始 |
| :odd | $("li:odd") | 獲取到的li元素中，選擇索引號(hào)為奇數(shù)的元素 |
| :even | $("li:even") | 獲取到的li元素中，選擇索引號(hào)為偶數(shù)的元素 |
| 語(yǔ)法 | 用法 | 說(shuō)明 |
|---|---|---|
| parent() | $("li").parent(); | 查找父級(jí)，最近一級(jí) |
| parents() | $("li").parents("選擇器"); | 查找指定祖先父級(jí) |
| children(selector) | $("ul").children("li") | 相當(dāng)于$("ul>li"),最近一級(jí)（親兒子） |
| find(selector) | $("ul").find("li") | 相當(dāng)于$("ul li"),后代選擇器 |
| siblings(selector) | $(".first").siblings("li") | 查找兄弟節(jié)點(diǎn)，不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll() | 查找當(dāng)前元素之后所有的同輩元素 |
| prevAll([expr]) | $(".last").prevAll() | 查找當(dāng)前元素之前的所有同輩元素 |
| hasClass(class) | $('div').hasClass("protected") | 檢查當(dāng)前的元素是否含有某個(gè)特定的類 |
| eq(index) | $("li").eq(2) | 相當(dāng)于$("li:eq(2)"),index從0開(kāi)始 |
$(".son").parent();
$('.nav').children("p").css("color","red");
$('.nav').find("p").css("color","red");
$(".content div").eq(index).siblings().hide();
$(".content div").eq(index).show();
操作css方法
jQuery可以使用css方法來(lái)修改簡(jiǎn)單元素樣式；也可以操作類，修改多個(gè)樣式
參數(shù)只寫(xiě)屬性名，則返回屬性值
$("div").css("width")
參數(shù)是屬性名，屬性值，逗號(hào)分離，是設(shè)置一組樣式，屬性必須加引號(hào)，值如果是數(shù)字可以不用跟單位和引號(hào)
$("div").css("width","500px")
參數(shù)可以是對(duì)象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號(hào)隔開(kāi)，屬性可以不用加引號(hào)
$("div").css({
"width":"500",
"height":"1000"
})
設(shè)置類樣式方法
添加類
$("div").click(function(){
$(this).addClass("current");
})
刪除類
$("div").click(function(){
$(this).removeClass("current");
})
切換類
$("div").click(function(){
$(this).toggleClass("current");
})
類操作與className操作
原生JS中className會(huì)覆蓋元素原先里面的類名。
jQuery里面類操作只是對(duì)指定類進(jìn)行操作，不影響原先的類名
顯示隱藏
show()
show([speed,[easing],[fn]])
顯示參數(shù)
(1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("button").eq(0).click(function(){
$("div").show(1000,function(){
alert(12)
})
});
hide()
hide([speed,[easing],[fn]])
隱藏參數(shù)
(1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("button").eq(1).click(function(){
$("div").hide(1000,function(){
alert(1)
})
});
toggle()
toggle([speed,[easing],[fn]])
切換參數(shù)
(1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("button").eq(2).click(function(){
$("div").toggle(1000,function(){
alert(1)
});
滑動(dòng)
slideDown()
slideDown([speed,[easing],[fn]])
(1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").slideDown(1000);
slideUp()
slideUp([speed,[easing],[fn]])
(1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").slideUp(1000);
slideToggle()
slideToggle([speed,[easing],[fn]])
1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").slideToggle(1000);
事件切換（就是鼠標(biāo)經(jīng)過(guò)和離開(kāi)的復(fù)合寫(xiě)法）
hover([over],out)
(1)over：鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）
(2)out：鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）
$("button").eq(2).hover(function(){
$("div").slideUp(1000);
},function(){
$("div").slideDown(1000);
});
//相當(dāng)于
$("button").eq(2).hover(function(){
$("div").slideToggle(1000);
});
動(dòng)畫(huà)隊(duì)列及其停止排隊(duì)方法
動(dòng)畫(huà)或效果隊(duì)列
動(dòng)畫(huà)或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就會(huì)造成多個(gè)動(dòng)畫(huà)或者效果隊(duì)列
停止排隊(duì)
stop()
(1)stop()方法用于停止動(dòng)畫(huà)或效果
(2)注意：stop()寫(xiě)到動(dòng)畫(huà)或者效果前面，相當(dāng)于停止結(jié)束上一次的動(dòng)畫(huà)
$("div").stop().slideToggle(1000);
淡入淡出
fadeIn()
fadeIn([speed,[easing],[fn]])
1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").stop().fadeIn(1000);
fadeOut()
fadeOut([speed,[easing],[fn]])
1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").stop().fadeOut(1000);
fadeToggle()
fadeToggle([speed,[easing],[fn]])
1)參數(shù)可以省略，無(wú)動(dòng)畫(huà)直接顯示
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
$("div").stop().fadeToggle(1000);
fadeTo()
fadeTo([[speed],opacity,[easing],[fn]])
(1)opacity透明度必須寫(xiě)，取值0-1之間
(2)speed:三種預(yù)定速度之一的字符串（“show”，“normal”，or “fast”）或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值（如：1000）。必須寫(xiě)
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。
$("div").stop().fadeTo(1000,0.5);
自定義動(dòng)畫(huà)
animate()
animate(params,[speed],[easing],[fn])
參數(shù)
(1)params:想要更改的樣式屬性，以對(duì)像形式傳遞，必須寫(xiě)。屬性名可以不帶引號(hào)，如果是復(fù)合屬性采用駝峰命名法borderLeft。其余參數(shù)都可以省略
(2)speed:三種預(yù)定速度之一的字符串("slow","normal",or"fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值
(3)easing:(Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”
(4)fn:回調(diào)函數(shù),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次
//手風(fēng)琴效果
$(function(){
$(".king li").mouseenter(function(){
$(this).stop().animate({
width:200
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings("li").stop().animate({
width:100
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
設(shè)置或獲取元素固有屬性值
元素固有屬性就是元素自帶的屬性，比如a元素里面的href，比如input元素里面的type
獲取屬性方法
prop("屬性")
設(shè)置屬性語(yǔ)法
prop("屬性","屬性值")
$("input").prop("checked")
$("a").prop("title","wwww");
元素的自定義屬性
用戶自己給元素添加的屬性，我們稱之為自定義屬性。比如給div添加index=“1”
獲取屬性語(yǔ)法
attr("屬性") //類似原生getAttribute()
設(shè)置屬性語(yǔ)法
attr("屬性","屬性值") //類似原生setAttribute()
該方法也可以獲取H5自定義屬性
$("div").attr("index")
$("div").attr("index","34")
數(shù)據(jù)緩存data()
data()方法可以在指定的元素上存取數(shù)據(jù)，并不會(huì)修改DOM元素結(jié)構(gòu)。一旦頁(yè)面刷新，之氣那存放的數(shù)據(jù)都將會(huì)被刪除
附加數(shù)據(jù)語(yǔ)法
data("name","value") //向被選元素附加數(shù)據(jù)
獲取數(shù)據(jù)語(yǔ)法
data("name") //向被選元素獲取數(shù)據(jù)
同時(shí)，還可以讀取HTML5自定義屬性data-index，得到的是數(shù)字型
$("span").data("uname","andy");
$("span").data("uname")
普通元素內(nèi)容html()(相當(dāng)于原生innerHTML)
html() //獲取元素內(nèi)容
html("內(nèi)容") //設(shè)置元素內(nèi)容
$("div").html();//獲取元素內(nèi)容
$("div").html("123");//設(shè)置元素內(nèi)容
普通元素文本內(nèi)容text()（相當(dāng)于原生innerText）
text() //獲取元素內(nèi)容
text("內(nèi)容") //設(shè)置元素內(nèi)容
$("div").text(); //獲取元素內(nèi)容
$("div").text("123"); //設(shè)置元素內(nèi)容
設(shè)置表單值 val()
val() //獲取表單值
val("內(nèi)容") //設(shè)置表單內(nèi)容
$("input").val(); //獲取表單值
$("input").val("123"); //設(shè)置表單內(nèi)容
tofixed(index)(保留幾位小數(shù)方法)
(p*n).toFixed(2)//保留兩位小數(shù)
jQuery尺寸
| 語(yǔ)法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素寬度和高度值 只算width/height |
| innerWidth()/innerHeight() | 取得匹配元素寬度和高度值 包含padding |
| outerWidth()/outerHeight() | 取得匹配元素寬度和高度值 包含padding、border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素寬度和高度值包含padding、borde、margin |
div{
width: 200px;
height: 200px;
background-color: aqua;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
$("div").width(500)
console.log($("div").width()); //500
console.log($("div").innerWidth());//520
console.log($("div").outerWidth());//550
console.log($("div").outerWidth(true));//590
jQuery位置
位置主要有三個(gè)：offset()、position、scrollTop()/scrollLeft()
offset()
offset()設(shè)置或返回被選元素相對(duì)于文檔的偏移坐標(biāo)，跟父級(jí)沒(méi)有關(guān)系
該方法有2個(gè)屬性left、top。offset().top用于獲取距離文檔頂部的距離，offset().left用于獲取距離文檔左側(cè)的距離。
可以設(shè)置元素的偏移：offset({top:10,left:30})
position()
position方法用于返回被選元素相對(duì)于帶有定位的父級(jí)偏移坐標(biāo)，如果父級(jí)都沒(méi)有定位，則以文檔為準(zhǔn)。
scrollTop()/scrollLeft()
scrollTop()方法設(shè)置或返回被選元素被卷去的頭部或左側(cè)。
遍歷元素
JQuery隱式迭代對(duì)同一類元素做出了同樣的操作。如果想要給同一類元素做不同操作，就需要用到遍歷
語(yǔ)法1
$("div").each(function(index,domEle){xxx;})
each()方法遍歷匹配的每一個(gè)元素。主要用DOM處理。each每一個(gè)
里面的回調(diào)函數(shù)有2個(gè)參數(shù)：index是每個(gè)元素的索引號(hào)，demEle是每個(gè)DOM元素對(duì)象，不是jQuery對(duì)象
想用jQuery方法，需要給這個(gè)dom元素轉(zhuǎn)換為jquery對(duì)象
var arr=["red","blue","pink"]
$(function(){
$("div").each(function(index,domEle){
$(domEle).css("color",arr[index])
})
})
語(yǔ)法2
$.each(object,function(index,element){xxx;})
創(chuàng)建元素
$("")
$("- 我是后來(lái)創(chuàng)建的li
")
動(dòng)態(tài)的創(chuàng)建了一個(gè)
添加元素
內(nèi)部添加
element.append("內(nèi)容")
$("ul").append(li)//放到內(nèi)容的最后面
$("ul").prepend(li)//放到內(nèi)容的最前面
把內(nèi)容放入匹配元素內(nèi)部的后面，類似于原生appendChild
外部添加
element.after("內(nèi)容") //把內(nèi)容放入目標(biāo)元素后面
$(".test").after(div) //把內(nèi)容放入目標(biāo)元素后面
element.before("內(nèi)容") //把內(nèi)容放入目標(biāo)元素前面
$(".test").before(div) //把內(nèi)容放入目標(biāo)元素前面
刪除元素
element.remove() //刪除匹配的元素（本身）
$("ul").remove()
element.empty() //可以刪除匹配的元素里面的子節(jié)點(diǎn) 孩子
$("ul").empty();
element.html() //可以刪除匹配元素里面的子節(jié)點(diǎn) 孩子
$("ul").html();
$(".p-action a").click(function(){
$(this).parents(".cart").remove();
})
事件注冊(cè)
單個(gè)事件注冊(cè)
element.事件(function(){})
$("div").click(function(){事件處理程序})
其他事件和原生基本一致
比如，mouseover、mouseout、blur、focus等
事件處理
on()綁定事件
element.on(events,[selector],fn)
1.events:一個(gè)或多個(gè)用空格分隔的事件類型，如"click"或“keydown”、
2.selector：元素的子元素選擇器
3.fn:回調(diào)函數(shù) 即綁定在元素身上的偵聽(tīng)函數(shù)
//事件處理不同的
$("div").on({
click:function(){
$("div").css("background","black")
},
mouseover:function(){
$("div").css("background","pink")
}
})
//事件處理相同的
$("div").on("mouseover mouseout",function(){
$(this).toggleClass("togg");
})
$('ul').on('click','li',function(){
alert('hello world!');
})
動(dòng)態(tài)創(chuàng)建的元素，click()沒(méi)有辦法綁定事件，on()可以給動(dòng)態(tài)生成的元素綁定事件
$("ul").on("click","li",function(){
alert(11)
})
var li=$("- 我是后來(lái)的
")
$("ul").append(li);
如果有的事件只想觸發(fā)一次，可以使用one()來(lái)綁定事件
$('ul').one('click','li',function(){
alert('hello world!');
})
自動(dòng)觸發(fā)事件
有些事件希望自動(dòng)觸發(fā)，比如輪播圖自動(dòng)播放功能跟點(diǎn)擊右側(cè)按鈕一致?？梢岳枚〞r(shí)器自動(dòng)觸發(fā)右側(cè)按鈕點(diǎn)擊事件，不必鼠標(biāo)點(diǎn)擊觸發(fā)
$("div").click();//第一種簡(jiǎn)寫(xiě)形式 元素.事件() 會(huì)觸發(fā)元素的默認(rèn)行為
$("div").trigger("click");//第二種自動(dòng)觸發(fā)方式 會(huì)觸發(fā)元素的默認(rèn)行為
$("div").triggerHandler("click");//第三種自動(dòng)觸發(fā)方式 不會(huì)觸發(fā)元素的默認(rèn)行為
事件處理解綁
事件解綁off()
$("div").off() //解除了div身上的所有事件
$("div").off("click"); //解除了div身上的點(diǎn)擊事件
$("ul").off("click","li") //解除事件委托
事件對(duì)象
事件被觸發(fā)，就會(huì)有事件對(duì)象的產(chǎn)生
element.on(events,[selector],function(event){})
阻止默認(rèn)行為：event.preventDefault()或者return false
阻止冒泡：event.stopPropagation()
如果想要把某個(gè)對(duì)象拷貝(合并)給另外一個(gè)對(duì)象使用，此時(shí)可以用$.extend()方法
語(yǔ)法：
$.extend([deep],target,object1,[objectN])
deep:如果設(shè)true為深拷貝，默認(rèn)為false淺拷貝
target:要拷貝的對(duì)象
object1:待拷貝到第一個(gè)對(duì)象的對(duì)象
objectN:待拷貝到第N個(gè)對(duì)象的對(duì)象
淺拷貝是把被拷貝的對(duì)象復(fù)雜數(shù)據(jù)類型中的地址拷貝給目標(biāo)對(duì)象，修改目標(biāo)對(duì)象會(huì)影響被拷貝對(duì)象
深拷貝，前面加true，完全克隆（拷貝的對(duì)象，而不是地址），修改目標(biāo)對(duì)象不會(huì)影響被拷貝對(duì)象。
var targetObj={
id:1
};
var obj={
id:1,
name:"andy"
};
$.extend(targetObj,obj);//淺拷貝
$.extend(true,targetObj,obj);//深拷貝
jQuery使用$作為表示符，隨著jQuery的流行，其他js庫(kù)也會(huì)用這$作為標(biāo)識(shí)符，這樣一起使用會(huì)引起沖突
需要一個(gè)解決方案，讓jQuery和其他的js庫(kù)不存在沖突，可以同時(shí)存在，這就叫多庫(kù)共存
解決方案：
把里面的$符號(hào)統(tǒng)一改為jQuery。比如jQuery("div")
jQuery變量規(guī)定新的名稱：$noConflict() var xx=$.noConflict()
jQuery功能比較有限，想要更復(fù)雜的特效效果，可以借助jQuery插件完成
jQuery插件使用步驟
常用插件：
瀑布流
圖片懶加載（圖片使用延遲加載在可提高網(wǎng)頁(yè)下載速度。也能幫助減輕服務(wù)器負(fù)載，當(dāng)我們頁(yè)面滑動(dòng)到可視區(qū)域，再顯示圖片）
全屏滾動(dòng)
中文翻譯網(wǎng)站：http://www.dowebok.com/demo/2014/77/
Bootstrap JS 插件：
bootstrap框架也是依賴于jQuery開(kāi)發(fā)的，因此里面的js插件使用，也必須引入jQuery文件
