一：認(rèn)識(shí)jquery
jquery是javascript的類庫(kù)，具有輕量級(jí)，完善的文檔，豐富的插件支持，完善的Ajax功能，強(qiáng)大的選擇器功能，出色的DOM操作封裝，出色的瀏覽器兼容性，可靠的事件處理機(jī)制，隱式迭代和鏈?zhǔn)骄幊滩僮鳎赓M(fèi)開源的庫(kù)
二：初始化jquery
jQuery方式監(jiān)聽頁(yè)面的加載：
1.函數(shù)內(nèi)部的代碼頁(yè)面加載(HTML)完畢之后執(zhí)行
2.調(diào)用N次,會(huì)執(zhí)行N次
3.jQ監(jiān)聽的代碼可以簡(jiǎn)寫
監(jiān)聽頁(yè)面加載完成 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$（function（）{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
}） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
三：jquery定義活動(dòng)模板
$(function(){
})
四：jquery解決命名$沖突的問(wèn)題
設(shè)置的時(shí)候一定要放在最上面$還沒(méi)被定義變量之前 ?var xx = $.noConflict();
五：jquery的屬性操作的樣式?和css操作的樣式?? ? ? ? ? ? ? ?
1、css方法
語(yǔ)法：第一種：$("元素名稱").css('?name') 獲取第一個(gè)匹配元素的樣式屬性。
第二種：$("元素名稱").css('?name'，'value') 設(shè)置樣式屬性
第三種：是以對(duì)象的形式寫多種樣式
? $("").css({? ? ?
? ? ? ? ' name'：'value'，
? ? ? ? 'backgroundColor': '#ddd',
? ? ? ? 'fontWeight': '',
? ? })?
2、addClass方法
語(yǔ)法：$("p").addClass('屬性名1 屬性名2'); 給某個(gè)元素添加一個(gè)類名，可以是多個(gè)類名?
3、removeClass方法
?語(yǔ)法：語(yǔ)法：$("p").addClass('屬性名1 屬性名2'); 給某個(gè)元素刪除一個(gè)類名，可以是多個(gè)類名
4、toggleClass方法
語(yǔ)法：$("元素名稱").toggleClass(“class”) ?如果存在類就刪除，如果沒(méi)有就添加一個(gè)類
5、hasClass方法
語(yǔ)法：$("元素名稱").hasClass(“class”) ?查詢指定的標(biāo)簽中是否有指定的類，有返回true，沒(méi)有則返回false；
6、獲取內(nèi)容和修改內(nèi)容的方法 text()和html()
01.$("元素名稱").text() ?如果沒(méi)有內(nèi)容則獲取到元素的內(nèi)容，
? ??$("元素名稱").text('value') 有內(nèi)容則修改該元素的內(nèi)容為value
02.$("元素名稱").html() 如果沒(méi)有內(nèi)容則獲取到該元素的內(nèi)容，
? ??$("元素名稱").html('value') 有內(nèi)容則修改該元素的內(nèi)容為value
區(qū)別：一：html()操作的是innerHtml屬性節(jié)點(diǎn)的內(nèi)容
? ? ? ? ? ? ? ? text() 操作的是innerText屬性節(jié)點(diǎn)的內(nèi)容
? ? ? ? ? 二：html如果傳遞了參數(shù)表示設(shè)置標(biāo)簽的內(nèi)容覆蓋之前的內(nèi)容,傳遞的是標(biāo)簽加內(nèi)容會(huì)覆蓋之前的標(biāo)簽和內(nèi)容
? ? ? ? ? ? ? ? text傳遞參數(shù)是標(biāo)簽，則以文本形式展示
三：html方法沒(méi)有傳參,獲取第一個(gè)標(biāo)簽的節(jié)點(diǎn)內(nèi)容
? ? ? ? ? ? ? ? text方法沒(méi)有傳參,獲取所有標(biāo)簽的文本內(nèi)容拼接在一起返回
7、width() 方法和height()方法
語(yǔ)法： ?$("元素名稱").width() 如果不傳值就是獲取該元素的寬度，
? ? ? ? ? ??$("元素名稱").width(20) 如果傳值就是修改該元素的寬度，
? ? ? ? ? ? $("元素名稱").height() 如果不傳值就是獲取該元素的高度，
? ? ? ? ? ??$("元素名稱").height(20) 如果傳值就是修改該元素的高度，
8、val()方法
語(yǔ)法：$("input元素名稱").val(); 獲取input元素的值
? ? ? ? ? $("input元素名稱").val(value); 設(shè)置input元素的值為value? ??
9、offset()方法 ?
語(yǔ)法：?$("元素名稱").offset() 獲取該元素相對(duì)于當(dāng)前可視窗口的位置top和left值；返回一個(gè)對(duì)象{top：29，left：29}
方法：$("元素名稱").offset().top ; ? ?$("元素名稱").offset().left? ; ? ? ?
10、position()方法
語(yǔ)法：$("元素名稱").position() 獲取當(dāng)前標(biāo)簽距離父標(biāo)簽的距離 top和left值；返回一個(gè)對(duì)象{top：29，left：29}
方法：$("元素名稱").position().top ; ? ?$("元素名稱").position().left? ; ? ?
11、scrollTop()方法?滾動(dòng)條滾動(dòng)距離
語(yǔ)法：$(window).scrollTop() 獲取滾動(dòng)條滾動(dòng)的距離參數(shù)可選規(guī)定以像素計(jì)的新位置。一般不設(shè)置，設(shè)置100，就是會(huì)跑到100的位置,一般設(shè)置為0；點(diǎn)擊回到頂部
$(window).scrollLeft() 參數(shù)可選規(guī)定以像素計(jì)的新位置。一般不設(shè)置
滾動(dòng)條監(jiān)聽事件：$(window).on("scroll",fn)
點(diǎn)擊回到頂部案例：
//滾動(dòng)到一定距離按鈕出現(xiàn)
$(window).on("scroll",function(){
vara=$(window).scrollTop();
console.log(a)
varb=$(".x1").offset().top
console.log(b)
if(a>b){
$(".x3").css('display',"block")
}else{
$(".x3").css('display',"none")
? ? ? ? ? ? }
? ? ? ? })
//這里是一個(gè)按鈕，點(diǎn)擊回到頂部
$(".xi").on("click",function(){
$(window).scrollTop(0)
? ? ? ? })
12、innerHeight()和innerWidth() 方法
這個(gè)方法是獲取到元素的寬度和高度不包括邊框或者可視區(qū)域屏幕的寬度和高度
語(yǔ)法：$(window).innerHeight() 獲取可視區(qū)域的文檔高度
? ? ? ? ? $(window).innerWidth()?獲取可視區(qū)域的文檔寬度
六：jquery的選擇器
1、基本選擇器
ID選擇器：$("#myDiv") 匹配唯一的具有此id值的元素?
類選擇器：$(".myClass") 匹配具有此類樣式值的所有元素
標(biāo)簽選擇器：$("div") 匹配指定標(biāo)簽名稱的所有元素?
通配符選擇器：$("*") 匹配所有元素?
并集選擇器：$("div,span,p.myClass") 聯(lián)合所有匹配的選擇器?
交集選擇器：$("p.myClass") 匹配到p標(biāo)簽里面的類名 不常用
2、層級(jí)選擇器
后代選擇器：$("form input") 后代選擇器，選擇ancestor的所有子孫節(jié)點(diǎn)?
子代選擇器：$("#main > span")main下一級(jí)的的所有span子節(jié)點(diǎn)?
兄弟選擇器：$("label + input") 兄弟相鄰選擇器，選擇所有l(wèi)abel相鄰的第一個(gè)input節(jié)點(diǎn)?
兄弟選擇器：$("#prev ~ div") 相鄰后邊的所有，選擇prev的所有后面的div同胞節(jié)點(diǎn)
3、篩選選擇器，也是過(guò)濾選擇器
? ? ?$("li:first") 匹配第一個(gè)選擇的li元素
? ? ?$("li:last") 匹配最后一個(gè)選擇的li元素
? ? ?$("li:not(:first)")選擇除了第一個(gè)標(biāo)簽之外的所有l(wèi)i標(biāo)簽
? ? ?$("li").eq(4)選擇第5個(gè)li標(biāo)簽 索引0開始
? ? ?$("td:eq(2)") 匹配集合中指定位置的元素(從0開始)
? ? ?$("li:odd") 選擇索引為奇數(shù) 索引0開始
? ? ?$("li:even") 選擇索引為偶數(shù)的li標(biāo)簽 索引0開始
? ? ?$("li:lt(3)") ?$("li:gt(3)")選擇索引大于或者小于3的所有l(wèi)i標(biāo)簽
$(":animated")?獲取正在執(zhí)行動(dòng)畫效果的元素
4、屬性過(guò)濾選擇器?
$("div[屬性]") 匹配所有具有指定屬性的元素
$("input[name ='newsletter']") 匹配所有具有指定屬性值的元素
$("input[name !='newsletter']") 匹配所有不具有指定屬性值的元素
$("input[name ^='news']") 匹配所有指定屬性值以news開頭的元素
$("input[name $='letter']") 匹配所有指定屬性值以letter結(jié)尾的元素
$("input[name *='man']") 匹配所有指定屬性值含有man字符的元素
$("input[屬性1 =“值”][name2 $= 'man']") 匹配同時(shí)符合多個(gè)選擇器的所有元素
5、父子元素過(guò)濾器
$("ul li:nth-child(2)"), 匹配所有l(wèi)i標(biāo)簽的索引為2的li元素，索引0開始
$("ul li:nth-child(odd)"), 匹配所有l(wèi)i標(biāo)簽的奇數(shù)元素
$("ul li:nth-child(3n + 1)") 匹配所有l(wèi)i標(biāo)簽的第4,7,11元素
$("div span:first-child") 匹配所有span標(biāo)簽的第1個(gè)span元素
? ? ?$("div span:last-child") 匹配所有span標(biāo)簽的最后一個(gè)span元素
parent() 獲取指定標(biāo)簽的父節(jié)點(diǎn)
parents() 獲取指定標(biāo)簽的祖先節(jié)點(diǎn) 父節(jié)點(diǎn)以上都是 傳參如果指定祖先哪個(gè)就是哪個(gè)
parentsUntil() ?獲取指定標(biāo)簽的祖先節(jié)點(diǎn)直到...為止（不包含自己）
children() ? ?獲取指定標(biāo)簽的所有子節(jié)點(diǎn)
siblings() ? ?獲取指定標(biāo)簽的兄弟節(jié)點(diǎn) 除了自己以外的所有兄弟
? ? ?$(當(dāng)前元素).find(所有的后代元素)查找獲得當(dāng)前元素集合中每個(gè)元素的后代，必須參數(shù)
七：jquery的核心函數(shù)方法? ?
?1、$(this).index()方法 ：
? ? ? ? 作用：獲取索引，角標(biāo)
2、get（）方法：和 eq()方法差不多 ，不過(guò)get方法返回的是DOM標(biāo)簽
作用:獲取指定索引對(duì)應(yīng)的標(biāo)簽返回
如果沒(méi)有傳遞參數(shù):獲取頁(yè)面中所有指定的標(biāo)簽存儲(chǔ)在數(shù)組中返回
001 參數(shù)是正數(shù)
002 參數(shù)是負(fù)數(shù) 如果是-1,表示獲取倒數(shù)第一個(gè)
3、eq（）方法
作用:獲取指定索引對(duì)應(yīng)的標(biāo)簽并且包裝成jQuery對(duì)象返回
沒(méi)有參數(shù):返回一個(gè)空的jQ對(duì)象(不是this)
001 參數(shù)是正數(shù)
002 參數(shù)是負(fù)數(shù) 如果是-1,表示獲取倒數(shù)第一個(gè)
4、data（）方法 和 removeData()方法 ：
作用：在元素上存取數(shù)據(jù)和刪除數(shù)據(jù)
1.在一個(gè)div上存取數(shù)據(jù)
$("div").data("blah"); ?// undefined
$("div").data("blah", "hello"); ?// blah設(shè)置為hello
$("div").data("blah"); ?// hello
$("div").data("blah", 86); ?// 設(shè)置為86
$("div").data("blah"); ?// ?86
$("div").removeData("blah"); ?//移除blah
$("div").data("blah"); ?// undefined
2.在一個(gè)div上存取名/值對(duì)數(shù)據(jù)
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first ?//16;
$("div").data("test").last ?//pizza!;
3.在HTML5規(guī)范中div中讀取預(yù)存的data-[key]值
? ? ? $("div").data("test"); //this is test!;
八：jquery動(dòng)畫
動(dòng)畫隊(duì)列 : 如果某個(gè)標(biāo)簽身上被添加了多個(gè)動(dòng)畫任務(wù),那么這些任務(wù)會(huì)被按順序添加到隊(duì)列中等待執(zhí)行
按照隊(duì)列中任務(wù)的順序一個(gè)接著一個(gè)的執(zhí)行隊(duì)列中的任務(wù)
1.顯示和隱藏:顯示show() ，隱藏hide() ，切換toggle()
? ? ? ? 第一個(gè)參數(shù):動(dòng)畫時(shí)間(速度)
? ? ? ? 第二個(gè)參數(shù):動(dòng)畫執(zhí)行完畢之后的回調(diào)函數(shù)
? ? ? ? 本質(zhì)：顯示和隱藏動(dòng)畫:控制標(biāo)簽的寬度和高度(透明度)來(lái)實(shí)現(xiàn)
2.展開和收起:展開slideDown() ，收起slideUp()， 切換slideToggle()
? ? ? ? 第一個(gè)參數(shù):動(dòng)畫時(shí)間(速度)
? ? ? ? 第二個(gè)參數(shù):動(dòng)畫執(zhí)行完畢之后的回調(diào)函數(shù)
? ? ? ? 本質(zhì)：展開和收起動(dòng)畫:控制標(biāo)簽的高度
3.淡入淡出動(dòng)畫：淡入fadeIn（），淡出fadeOut（）， 切換fadeToggle(timer,callback) ?
? ? ? ? 第一個(gè)參數(shù):動(dòng)畫時(shí)間(速度)
? ? ? ? 第二個(gè)參數(shù):動(dòng)畫執(zhí)行完畢之后的回調(diào)函數(shù)
? ? ? ? 淡入淡出到指定的值fadeTo （參數(shù)1，參數(shù)2，參數(shù)3）參數(shù)1為時(shí)間 ，參數(shù)2為透明度的值，參數(shù)3為回調(diào)函數(shù)
? ? ? ? 本質(zhì):操作標(biāo)簽設(shè)置標(biāo)簽的透明度
4.自定義動(dòng)畫:animate?
? ? ? ? 語(yǔ)法 jQ().animate(optionsObj,timer,callBack)
? ? ? ? 第一參數(shù)為對(duì)象，鍵值類要做什么動(dòng)畫
? ? ? ? 第二參數(shù)為時(shí)間
? ? ? ? 第三參數(shù)為回調(diào)函數(shù)
5.stop():停止任務(wù)
第一個(gè)參數(shù):控制隊(duì)列中的任務(wù)(是否清空) ?true|false
第二個(gè)參數(shù):控制是否停止動(dòng)畫 ? true|false
沒(méi)有參數(shù): 停止當(dāng)前的動(dòng)畫, 后面的任務(wù)繼續(xù)執(zhí)行
true true :立即完成當(dāng)前的動(dòng)畫,后面的任務(wù)不再執(zhí)行
true false:所有動(dòng)畫任務(wù)立刻停止
false false:停止當(dāng)前的動(dòng)畫,后面的任務(wù)繼續(xù)執(zhí)行 ?默認(rèn)的情況
false true :立即完成當(dāng)前的動(dòng)畫,后面的任務(wù)繼續(xù)執(zhí)行
6.delay():延遲執(zhí)行任務(wù)
九，jquery常見(jiàn)方法
jQ().addBack(); 把當(dāng)前的jQ實(shí)例對(duì)象和上一個(gè)jQ實(shí)例對(duì)象合并成一個(gè)新的jQ實(shí)例對(duì)象 ，設(shè)置在標(biāo)簽后面
?jQ().end(); 返回上一個(gè)jQ實(shí)例對(duì)象
?jQ().add(); 在當(dāng)前jQ實(shí)例對(duì)象的基礎(chǔ)上再添加一個(gè)jQ對(duì)象成為一個(gè)新的jQ對(duì)象參數(shù)為需要設(shè)置的標(biāo)簽
?jQ.isArray(); 檢查參數(shù)是否是數(shù)組
?jQ.isFunction(); 檢查參數(shù)是否是函數(shù) 和jQ.isArray方法一樣
?jQ.grep(); 過(guò)濾數(shù)組
第一個(gè)參數(shù):要處理的數(shù)組對(duì)象
第二個(gè)參數(shù):過(guò)濾函數(shù) 要傳值
第三個(gè)參數(shù):布爾類型的值,控制過(guò)濾翻轉(zhuǎn) 默認(rèn)是false
?jQ.makeArray(); 把類數(shù)組的結(jié)構(gòu)轉(zhuǎn)換為數(shù)組(偽數(shù)組-->數(shù)組)
?jQ.each(); 迭代(遍歷)
?jQ.map(); 數(shù)組映射
? ? ? ? ?.is(selector) ：判斷括號(hào)里面的標(biāo)簽或者函數(shù)，如果真，為true
?$(selector).next(expr)：獲取$()緊鄰的同級(jí)元素，expr篩選的條件有的話就指定，沒(méi)有的話就是緊鄰的元素
方式一： ? $("p").next().css("background-color", "red") ?; 獲取p標(biāo)簽后面的第一個(gè)元素
方式二： ? $("p").next(“.class”).css("background-color", "red") ?; 獲取p標(biāo)簽后面的有類名為class標(biāo)簽
?$(selector).nextAll(expr) ：獲取$()所有后面的元素，expr為篩選條件，有指定就是指定，
.first() 匹配所有同種元素中的第一個(gè)： $("ul li").first().addClass('highlight');第一個(gè)li。
.last() 匹配所有同種元素中的最后一個(gè)： $("ul li").last().addClass('highlight');最后一個(gè)li。
.not() 從匹配元素集合中刪除元素。
從包含所有段落的集合中刪除 id 為 "selected" 的段落：$("p").not("#selected")
從不是偶數(shù)中的li設(shè)置為紅色 ?$('li').not(':even').css('background-color', 'red');
遍歷?each方法的語(yǔ)法:
[1] jQ.each(target,fn(key,value){//...this}) 遍歷數(shù)組和對(duì)象 this指向value
[2] jQ().each(fn(key,value){//...this}) 遍歷jQ實(shí)例對(duì)象 this指向value
作用:迭代(遍歷)對(duì)象|數(shù)組|jQ實(shí)例對(duì)象(DOM節(jié)點(diǎn))
each方法使用注意點(diǎn)
在回調(diào)函數(shù)中提供返回值,如果返回的是false,那么迭代就結(jié)束,循環(huán)終止. ?return false;
回調(diào)函數(shù)中的this
each方法的回調(diào)函數(shù)中的this并非指向window,而是指向當(dāng)前循環(huán)的value值(對(duì)象)
map方法的使用
jQ.map(arr,fn(index,ele))
遍歷數(shù)組映射,并且對(duì)數(shù)組進(jìn)行處理(過(guò)濾|放大|重組)返回新的數(shù)組
return ele *2;
?if(ele >3) return ele + "A";
十、jquery中的事件類型
1.鼠標(biāo)的移入和移出事件
mouseenter|mouseleave 常用
mouseover|mouseout : 移動(dòng)到子標(biāo)簽有影響
hover（參數(shù)1，參數(shù)2）方法:本質(zhì)上對(duì)mouseenter|mouseleave方法封裝
? ? ? ? ? ? ? ?第一個(gè)參數(shù)（回調(diào)函數(shù)）:鼠標(biāo)移入事件
? ? ? ? ? ? ? ?第二個(gè)參數(shù)（回調(diào)函數(shù)）:鼠標(biāo)移出事件
? ? ? ? ? ? ? ?只傳遞一個(gè)回調(diào)函數(shù)作為參數(shù):不管是移入還是移出事件都會(huì)執(zhí)行回調(diào)函數(shù)。就是移入和移出
2.綁定一個(gè)事件 3.0版本已經(jīng)廢棄
$("p").bind("click", function(){
alert( $(this).text() );
});
bind( type, data, fn ) 為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)或多個(gè)事件處理器函數(shù)。可能的事件屬性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
當(dāng)元素獲得焦點(diǎn)時(shí)，觸發(fā) focus 事件。data:focus(Data, fn) 可傳入data供函數(shù)fn處理。
blur 當(dāng)輸入框失去焦點(diǎn)時(shí)使用
?常用在表單中，當(dāng)輸入以后放開時(shí)調(diào)用
focus( ) 元素獲得焦點(diǎn)調(diào)用
change 當(dāng)輸入框發(fā)生變化時(shí)調(diào)用
?當(dāng)元素的值發(fā)生改變時(shí)，會(huì)發(fā)生 change 事件。該事件僅適用于文本域
keydown() 鼠標(biāo)按下事件
kyeup 鼠標(biāo)抬起事件
ready事件，頁(yè)面加載完成之后調(diào)用
mousemove() 鼠標(biāo)移動(dòng)事件
resize 窗口發(fā)生改變的事件
scroll() 滾動(dòng)事件
submit 按鈕點(diǎn)擊表單事件
3.事件處理的兩種方法
$("div").click(function(e){...})
e.type : 事件的類型
e.target: 事件作用的對(duì)象
jQ().on(事件類型,[obj],function(e){...}
e.data.[對(duì)象名]: ? 傳遞對(duì)象參數(shù)給回調(diào)函數(shù)的對(duì)象可以省略
$().data(k,value)獲取在標(biāo)簽中的數(shù)據(jù)()里面也可以是保存數(shù)據(jù)的名稱
注意點(diǎn)：給標(biāo)簽添加多個(gè)事件(可以是相同類型的),不會(huì)覆蓋
4.事件冒泡:?子標(biāo)簽和父標(biāo)簽身上如果注冊(cè)了相同類型的事件,那么子標(biāo)簽的事件被觸發(fā)的時(shí)候,父標(biāo)簽的事件也會(huì)被觸發(fā),而且它是層 ? ? ? ? ? ? ? 層向上觸發(fā)的,我們稱為事件冒泡.
5.如何阻止事件冒泡:
? ? ? ? ? [1] 在對(duì)應(yīng)的標(biāo)簽返回return false;
jQ().on(事件類型,[obj],function(e){...}
? ? ? ? ? [2] 調(diào)用事件對(duì)象的e.stopPropagation();方法來(lái)阻止 ，e為回調(diào)函數(shù)參數(shù)
6.標(biāo)簽的默認(rèn)行為
有一些標(biāo)簽它們本身有一些默認(rèn)行為,比如說(shuō)a標(biāo)簽，input標(biāo)簽，再給他們注冊(cè)事件(click...),那么會(huì)觸發(fā)多個(gè)操作
取消事件 off
jQ().off(type,function（){.....})
第一個(gè)參數(shù):事件的類型type
第二個(gè)參數(shù):過(guò)濾特定的事件fn
要取消按鈕身上特定的某一個(gè)點(diǎn)擊事件[把回調(diào)函數(shù)提取出來(lái)單獨(dú)聲明]
$("button").off("click"）; ? //批量的取消按鈕身上所有的點(diǎn)擊事件
阻止標(biāo)簽的默認(rèn)行為:事件對(duì)象e.preventDefault()
7.如何自動(dòng)觸發(fā)事件
調(diào)用方式j(luò)Q().trigger(type事件類型)
?① 作用的對(duì)象:jQ實(shí)例對(duì)象中所有的標(biāo)簽
② 不會(huì)阻止事件冒泡
jQ().triggerHandler(type)
① 作用的對(duì)象:jQ實(shí)例對(duì)象中第一個(gè)標(biāo)簽
② 默認(rèn)會(huì)阻止事件冒泡
③ 默認(rèn)會(huì)阻止標(biāo)簽的默認(rèn)行為(部分)
8.事件委托
優(yōu)點(diǎn) (1) 可以給尚不存在的標(biāo)簽添加事件
(2) 可以提高性能
$("父或者祖父標(biāo)簽").on(參數(shù)1，參數(shù)2，function(){...})
第一個(gè)參數(shù):事件的類型
第二個(gè)參數(shù):給要做事件的子標(biāo)簽注冊(cè)事件(選擇器)
第三個(gè)參數(shù):事件發(fā)生后的回調(diào)函數(shù)
9.常用事件類型
blur( ) 元素失去焦點(diǎn) a, input, textarea, button, select, label, map, area
? ? ?change( ) 用戶改變域的內(nèi)容 input, textarea, select?
? ? ?click( ) 鼠標(biāo)點(diǎn)擊某個(gè)對(duì)象 幾乎所有元素?
? ? ?dblclick( ) 鼠標(biāo)雙擊某個(gè)對(duì)象 幾乎所有元素?
? ? ?error( ) 當(dāng)加載文檔或圖像時(shí)發(fā)生某個(gè)錯(cuò)誤 window, img?
? ? ?focus( ) 元素獲得焦點(diǎn) a, input, textarea, button, select, label, map, area
? ? ?keydown( ) 某個(gè)鍵盤的鍵被按下 幾乎所有元素?
? ? ?keypress( ) 某個(gè)鍵盤的鍵被按下或按住 幾乎所有元素?
? ? ?keyup( ) 某個(gè)鍵盤的鍵被松開 幾乎所有元素?
? ? ?load( fn ) 某個(gè)頁(yè)面或圖像被完成加載 window, img?
? ? ?mousedown( fn ) 某個(gè)鼠標(biāo)按鍵被按下 幾乎所有元素?
? ? ?mousemove( fn ) 鼠標(biāo)被移動(dòng) 幾乎所有元素?
? ? ?mouseout( fn ) 鼠標(biāo)從某元素移開 幾乎所有元素?
? ? ?mouseover( fn ) 鼠標(biāo)被移到某元素之上 幾乎所有元素?
? ? ?mouseup( fn ) 某個(gè)鼠標(biāo)按鍵被松開 幾乎所有元素?
? ? ?resize( fn ) 窗口或框架被調(diào)整尺寸 window, iframe, frame?
? ? ?scroll( fn ) 滾動(dòng)文檔的可視部分時(shí) window?
? ? ?select( ) 文本被選定 document, input, textarea?
? ? ?submit( ) 提交按鈕被點(diǎn)擊 form?
? ? ?unload( fn ) 用戶退出頁(yè)面 window
十一、jQueryDOM文檔操作的常見(jiàn)方法
1.html() ==> innerHTML 沒(méi)有參數(shù)表示獲取,傳遞參數(shù)表示設(shè)置
2.text() ==> innerText
3.removeChild（）刪除子元素
4.remove() 刪除操作
把選中的指定標(biāo)簽刪除掉(刪除標(biāo)簽和內(nèi)容和子標(biāo)簽)
5.removeAttr()方法
所有指定元素刪除屬性
6.$(selector).removeAttr(attribute)
attribute類型必需。規(guī)定從指定元素中移除的屬性。
selector 指定要移除屬性的標(biāo)簽
沒(méi)有參數(shù),那么返回實(shí)例對(duì)象本身
//removeProp == removeAttr
7.detach()方法
刪除被選元素
$().detach()和remove（）不一樣就是保留事件
8.empty() 清空操作
把選中的指定標(biāo)簽刪除掉(刪除內(nèi)容和子標(biāo)簽)不會(huì)刪除標(biāo)簽
9.clone() 克隆（復(fù)制）操作
把已經(jīng)有的標(biāo)簽再?gòu)?fù)制一份 ，復(fù)制的是標(biāo)簽和里面的所有
注意點(diǎn):默認(rèn)情況下,克隆標(biāo)簽的時(shí)候,不會(huì)包含事件,如果需要連同事件一起復(fù)制,那么就傳遞參數(shù)true
10.replaceWith() 替換操作
用一個(gè)新的標(biāo)簽和內(nèi)容來(lái)替換當(dāng)前的標(biāo)簽
11.replaceAll（）替換
用指定的 HTML 內(nèi)容或元素替換被選元素
參數(shù)：$(content).replaceAll(selector) ?selector規(guī)定要替換的元素
12.after()把內(nèi)容或者標(biāo)簽插入到標(biāo)簽的后面
?$(selector).after(content)
$(selector).after(function(index))
content必需。規(guī)定要插入的內(nèi)容（可包含 HTML 標(biāo)簽）
selector選擇器
13.before()把內(nèi)容或者標(biāo)簽插入到標(biāo)簽的前面
$("span").before("");
$(selector).before(content)
content必需。規(guī)定要插入的內(nèi)容（可包含 HTML 標(biāo)簽）
14.insertAfter() 把內(nèi)容或者標(biāo)簽插入到標(biāo)簽的后面
$("").insertAfter("span")
$(content).insertAfter(selector)
content 選擇器表達(dá)式，HTML 標(biāo)記
selector必需。規(guī)定在何處插入被選元素。
15.insertBefore()把內(nèi)容或者標(biāo)簽插入到標(biāo)簽的前面
$("").insertBefore("span")
$(content).insertAfter(selector)
content 選擇器表達(dá)式，HTML 標(biāo)記
selector必需。規(guī)定在何處插入被選元素
16.append()把內(nèi)容或者標(biāo)簽插入到標(biāo)簽里面內(nèi)容的后面
$("span").append("$('p')")
$(selector).append(content)
content必需。規(guī)定要插入的內(nèi)容（可包含 HTML 標(biāo)簽）
和有to的區(qū)別
(1) 沒(méi)有傳遞參數(shù): 返回this
(2) 不支持選擇器
（3）可以函數(shù)
17.appendTo()把所有的標(biāo)簽和內(nèi)容插入到標(biāo)簽內(nèi)容的后面
$(content).appendTo(selector)
content必需規(guī)定要插入的內(nèi)容（可包含 HTML 標(biāo)簽）。
selector必需規(guī)定把內(nèi)容追加到哪個(gè)元素上。
返回值:把插入的所有標(biāo)簽都保存到j(luò)Q實(shí)例對(duì)象中返回
18.prepend()
把所有的內(nèi)容和標(biāo)簽插入到標(biāo)簽里面內(nèi)容的前面
$("span").prepend("zs")
$(selector).prepend(content)
content必需規(guī)定要插入的內(nèi)容（可包含 HTML 標(biāo)簽）。
和有to的區(qū)別
(1) 沒(méi)有傳遞參數(shù): 返回this
(2) 不支持選擇器
（3）可以函數(shù)
19.prependTo()把所有的標(biāo)簽和內(nèi)容插入到標(biāo)簽內(nèi)容的前面
$(content).appendTo(selector)
content必需規(guī)定要插入的內(nèi)容（可包含 HTML 標(biāo)簽）。
selector必需規(guī)定把內(nèi)容追加到哪個(gè)元素上。
20.attr() 獲取和設(shè)置指定元素的屬性和值
$(selector).attr(attribute) 獲取值
$(selector).attr(attribute,value) 設(shè)置
jQ().attr({key：value，key：value}) 設(shè)置多個(gè)屬性
attribute 必選規(guī)定屬性的名稱。字符串
value 可選規(guī)定屬性的值。選了就是設(shè)置 參數(shù)可以是對(duì)象 字符串
語(yǔ)法：jQ().attr(沒(méi)有參數(shù)) ? 報(bào)錯(cuò) | jQ().attr(key) | jQ().attr(obj) | jQ().attr(key,value)
批量的給標(biāo)簽添加屬性
傳一個(gè)參數(shù)是獲取屬性值，傳兩個(gè)參數(shù)是刪除指定屬性和值
21removeAttr（）
刪除屬性，傳一個(gè)參數(shù)是刪除屬性，傳兩個(gè)參數(shù)是刪除指定屬性和值
prop方法
語(yǔ)法:jQ().prop() 操作的是DOM標(biāo)簽的屬性
批量的給標(biāo)簽添加屬性
22.removeProp 刪除屬性值
attr和prop的區(qū)別
具有 true 和 false 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop()
23.prev()方法
?獲得當(dāng)前相同元素中前一個(gè)相同的元素
?$("p").prev(selector) 有值指定標(biāo)簽，獲取p標(biāo)簽之前的指定的前一個(gè)標(biāo)簽
selector 指定的類名，id等
$("p").prev()，沒(méi)值，獲取當(dāng)前p標(biāo)簽之前的前一個(gè)p標(biāo)簽
24.prevAll()
?獲得當(dāng)前相同元素中之前所有相同的元素
?$("p").prevA(selector) 有值指定標(biāo)簽，獲取p標(biāo)簽之前的指定的所有標(biāo)簽
selector 指定的類名，id等
?$("p").prevAll()，沒(méi)值，獲取當(dāng)前p標(biāo)簽之前的所有p標(biāo)簽
25val方法
語(yǔ)法：jQ().val()
如果沒(méi)有傳遞參數(shù),表示獲取第一個(gè)input標(biāo)簽的value值
如果傳遞參數(shù),表示批量的設(shè)置所有input標(biāo)簽的value值
val方法操作的是屬性不是屬性節(jié)點(diǎn)
26.unwrap()
刪除被選元素的父元素。
$("p").unwrap(); 被選元素是p標(biāo)簽
十二：DOM屬性節(jié)點(diǎn)的操作
? 1.dom操作增刪改查
添加|修改:setAttribute()
查詢獲取:getAttribute() ，hasAttribute()
刪除:removeAttribute()
2.?屬性和屬性節(jié)點(diǎn)對(duì)比
?屬性:所有的對(duì)象(包括DOM)都有屬性,保存在對(duì)象身上.
?屬性節(jié)點(diǎn):只有DOM標(biāo)簽有屬性節(jié)點(diǎn),保存在對(duì)象身上的attributes對(duì)象上面.比如heaf=“”
3.jquery獲取內(nèi)容和修改內(nèi)容
html() 操作的是innerHTML屬性 節(jié)點(diǎn)內(nèi)容
text() 操作的是innerText屬性 純文本內(nèi)容
html方法沒(méi)有傳參,獲取第一個(gè)標(biāo)簽的節(jié)點(diǎn)內(nèi)容
text方法沒(méi)有傳參,獲取所有標(biāo)簽的文本內(nèi)容拼接在一起返回
html如果傳遞了參數(shù)表示設(shè)置標(biāo)簽的內(nèi)容覆蓋之前的內(nèi)容,傳遞的是標(biāo)簽加內(nèi)容會(huì)覆蓋之前的標(biāo)簽和內(nèi)容
text傳遞參數(shù)是標(biāo)簽，則以文本形式展示
? ? ? ? val（）獲取修改input里面的內(nèi)容
(jquery轉(zhuǎn)換DOM的常見(jiàn)方法)
jquery ：$(標(biāo)簽).html()
DOM ： ?標(biāo)簽.innerHTML
注意:
DOM對(duì)象訪問(wèn) jQ的實(shí)例對(duì)象 ?==> $(DOM標(biāo)簽).html();
? ? ? ?jQ實(shí)例對(duì)象訪問(wèn)DOM對(duì)象 ? ?==> ?jQ[i].innerHTML | ?jQ.get(i).innerHTML ?i為下標(biāo), ? jQ 表示 $(標(biāo)簽)
4.$.trim()方法
作用:清除字符串前面和后面的空格
兼容性處理
function f(str) {
if(str.trim) {
return str.trim();
}
? ? ? ? else {}
十三：js的綁定監(jiān)聽事件（js知識(shí)）
監(jiān)聽DOM加載事件
作用:給DOM添加事件監(jiān)聽
document.addEventListener("事件類型",function () {
//表示等DOM構(gòu)造完成就執(zhí)行這里的代碼
console.log(document.getElementsByTagName("div")[0]);
})
第一個(gè)參數(shù):要監(jiān)聽的事件(DOM加載完畢) 比如onreadystatechange，load等原生的事件
第二個(gè)參數(shù):事件發(fā)生后的回調(diào)函數(shù)
十四：store框架文件用法
查詢:store.get(key)
保存:store.set(key,value) “data”為key
清空:store.clear()
一般用sessionstorage和localStorage等
十五：jquery中的ajax使用方法
1.Ajax-load方法
語(yǔ)法:$(selector).load(URL,data,callback);
參數(shù)一為路徑。路徑后面可以加指定的id或者類名標(biāo)簽等
參數(shù)二為添加的參數(shù)(JSON對(duì)象|查詢字符串)返回給服務(wù)器端。不要有空格
參數(shù)三為回調(diào)函數(shù) 一般不寫
注意點(diǎn):
1) 對(duì)返回的結(jié)果支持使用選擇器來(lái)進(jìn)行篩選
2)默認(rèn)情況下,發(fā)送的是GET請(qǐng)求
3) load方法在使用的時(shí)候,支持提交參數(shù)到服務(wù)器端
參數(shù)的格式支持兩種情況:
[1] JSON對(duì)象 發(fā)送的網(wǎng)絡(luò)請(qǐng)求是POST請(qǐng)求
[2] 查詢字符串 發(fā)送的網(wǎng)絡(luò)請(qǐng)求是GET請(qǐng)求
2.Ajax-get方法
語(yǔ)法:$.get(url,data,function(respoonse,status,xhr){},dataType)
參數(shù) url:請(qǐng)求路徑
data:參數(shù)(JSON對(duì)象|查詢字符串)
第三個(gè)參數(shù):請(qǐng)求完成的回調(diào)函數(shù)
response:服務(wù)器返回的響應(yīng)體
status: ?網(wǎng)絡(luò)請(qǐng)求狀態(tài)(success | error)
xhr: ? ? 請(qǐng)求對(duì)象
dataType:期望服務(wù)器返回的數(shù)據(jù)類型:json | xml | script |jsonP | text ? 一般不寫
3.Ajax-post方法
語(yǔ)法:$.post(url,data,function(respoonse,status,xhr){},dataType)
參數(shù) url:請(qǐng)求路徑
data:參數(shù)(JSON對(duì)象|查詢字符串)
第三個(gè)參數(shù):請(qǐng)求完成的回調(diào)函數(shù)
response:服務(wù)器返回的響應(yīng)體
status: ?網(wǎng)絡(luò)請(qǐng)求狀態(tài)(success | error)
xhr: ? ? 請(qǐng)求對(duì)象
dataType:期望服務(wù)器返回的數(shù)據(jù)類型:json | xml | script |jsonP | text ? 一般不寫
4.Ajax-ajax方法
語(yǔ)法：
(1) $.ajax(url,{})
(2) $.ajax({})
參數(shù)：
url: 請(qǐng)求路徑(不帶參數(shù))
type: 請(qǐng)求方法 GET|POST
data: 設(shè)置參數(shù)(JSON對(duì)象|查詢字符串)
success:請(qǐng)求成功的回調(diào)函數(shù)
回調(diào)函數(shù)參數(shù)response:響應(yīng)體
status:響應(yīng)的狀態(tài)
xhr:請(qǐng)求對(duì)象
async:設(shè)置是否發(fā)送異步請(qǐng)求 默認(rèn)是異步
cache:是否要進(jìn)行緩存處理
timeout:請(qǐng)求超時(shí)的時(shí)間
beforeSend:請(qǐng)求發(fā)送前要執(zhí)行的回調(diào)函數(shù)
complete:請(qǐng)求完成執(zhí)行的回調(diào)函數(shù)
context:設(shè)置所有回調(diào)函數(shù)中this(上下文)指向特定的jQ實(shí)例對(duì)象
dataType:預(yù)期服務(wù)器返回的數(shù)據(jù)類型
error:請(qǐng)求失敗時(shí)調(diào)用此函數(shù)
? ? ? ? ? ? ?回調(diào)函數(shù)參數(shù)XMLHttpRequest, textStatus, errorThrown
5.jQuery框架Ajax事件方法
1.jQ().ajaxStart() ?監(jiān)聽網(wǎng)絡(luò)請(qǐng)求開始(第一個(gè))
2.jQ().ajaxStop() ? 監(jiān)聽網(wǎng)絡(luò)請(qǐng)求結(jié)束(最后一個(gè))
1.jQ().ajaxSend() ? 監(jiān)聽網(wǎng)絡(luò)請(qǐng)求開始(每一個(gè))
2.jQ().ajaxComplete() ? 監(jiān)聽網(wǎng)絡(luò)請(qǐng)求結(jié)束(每一個(gè))
6.jQuery框架Ajax序列化操作
1.把表單中所有的key-value轉(zhuǎn)換為字符串
"data":$("form").serialize()
2.把表單中所有的key-value轉(zhuǎn)換為查詢字符串
? ? ? ? ? $("#demo").serializeArray()
方法說(shuō)明：
load( url, [data], [callback] ) 裝入一個(gè)遠(yuǎn)程HTML內(nèi)容到一個(gè)DOM結(jié)點(diǎn)。
[javascript]view plaincopy
//例1??
$("#feeds").load("feeds.html");?將feeds.html文件載入到id為feeds的div中??
//例2??
$("#feeds").load("feeds.php",?{limit:?25},?function(){??
alert("The?last?25?entries?in?the?feed?have?been?loaded");??
});???
jQuery.get( url, [data], [callback] ) 使用GET請(qǐng)求一個(gè)頁(yè)面。?
[javascript]view plaincopy
$.get("test.cgi",?{?name:?“John",?time:?“2pm"?},?function(data){??
alert("Data?Loaded:?"?+?data);??
});???
jQuery.post( url, [data], [callback], [type] ) 使用POST請(qǐng)求一個(gè)頁(yè)面。和get一樣
$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
? ? $("span").html(result);
? });
jQuery.getJSON( url, [data], [callback] ) 使用GET請(qǐng)求JSON數(shù)據(jù)。
[javascript]view plaincopy
$.getJSON("test.js",?{?name:?“John",?time:?“2pm"?},?function(json){??
alert("JSON?Data:?"?+?json.users[3].name);??
});???
jQuery.getScript( url, [callback] ) 使用GET請(qǐng)求javascript文件并執(zhí)行。?
$.getScript("test.js",?function(){??
alert("Script?loaded?and?executed.");??
});???
ajaxComplete( callback ) 當(dāng)一個(gè)AJAX請(qǐng)求結(jié)束后，執(zhí)行一個(gè)函數(shù)。這是一個(gè)Ajax事件?
[javascript]view plaincopy
$("#msg").ajaxComplete(function(request,?settings){??
$(this).append("
});???
ajaxError( callback ) 當(dāng)一個(gè)AJAX請(qǐng)求失敗后，執(zhí)行一個(gè)函數(shù)。這是一個(gè)Ajax事件?
[javascript]view plaincopy
$("#msg").ajaxError(function(request,?settings){??
$(this).append("
});???
ajaxSend( callback ) 在一個(gè)AJAX請(qǐng)求發(fā)送時(shí)，執(zhí)行一個(gè)函數(shù)。這是一個(gè)Ajax事件?
[javascript]view plaincopy
$("#msg").ajaxSend(function(evt,?request,?settings){??
$(this).append("
});???
ajaxStart( callback ) 在一個(gè)AJAX請(qǐng)求開始但還沒(méi)有激活時(shí)，執(zhí)行一個(gè)函數(shù)。這是一個(gè)Ajax事件?
[javascript]view plaincopy
//當(dāng)AJAX請(qǐng)求開始(并還沒(méi)有激活時(shí))顯示loading信息??
$("#loading").ajaxStart(function(){??
$(this).show();??
});???
ajaxStop( callback ) 當(dāng)所有的AJAX都停止時(shí)，執(zhí)行一個(gè)函數(shù)。這是一個(gè)Ajax事件?
[javascript]view plaincopy
//當(dāng)所有AJAX請(qǐng)求都停止時(shí)，隱藏loading信息。??
$("#loading").ajaxStop(function(){??
$(this).hide();??
});???
ajaxSuccess( callback ) 當(dāng)一個(gè)AJAX請(qǐng)求成功完成后，執(zhí)行一個(gè)函數(shù)。這是一個(gè)Ajax事件?
[javascript]view plaincopy
//當(dāng)AJAX請(qǐng)求成功完成時(shí)，顯示信息。??
$("#msg").ajaxSuccess(function(evt,?request,?settings){??
$(this).append("
});???
jQuery.ajaxSetup( options ) 為所有的AJAX請(qǐng)求進(jìn)行全局設(shè)置。查看$.ajax函數(shù)取得所有選項(xiàng)信息。
[javascript]view plaincopy
//設(shè)置默認(rèn)的全局AJAX請(qǐng)求選項(xiàng)。??
$.ajaxSetup({??
??url:?“/xmlhttp/",??
global:false,??
??type:?“POST"??
});???
$.ajax({ data: myData });?
serialize( ) 以名稱和值的方式連接一組input元素。實(shí)現(xiàn)了正確表單元素序列?
[javascript]view plaincopy
function?showValues()?{??
var?str?=?$("form").serialize();??
$("#results").text(str);??
}??
$(":checkbox,?:radio").click(showValues);??
$("select").change(showValues);??
showValues();???
serializeArray( ) 連接所有的表單和表單元素(類似于.serialize()方法)，但是返回一個(gè)JSON數(shù)據(jù)格式。
[javascript]view plaincopy
//從form中取得一組值，顯示出來(lái)??
function?showValues()?{??
var?fields?=?$(":input").serializeArray();??
??alert(fields);??
$("#results").empty();??
jQuery.each(fields,function(i,?field){??
$("#results").append(field.value?+?"?“);??
??});??
}??
$(":checkbox,?:radio").click(showValues);??
$("select").change(showValues);??
showValues(); ?
