jQuery

通俗來說，就是一個JS的庫，里面封裝了很多的JS方法，可以使前端人員去調用，大大減少了開發的時間，增加了開發的效率。

JQ的優點

• 輕量級，核心文件才幾十KB，不會影響頁面的加載速度。
• 跨瀏覽器兼容。基本兼容了現在主流的瀏覽器。
• 鏈式編程，隱式迭代。
• 對事件，樣式，動畫支持，大大簡化了DOM操作。
• 支持插件擴展開發，有著豐富的第三方的插件，例如：輪播圖，樹形菜單，日期控件等
• 免費，開源。

JQ的頂級對象

• ‘’$‘’是JQ的別稱，代碼中科院用JQ代替它
• $是JQ的頂級對象，相當于JS中的window把元素利用這個符號包裝成JQ的對象，就可以調用JQ的方法。

JQ對象和DOM對象的區別

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

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

JQ對象和DOM對象的相互轉換

JQ對象轉化為DOM對象
$（‘對象名’）【index】；
$對象是以偽數組的形式轉換。所以可以根據索引值來進行選取轉換為DOM對象
DOM對象轉化為JQ對象
var mydiv = document.querySelector(‘div’);
$(mydiv) 注意：不加引號

JQ的屬性

隱式迭代

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

篩選選擇器
**
**

JQCSS樣式的使用

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

JQ操作和JS中ClassName的區別

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

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

JQ顯示 隱藏 切換動畫效果

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

speed：預定速度
slow 慢 normal正常 fast快，或者直接設置毫秒數值
easing：切換效果 swing
fn:回調函數，執行完動畫以后執行的函數

JQ滑動效果

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

JQ自定義動畫

animate(params， [speed],[]easing],[fn])
params是自定義的樣式，必須寫。直接在里面寫運動結束的樣式，即可。如果要改變元素的位置，加入left方位詞，則需要給元素加上定位。

JQ元素的屬性操作

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

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

JQ設置內容

獲取設置元素的內容 html（）；
//html()會獲取 指定元素下的標簽名加文本內容，如果指定元素下沒有子元素，則不獲取標簽名

獲取設置元素的文本內容text（）；
//text(); 不獲取標簽名。只獲取文本內容

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

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

JQ遍歷對象的方法

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

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

JQ操作元素

創建元素

var li = $("<li>我是后來創建的li</li>");

添加元素
內部添加

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

外部添加

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

兩者添加的區別：
內部添加是在一個元素里，添加子元素。
外部添加是指定一個元素，添加兄弟元素

刪除元素

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

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

JQ獲得元素的寬和高

JQ獲得元素的偏移量

offset（）；
語法：

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

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

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

更改元素的偏移量

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

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

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

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

JQ事件綁定

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

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

如果兩個事件的結果可以切換，例如：滑入滑出，顯示隱藏，或者添加與刪除類名可以用一個函數來完成
語法格式：

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

事件委托
click 是綁定在ul 身上的，但是 觸發的對象是 ul 里面的小li

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

on可以給未來動態創建的元素綁定事件

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

JQ解綁事件 off

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

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

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

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

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

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

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

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

JQ自動觸發事件：trigger

自動觸發事件有三種方式

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

注意
三種方式的區別在于，前兩種自動觸發事件會觸發元素的默認行為，但是第三種triggerHandler方式不會觸發元素的默認行為。
例：

$("input").on("focus", function() {$(this).val("你好嗎");});//不會觸發光標無限閃動事件$("input").triggerHandler("focus");//會觸發光標無限閃動事件$("input").trigger("focus");$("input").focus();

JQ對象拷貝

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

//被拷貝對象中數據為空時var a = {};var b = {id:0,name:'son'};$.extend(a,b);console.log(a);//被拷貝對象中數據不為空時var a = {id:1};var b = {id:0,name:'son'};$.extend(a,b);console.log(a);//a里面的簡單數據會被覆蓋//有復雜對象時的 淺拷貝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);//發現b的復雜數據類型中的num的值也發生了改變。//淺拷貝是賦予復雜類型的地址，所以會受到影響//有復雜對象時的 深拷貝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);//發現b的復雜數據類型中的num的值沒有發生了改變。//深拷貝是完全的拷貝一份，所以不受影響

JQ多庫共存

jQuery使用$作為標識符，一些別的JS庫也會使用
$作為標識符，這樣就會造成沖突。
解決方案

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

總結

以上是生活随笔為你收集整理的JQ基础知识大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。