jQuery

通俗來(lái)說(shuō)，就是一個(gè)JS的庫(kù)，里面封裝了很多的JS方法，可以使前端人員去調(diào)用，大大減少了開(kāi)發(fā)的時(shí)間，增加了開(kāi)發(fā)的效率。

JQ的優(yōu)點(diǎn)

• 輕量級(jí)，核心文件才幾十KB，不會(huì)影響頁(yè)面的加載速度。
• 跨瀏覽器兼容。基本兼容了現(xiàn)在主流的瀏覽器。
• 鏈?zhǔn)骄幊?#xff0c;隱式迭代。
• 對(duì)事件，樣式，動(dòng)畫(huà)支持，大大簡(jiǎn)化了DOM操作。
• 支持插件擴(kuò)展開(kāi)發(fā)，有著豐富的第三方的插件，例如：輪播圖，樹(shù)形菜單，日期控件等
• 免費(fèi)，開(kāi)源。

JQ的頂級(jí)對(duì)象

• ‘’$‘’是JQ的別稱，代碼中科院用JQ代替它
• $是JQ的頂級(jí)對(duì)象，相當(dāng)于JS中的window把元素利用這個(gè)符號(hào)包裝成JQ的對(duì)象，就可以調(diào)用JQ的方法。

JQ對(duì)象和DOM對(duì)象的區(qū)別

DOM對(duì)象：
通過(guò)JS的屬性和方法獲得的對(duì)象
例：
var div = document.querySelector(‘div’);
JQ對(duì)象：
通過(guò)JQ的屬性和方法獲得的對(duì)象
$(‘div’);

DOM對(duì)象只能使用JS的屬性和方法，JQ對(duì)象只能使用JQ的屬性和方法，兩者不可以弄混

JQ對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換

JQ對(duì)象轉(zhuǎn)化為DOM對(duì)象
$（‘對(duì)象名’）【index】；
$對(duì)象是以偽數(shù)組的形式轉(zhuǎn)換。所以可以根據(jù)索引值來(lái)進(jìn)行選取轉(zhuǎn)換為DOM對(duì)象
DOM對(duì)象轉(zhuǎn)化為JQ對(duì)象
var mydiv = document.querySelector(‘div’);
$(mydiv) 注意：不加引號(hào)

JQ的屬性

隱式迭代

不需要在使用JS里面的for循環(huán)遍歷每一個(gè)元素。隱式迭代把匹配的所有元素內(nèi)部進(jìn)行一次遍歷，給每一個(gè)JQ獲取的元素加入CSS樣式。

篩選選擇器
**
**

JQCSS樣式的使用

addClass（‘類名’）：添加類注意類名不要加.
remoceClass(‘類名’): 移除類
toggleClass（‘類名’）：切換類

JQ操作和JS中ClassName的區(qū)別

JS中如果一個(gè)元素有一個(gè)類名，在JS代碼中，再賦予這個(gè)元素一個(gè)新的類名。則新類名會(huì)覆蓋原有的類名。這是JS類操作的一個(gè)一個(gè)確定

JQ中如果一個(gè)元素有一個(gè)類名，在JQ中，給這個(gè)元素賦予一個(gè)新的類名，則這個(gè)新的類名會(huì)追加到元素的屬性上，不會(huì)更改原有的類名

JQ顯示 隱藏 切換動(dòng)畫(huà)效果

顯示：show( [speed],[]easing],[fn])
隱藏：hide( [speed],[]easing],[fn])
切換：toggle( [speed],[]easing],[fn])

speed：預(yù)定速度
slow 慢 normal正常 fast快，或者直接設(shè)置毫秒數(shù)值
easing：切換效果 swing
fn:回調(diào)函數(shù)，執(zhí)行完動(dòng)畫(huà)以后執(zhí)行的函數(shù)

JQ滑動(dòng)效果

slideUp（）上滑
sildeDown（）下滑
slideToggle（）切換，切換效果為上滑或者下滑

JQ自定義動(dòng)畫(huà)

animate(params， [speed],[]easing],[fn])
params是自定義的樣式，必須寫(xiě)。直接在里面寫(xiě)運(yùn)動(dòng)結(jié)束的樣式，即可。如果要改變?cè)氐奈恢?#xff0c;加入left方位詞，則需要給元素加上定位。

JQ元素的屬性操作

prop： 獲得元素本身的屬性
例
a元素自帶herf屬性，我們就可以通過(guò)prop進(jìn)行獲取
語(yǔ)法格式：
$(‘元素名’).prop(‘屬性名’，‘更改的內(nèi)容’)；

attr：獲得元素自定義屬性
例
我們經(jīng)常給div設(shè)置index值，方便我們找到對(duì)應(yīng)的元素，這個(gè)index就屬于自定義屬性。而我們通過(guò)attr的方法可以更改這個(gè)屬性的值。
$(‘元素名’).prop(‘屬性名’，‘更改的內(nèi)容’)；

