熟練掌握以下內(nèi)容，jquery 你已經(jīng)會(huì)使用一大半了吐辙，當(dāng)然其中原理當(dāng)我們慢慢深入自會(huì)心領(lǐng)神會(huì)社付，融會(huì)貫通。
一. 選擇器
1. $("#div1") => 根據(jù)元素的id屬性值來查找節(jié)點(diǎn)(id選擇器)
2. $(".div1") => 根據(jù)元素的class屬性值來查找節(jié)點(diǎn)(class選擇器)
3. $(".div1, p") => 將每一個(gè)選擇器匹配到的元素合并后一起返回(群組選擇器)
4. $(".div1 ul li") => 查找祖先元素下匹配所有的后代元素(結(jié)構(gòu)選擇器)
5. $(".div1 > ul > li") => 查找給定的父元素下匹配所有的子元素(結(jié)構(gòu)選擇器)
6. $(".div1 ul li:eq(1)") => 查找一個(gè)給定索引值的元素(索引值是從0開始)
7. $('input[name="user"]') => 根據(jù)元素的屬性來查找元素
8. $(".div1:visible") => 查找所有的可見元素
9. $("input:checked") => 選中的表單控件
10. $("select option:selected") => 匹配所有選中的option元素
二. 篩選
1. $("div").eq(1) => 獲取第N個(gè)元素(從0開始)
2. $("li").first() => 獲取第一個(gè)元素
3. $("li").last() => 獲取最后一個(gè)元素
4. $(".div1").hasClass("selected") => 判斷元素是否有指定的類 有返回true或false
5. $(".div1").children() => 返回所有的子元素客峭，參數(shù)可以是一個(gè)選擇器，會(huì)對(duì)子元素進(jìn)行篩選
6. $(".div1").find("span") => 獲取.div1節(jié)點(diǎn)下的所有的span元素(后代元素)
7. $(".div1").next() => 獲取下一個(gè)兄弟節(jié)點(diǎn)
8. $(".div1").nextAll() => 獲取下邊所有的兄弟節(jié)點(diǎn)
9. $(".div1").prev() => 獲取上一個(gè)兄弟節(jié)點(diǎn)
10. $(".div1").prevAll() => 獲取上邊所有的兄弟節(jié)點(diǎn)
11. $(".div1").siblings() => 獲取.div1元素所有的兄弟節(jié)點(diǎn)
12. $(".div1").parent() => 查找.div1元素的父節(jié)點(diǎn)
13. $(".div1").parents("選擇器") => 返回指定的祖先元素
14. $(".div1").find("p").end() => 將匹配的元素列表變?yōu)樯弦淮蔚臓顟B(tài)
三. CSS
1. $(".div1").css({...}) => 設(shè)置元素css樣式抡柿，同時(shí)設(shè)置多個(gè)
2. $(".div1").width() => 獲取元素內(nèi)容的寬度(不包含padding和border)舔琅，傳參數(shù)表示設(shè)置
3. $(".div1").innerWidth() => 獲取元素可視區(qū)的寬度(不包含border)，傳參數(shù)表示設(shè)置
4. $(".div1").outerWidth() => 獲取元素盒模型的寬度洲劣，傳參數(shù)表示設(shè)置
5. $(".div1").height()
6. $(".div1").innerHeight()
7. $(".div1").outerHeight()
8. $(".div1").offset().left/top => 獲取匹配元素在當(dāng)前視口的相對(duì)偏移
9. $("html, body").scrollTop() => 獲取頁面卷過去的距離备蚓，傳參表示設(shè)置
四. 事件
1. $(".div1").on("事件類型", 事件處理函數(shù)) => 表示元素的事件綁定，事件類型沒有on
2. $(".div1").off("事件類型") => 表示元素事件的解綁
3. $(".div1").on("事件類型", "選擇器", 事件處理函數(shù)) => 表示事件的委派囱稽，選擇器所選擇的元素是真正產(chǎn)生事件的元素
五. 屬性操作
1. $(".div1").attr() => 屬性操作郊尝，一個(gè)參數(shù)表示查找屬性，兩個(gè)參數(shù)表示設(shè)置屬性战惊，如果想同時(shí)設(shè)置多個(gè)屬性流昏，傳json對(duì)象
2. $(".div1").removeAttr() => 表示移除一個(gè)屬性，參數(shù)是屬性名
3. $(".div1").addClass("selected") => 表示追加class屬性
4. $(".div1").removeClass("selected") => 表示移除一個(gè)class屬性
5. $(".div1").html() => 設(shè)置或獲取節(jié)點(diǎn)的html文本，不傳參數(shù)表示獲取况凉，傳參表示設(shè)置
6. $("input").val() => 設(shè)置或獲取表單元素的值谚鄙，不傳參數(shù)表示獲取，傳參表示設(shè)置
7. $("input[type='checkbox']").prop("checked") => 獲取表單元素的選中狀態(tài)刁绒，返回 true/false
六. 文檔處理
1. $(".div1").append() => 節(jié)點(diǎn)的追加闷营，參數(shù)節(jié)點(diǎn)作為子元素追加到目標(biāo)節(jié)點(diǎn)后邊，參數(shù)可以是字符串也可以是節(jié)點(diǎn)對(duì)象
2. $(".div1").after() => 在匹配的元素之后插入內(nèi)容知市，作為兄弟節(jié)點(diǎn)插入傻盟，參數(shù)可以是字符串也可以是節(jié)點(diǎn)對(duì)象
3. $(".div1").before() => 在匹配的元素之前插入內(nèi)容，作為兄弟節(jié)點(diǎn)插入嫂丙，參數(shù)可以是字符串也可以是節(jié)點(diǎn)對(duì)象
4. $(".div1").remove() => 表示節(jié)點(diǎn)的移除
5. $(".div1").clone() => 表示節(jié)點(diǎn)的克隆/復(fù)制 包含后代元素元素 參數(shù)默認(rèn)是false 如果參數(shù)是true表是事件也會(huì)被克隆
七. 核心
1. each 方法 => jQuery對(duì)象.each(function(){}) => 表示節(jié)點(diǎn)的遍歷
2. index 方法 => jQuery對(duì)象.index() => 獲取當(dāng)前節(jié)點(diǎn)在節(jié)點(diǎn)列表中的索引值
3. length 屬性 => 獲取JQ對(duì)象中節(jié)點(diǎn)的個(gè)數(shù)
4. $(".div1").get(0) => 獲取JQ對(duì)象中一個(gè)匹配的元素娘赴，返回原生js對(duì)象，等價(jià)于$(".div1")[0]
八. ajax
$.ajax({
type : "POST", //提交方式
url : "",//路徑
data : {
//提交的參數(shù)
},//數(shù)據(jù)跟啤，這里使用的是Json格式進(jìn)行傳輸
success : function(result) {//返回?cái)?shù)據(jù)根據(jù)結(jié)果進(jìn)行相應(yīng)的處理
if ( result.success ) {
這里寫成功的數(shù)據(jù)處理
} else {
這里寫錯(cuò)誤的數(shù)據(jù)處理
}
}
});
post 方法
$.post( "",//路徑
{
//提交的參數(shù)
},//數(shù)據(jù)诽表，這里使用的是Json格式進(jìn)行傳輸
function(result) {//返回?cái)?shù)據(jù)根據(jù)結(jié)果進(jìn)行相應(yīng)的處理
if ( result.success ) {
這里寫成功的數(shù)據(jù)處理
} else {
這里寫錯(cuò)誤的數(shù)據(jù)處理
}
}
);
get 方法
$.get( "",//路徑
{
//提交的參數(shù)
},//數(shù)據(jù)，這里使用的是Json格式進(jìn)行傳輸
function(result) {//返回?cái)?shù)據(jù)根據(jù)結(jié)果進(jìn)行相應(yīng)的處理
if ( result.success ) {
這里寫成功的數(shù)據(jù)處理
} else {
這里寫錯(cuò)誤的數(shù)據(jù)處理
}
}
);
九. 動(dòng)畫
1. $(".div1").show() => 顯示元素
2. $(".div1").hide() => 隱藏元素
3. $(".div1").fadeIn() => 淡入動(dòng)畫
4. $(".div1").fadeout() => 淡出動(dòng)畫
5. $(".div1").slideUp() => 收起的動(dòng)畫
6. $(".div1").slideDown() => 展開的動(dòng)畫
7. $(".div1").animate() => 自定義動(dòng)畫 參數(shù)：1. 樣式的json對(duì)象 2. 動(dòng)畫持續(xù)時(shí)間 3. 回調(diào)函數(shù)
8. stop => jQuery 的stop方法是用來清空動(dòng)畫序列
十. 工具方法
1. $.trim(str) => 過濾字符串首位空格
2. $.isArray(arr) => 判斷參數(shù)是否是數(shù)據(jù)
3. $.inArray("John", arr) => 查找第一個(gè)參數(shù)在數(shù)組中的位置(如果沒有找到則返回 -1 )
4. $.proxy() => $.proxy(方法名, 新的引用)(方法的參數(shù)列表) 改變方法中的this指向