JQ設(shè)置內(nèi)容

獲取設(shè)置元素的內(nèi)容 html（）；
//html()會(huì)獲取 指定元素下的標(biāo)簽名加文本內(nèi)容，如果指定元素下沒(méi)有子元素，則不獲取標(biāo)簽名

獲取設(shè)置元素的文本內(nèi)容text（）；
//text(); 不獲取標(biāo)簽名。只獲取文本內(nèi)容

設(shè)置input里面的表單值 val（）；
$(‘input’).val(‘123’);

val與text和html最大的區(qū)別就是
如果用戶需要先輸入自己的值的話，我們需要用input輸入框，我們必須用var去接受input的文本內(nèi)容，用text和html接受的內(nèi)容為空。
如果用戶不需要自己去輸入所需要的值，我們就不需要用input輸入框，可以通過(guò)text html去改變和獲取內(nèi)容和值。

JQ遍歷對(duì)象的方法

JQ遍歷對(duì)象：each
語(yǔ)法格式：
$(‘元素名’).each(function(索引號(hào)，DOM對(duì)象))
注意：
DOM對(duì)象 獲取的是DOM對(duì)象，DOM對(duì)象不能直接用JQ的方法，需要轉(zhuǎn)化為JQ對(duì)象。
例：

$(function() {// $("div").css("color", "red");// 如果針對(duì)于同一類元素做不同操作，需要用到遍歷元素（類似for，但是比f(wàn)or強(qiáng)大）var sum = 0;// 1. each() 方法遍歷元素 var arr = ["red", "green", "blue"];$("div").each(function(i, domEle) {// 回調(diào)函數(shù)第一個(gè)參數(shù)一定是索引號(hào) 可以自己指定索引號(hào)號(hào)名稱// console.log(index);// console.log(i);// 回調(diào)函數(shù)第二個(gè)參數(shù)一定是 dom元素對(duì)象 也是自己命名// console.log(domEle);// domEle.css("color"); dom對(duì)象沒(méi)有css方法$(domEle).css("color", arr[i]);})

JQ操作元素

創(chuàng)建元素

var li = $("<li>我是后來(lái)創(chuàng)建的li</li>");

添加元素
內(nèi)部添加

$("ul").append(li); //內(nèi)部添加并且放到內(nèi)容的最后面 $("ul").prepend(li); // 內(nèi)部添加并且放到內(nèi)容的最前面

外部添加

$(".test").after(div); $(".test").before(div);

兩者添加的區(qū)別：
內(nèi)部添加是在一個(gè)元素里，添加子元素。
外部添加是指定一個(gè)元素，添加兄弟元素

刪除元素

$("ul").remove(); //可以刪除匹配的元素 自殺 $("ul").empty(); // 可以刪除匹配的元素里面的子節(jié)點(diǎn) 孩子

remove 是刪除元素本身
empty 是刪除元素里面的子元素

JQ獲得元素的寬和高

JQ獲得元素的偏移量

offset（）；
語(yǔ)法：

$（‘屬性名’）.offset();

輸出的是偽數(shù)組的形式；
獲取元素的偏移量

$（‘屬性名’）.offset().top;

更改元素的偏移量

$（‘屬性名’）.offset({left: 100;top: 100; })

注意： 該方法不受定位的影響，獲取的元素只顯示跟html的偏移量

position（）；
語(yǔ)法
$(‘屬性名’).position()
獲得是該元素與含有定位的父元素之間的偏移量。如果父元素沒(méi)有定位，則以html為準(zhǔn)

兩種方法的區(qū)別：
offset（）：該方法不受定位的影響，始終獲取與html之間的偏移量，可以獲取和更改偏移量；
position（）：該方法受定位的影響，會(huì)獲取與父元素之間的偏移量。只能獲取偏移量，不可以更改偏移量。

JQ事件綁定

on（）可以綁定一個(gè)或者多個(gè)事件。
on（‘方法名’，function（））
語(yǔ)法：

$('元素名').on({事件名：function(){ 需要進(jìn)行的操作；}， 事件名：function(){需要進(jìn)行的操作；}， }) 例： $("div").on({mouseenter: function() {$(this).css("background", "skyblue");},click: function() {$(this).css("background", "purple");},mouseleave: function() {$(this).css("background", "blue");}});

如果兩個(gè)事件的結(jié)果可以切換，例如：滑入滑出，顯示隱藏，或者添加與刪除類名可以用一個(gè)函數(shù)來(lái)完成
語(yǔ)法格式：

$('元素名').on('事件名 事件名'，function(){ $(this).toggleClass('定義的類名') }) 例： $("div").on("mouseenter mouseleave", function() {$(this).toggleClass("current");});

事件委托
click 是綁定在ul 身上的，但是 觸發(fā)的對(duì)象是 ul 里面的小li

$("ul").on("click", "li", function() {alert(11);});

on可以給未來(lái)動(dòng)態(tài)創(chuàng)建的元素綁定事件

如果有單個(gè)事件綁定的方式，該方法不能讀取動(dòng)態(tài)創(chuàng)建的其他元素 但是如果用on事件就行綁定，可以讀取動(dòng)態(tài)創(chuàng)建的元素 如果用單個(gè)綁定事件的方法，如該例， 下面動(dòng)態(tài)創(chuàng)建的小li無(wú)法綁定事件。$("ol li").click(function() { alert(11); }) 如果使用on一個(gè)或者多個(gè)事件的綁定方法，可以讀取下面的小li$("ol").on("click", "li", function() {alert(11);})var li = $("<li>我是后來(lái)創(chuàng)建的</li>");$("ol").append(li);})

JQ解綁事件 off

$(‘元素名’).off();
解除指定元素身上的所有on綁定事件
例

$("div").off(); // 這個(gè)是解除了div身上的所有事件

$(‘元素名’).off(‘方法名’);
解除指定元素身上的指定方法

$("div").off("click"); // 這個(gè)是解除了div身上的點(diǎn)擊事件

$(‘元素名’).off(‘方法名’，‘元素名’);
解除指定元素的事件委托

$("ul").off("click", "li");

one 綁定事件
顧名思義，只能觸發(fā)一次的事件，第二次觸發(fā)不生效

$("p").one("click", function() {alert(11);})})

JQ自動(dòng)觸發(fā)事件：trigger

自動(dòng)觸發(fā)事件有三種方式

• 元素.事件—$(‘div’).click();
• 元素.trigger—$(‘div’).trigger();
• 元素.triggerHandler—$(‘div’).triggerHandler();

注意
三種方式的區(qū)別在于，前兩種自動(dòng)觸發(fā)事件會(huì)觸發(fā)元素的默認(rèn)行為，但是第三種triggerHandler方式不會(huì)觸發(fā)元素的默認(rèn)行為。
例：

$("input").on("focus", function() {$(this).val("你好嗎");});//不會(huì)觸發(fā)光標(biāo)無(wú)限閃動(dòng)事件$("input").triggerHandler("focus");//會(huì)觸發(fā)光標(biāo)無(wú)限閃動(dòng)事件$("input").trigger("focus");$("input").focus();

JQ對(duì)象拷貝

語(yǔ)法：$.(extend)([deep],被拷貝對(duì)象，拷貝對(duì)象)
deep：有兩個(gè)參數(shù)，true fales 默認(rèn)為fales
true是深拷貝 將拷貝對(duì)象的復(fù)雜數(shù)據(jù)完全復(fù)制一份給被拷貝對(duì)象，如果修改被拷貝對(duì)象的值，不會(huì)影響原拷貝對(duì)象。
fales是淺拷貝，將拷貝對(duì)象中的復(fù)雜數(shù)據(jù)類型的地址給被拷貝對(duì)象，如果修改被拷貝對(duì)象的值，會(huì)影響原拷貝對(duì)象。
例：

//被拷貝對(duì)象中數(shù)據(jù)為空時(shí)var a = {};var b = {id:0,name:'son'};$.extend(a,b);console.log(a);//被拷貝對(duì)象中數(shù)據(jù)不為空時(shí)var a = {id:1};var b = {id:0,name:'son'};$.extend(a,b);console.log(a);//a里面的簡(jiǎn)單數(shù)據(jù)會(huì)被覆蓋//有復(fù)雜對(duì)象時(shí)的 淺拷貝var a = {id:1};var b = {id:0,name:'son',msg:{num:11}};$.extend(a,b);a.msg.num = 12;console.log(a);console.log(b);//發(fā)現(xiàn)b的復(fù)雜數(shù)據(jù)類型中的num的值也發(fā)生了改變。//淺拷貝是賦予復(fù)雜類型的地址，所以會(huì)受到影響//有復(fù)雜對(duì)象時(shí)的 深拷貝var a = {id:1};var b = {id:0,name:'son',msg:{num:11}};$.extend(true,a,b);a.msg.num = 12;console.log(a);console.log(b);//發(fā)現(xiàn)b的復(fù)雜數(shù)據(jù)類型中的num的值沒(méi)有發(fā)生了改變。//深拷貝是完全的拷貝一份，所以不受影響

JQ多庫(kù)共存

jQuery使用$作為標(biāo)識(shí)符，一些別的JS庫(kù)也會(huì)使用
$作為標(biāo)識(shí)符，這樣就會(huì)造成沖突。
解決方案

• 將標(biāo)識(shí)符全部用jQuery表示
• 自己定義JQ的標(biāo)識(shí)符： var 自己定義標(biāo)識(shí)符=jQuery.noConflict();

總結(jié)

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

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