目錄
1. 概述
1.1 jQuery？
2. jQuery的使用
2.1 下載
2.2 jQuery 的入口函數
2.3 jQuery的頂級對象 $
2.3.1 $ 是jQuery的別稱
2.3.2 $ 是 jQuery的頂級對象
2.4 jQuery對象和DOM對象
2.4.1 兩種對象之間的相互轉換
3. jQuery 選擇器
3.1 基礎選擇器
3.2 層級選擇器
3.3 隱式迭代
3.4 篩選選擇器
3.5 篩選方法
3.6 jQuery的排他思想
4. jQuery樣式操作
4.1 css方法
4.2 操作類
4.3 類操作與className的區別
5. jQuery 效果
5.1 顯示隱藏效果
5.2 滑動效果
5.3 動畫隊列及停止其排隊的方法
5.3.1 動畫（效果）隊列
5.3.2 停止排隊
5.4 淡入淡出效果
5.5 自定義動畫 animate()
6. jQuery 屬性操作
6.1 設置或獲取元素固有屬性值 prop()
6.1.1 獲取屬性語法
6.1.2 設置屬性語法
6.2 設置或獲取元素自定義屬性值 attr()
6.3 數據緩存data()
7. jQuery 內容文本值
7.1 普通元素內容html()（相當於原生js中的innerHTML）
7.2 普通元素文本內容text()（相當於原生js中的innerText）
7.3 表單的值val()（相當於原生value）
8. 元素操作
8.1 遍歷操作
8.2 創建元素
8.3 添加元素
8.3.1 內部添加
8.3.2 外部添加
8.4 刪除元素
1. 概述
1.1 jQuery？
jQuery是一個快速、簡潔的JavaScript 庫,其設計的宗旨是"write Less , Do More”, 即倡導寫更少的代碼,
做更多的事情。
j就是JavaScript; Query 查詢;意思就是查詢js ,把js中的DOM操作做了封裝,我們可以快速的查詢使用里
面的功能。
jQuery封裝了JavaScript常用的功能代碼,優化了DOM操作、事件處理、動畫設計和Ajax交互。
學習jQuery本質:就是學習調用這些函數(方法)。
優點：
輕量級。核心文件才幾+kb,不會影響頁面加載速度
跨瀏覽器兼容。基本兼容了現在主流的瀏覽器
鏈式編程、隱式迭代
對事件、樣式、動畫支持.大大簡化了DOM操作
支持插件擴展開發。有着豐富的第三方的插件,例如:樹形菜單、日期控件.輪播圖等
免費、開源
2. jQuery的使用
2.1 下載
官網：https://jquery.com/
版本：
1x :兼容IE 678等低版本瀏覽器,官網不再更新
2x :不兼容IE 678等低版本瀏覽器,官網不再更新
3x : 不兼容IE 678等低版本瀏覽器,是官方主要更新維護的版本
各版本下載地址：http://code.jquery.com/
2.2 jQuery 的入口函數
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
// 方法1 這種寫法更簡單
$(function(){
...//此處是頁面DOM加載完成的入口
});
// 方法2
$(document.ready(function(){
...//此處是頁面DOM加載完成的入口
}));
</script>
</body>
等着DOM結構渲染完畢即可執行內部代碼,不必等到所有外部資源加載完成, jQuery幫我們完成了封裝。
相當於原生js中的DOMContentLoaded.
不同於原生js中的load事件是等頁面文檔、外部的js文件、css文件、 圖片加載完畢才執行內部代碼。
2.3 jQuery的頂級對象 $
2.3.1 $ 是jQuery的別稱
上面的代碼中的‘$’符號可以換成‘jQuery’，代碼正常運行
2.3.2 $ 是 jQuery的頂級對象
相當於原生JavaScript中的window.把元素利用$包裝成Query對象,就可以調用jQuery的方法。
2.4 jQuery對象和DOM對象
DOM對象：原生js代碼獲取來的對象
jQuery對象：jQuery方法獲取的元素
jQuery對象的本質：利用$對DOM對象包裝后產生的對象(偽數組形式存儲)。
jQuery對象只能使用jQuery 方法，DOM對象則使用原生的JavaScirpt 屬性和方法
2.4.1 兩種對象之間的相互轉換
1. DOM對象轉換成jQuery對象： $(DOM對象)
$('div')
2. jQuery對象轉換成DOM對象
//方法1
$('div')[index]//index是索引號
//方法2
$('div').get(index)//index是索引號
3. jQuery 選擇器
3.1 基礎選擇器
名稱 用法 描述
ID選擇器 $("#id") 獲取指定ID的元素
全選選擇器 $('*') 匹配所有元素
類選擇器 $(".lass") 獲取同一類class的元素
標簽選擇器 $("div") 獲取同一類標簽的所有元素
並集選擇器 s("div,p,i") 選取多個元素
交集選擇器 $("li.current") 交集元素
3.2 層級選擇器
名稱 用法 描述
子代選擇器 $("ul>li"); 使用>號,獲取親兒子層級的元素;注意,並不會獲取孫子層級的元素
后代選擇器 $("u2 li"); 使用空格，代表后代選擇器，獲取u下的所有1i元素,包括孫子等
3.3 隱式迭代
遍歷內部DOM元素(偽數組形式存儲)的過程就叫做隱式迭代。
簡單理解:給匹配到的所有元素進行循環遍歷,執行相應的方法,而不用我們再進行循環,簡化我們的操作,方便我們調用。
3.4 篩選選擇器
語法 用法 描述
:first $('li:first') 獲取第一個li元素
:last $('li:last') 獲取最后一個li元素
:eq(index) $("li:eq(2)") 獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始。
:odd $("li:odd") 獲取到的li元素中，選擇索引號為奇數的元素
:even $('li:even") 獲取到的li元素中，選擇索引號為偶數的元素
3.5 篩選方法
語法 用法 說明
parent() $("li").parent(); 查找父級,最近一級(親爸爸)
children(selector) $("ul").children("li") 相當於$("ul>li"),最近一級(親兒子)
find(selector) $("ul").find("li"); 相當於$("ul Ii"),后代選擇器
siblings(selector) $(". first").siblings("li"); 查找兄弟節點，不包括自己（類名first的元素）本身
nextAll([expr]) $(".first").nextAll() 查找當前元素之后所有的同輩元素
prevtAll([expr]) $(" . last").prevAll() 查找當前元素之前所有的同輩元素
hasClass(class) $('div').hasClass("protected" ) 檢查當前的元素是否含有某個特定的類，如果有，則返回true
eq( index)
$("li").eq(2);
相當於$("li:eq(2)"), index從0開始
3.6 jQuery的排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<button>點一下</button>
<button>點一下</button>
<button>點一下</button>
<button>點一下</button>
<button>點一下</button>
<button>點一下</button>
<button>點一下</button>
<script>
$(function() {
// 隱式迭代，給所有按鈕都綁定了點擊事件
$("button").click(function() {
$(this).css("background", "blue");
$(this).siblings("button").css("background", "");
});
})
</script>
</body>
</html>
4. jQuery樣式操作
4.1 css方法
參數只寫屬性名,則是返回屬性值
$(this).css("color");
參數是屬性名,屬性值,逗號分隔,是設置一組樣式，屬性必須加引號,值如果是數字可以不用跟單位和引號
$(this).css("color","red");
參數可以是對象形式,方便設置多組樣式。屬性名和屬性值用冒號隔開,屬性可以不用加引號,
$(this).css({
color:"white",
width:20
});
4.2 操作類
作用等同於以前的classList ,可以操作類樣式，注意操作類里面的參數不要加點
添加類 addClass() //追加類名，不影響原來的類名
$("div").click(function() {
$(this).addClass("current");
});
刪除類 removeClass()
$("div").click(function() {
$(this).removeClass("current");
});
切換類 toggleClass()
$("div").click(function() {
$(this).toggleClass("current");
});
4.3 類操作與className的區別
原生JS中className會覆蓋元素原先里面的類名。
jQuery.里面類操作只是對指定類進行操作,不影響原先的類名。
5. jQuery 效果
jQuery封裝的動畫效果，常見的：
顯示隱藏 滑動 淡入淡出 自定義動畫
show() slideDown() fadeln() animate()
hide() slideUp() fadeOut()
toggle() slideToggle() fadeToggle()
fadeTo()
5.1 顯示隱藏效果
語法：show ([speed, [easing], [fn]])
hide([speed, [easing], [fn]])
參數：
參數都可以省略,無動畫直接顯示。
speed:三種預定速度之-的字符串( "slow" ，"normal" . or "fast" )或表示動畫時長的毫秒數值(如: 1000)。
easing : (Optional)用來指定切換效果,默認是“swing” , 可用參數"linear” 。
fn:回調函數,在動畫完成時執行的函數,每個元素執行一次。
jQuery API 速查表，查看方法的使用
5.2 滑動效果
語法:slideDown([speed, [easing], [fn]])
slideUp([speed, [easing], [fn]])
slideToggle([speed, [easing], [fn]])
參數說明與現實隱藏效果的參數說明一致
5.3 動畫隊列及停止其排隊的方法
5.3.1 動畫（效果）隊列
動畫或者效果一旦觸發就會執行 ,如果多次觸發,就造成多個動畫或者效果排隊執行。
5.3.2 停止排隊
stop()
stop()方法用於停止動畫或效果
注意： stop()寫到動畫或效果的前面，相當於停止結束上一次的動畫
$(this).children("ul" ).stop().slideToggle();
5.4 淡入淡出效果
語法: fadeIn([speed, [easing], [fn]])
fadeOut([speed, [easing], [fn]])
fadeToggle([speed, [easing], [fn]])
參數說明與現實隱藏效果的參數說明一致
漸進方式調整到指定的不透明度
fadeTo ([[speed] , opacity, [easing], [fn]])
參數：
opacity透明度必須寫,取值0~1之間。
speed :三種預定速度之一 的字符串( "slow" ，"normal" , or "fast" )或表示動畫時長的毫秒數值(如: 1000)。 必須寫
easing : (Optional)用來指定切換效果,默認是“swing” ,可用參數"Iinear” .
fn:回調函數,在動畫完成時執行的函數,每個元素執行一次。
5.5 自定義動畫 animate()
animate (params, [speed], [easing], [fn])
參數：
params:想要更改的樣式屬性,以對象形式傳遞,必須寫。屬性名可以不用帶引號,如果是復合屬性則需要采取駝峰命名法borderleft.其余參數都可以省略。
speed:三種預定速度之一的字符串( "slow" ，"normal" , or "fast" )或表示動畫時長的毫秒數值(如: 1000)。
easing : (Optional)用來指定切換效果,默認是“swing”, 可用參數 "linear" 。
fn:回調函數,在動畫完成時執行的函數,每個元素執行一次。
<script>
$(function() {
$(”button").click(function() {
$("div" ). animate({
left: 500,
top：100
}, 500);
})
})
</script>
6. jQuery 屬性操作
6.1 設置或獲取元素固有屬性值 prop()
6.1.1 獲取屬性語法
prop("屬性名")
6.1.2 設置屬性語法
prop("屬性名","屬性值")
6.2 設置或獲取元素自定義屬性值 attr()
1.獲取屬性語法
attr("屬性") // 類似原生getAttribute()
2.設置屬性語法
attr("屬性"，"屬性值"”) // 類似原生setAttribute()
6.3 數據緩存data()
data0方法可以在指定的元素上存取數據,並不會修改DOM元素結構。一旦頁面刷新,之前存放的數據都將被移除。
$("span").data("uname",” andy");
console.1og($(" span") .data("uname" ));
1.附加數據語法
data("name","value") // 向被選元素附加數據
2.獲取數據語法
date("name") //向被選元素獲取數據
同時,還可以讀取HTML5自定義屬性data-index ，寫法【data("index")，省略了data- 】.得到的是數字型
7. jQuery 內容文本值
7.1 普通元素內容html()（相當於原生js中的innerHTML）
html()//獲取元素的內容
html("內容")//設置元素的內容
7.2 普通元素文本內容text()（相當於原生js中的innerText）
text()//獲取元素的內容
text("內容")//設置元素的內容
7.3 表單的值val()（相當於原生value）
val()//獲取元素的內容
val("內容")//設置元素的內容
8. 元素操作
主要是遍歷、創建、添加、刪除元素操作
8.1 遍歷操作
語法1
$("div") .each (function (index, domEle) { xxx; } )
.each()方法遍歷匹配的每一個元素。主要用DOM處理。each每 一個
里面的回調函數有2個參數: index 是每個元素的索引號; domEle是每個DOM元素對象,不是jquery對象
語法2：
$.each (object，function (index，element) {xxx;})
$.each()方法可用於遍歷任何對象。主要用於數據處理,比如數組,對象
里面的函數有2個參數: index 是每個元素的索引號; element 遍歷內容
$.each({
name: " andy" ,
age: 18
}, function(i, ele) {
console.1og(i); //輸出的是name age屬性名
console.1og(ele); //輸出的是andy 18 屬性值
})
8.2 創建元素
語法：
$("<li></li>"); //動態的創建了一個<li>
8.3 添加元素
8.3.1 內部添加
$("ul").append("<li></li>"); //添加到元素的后面，類似於appendChild
$("ul").prepend("<li></li>"); //添加到元素的最前面
8.3.2 外部添加
element.after("內容"); //加到后面
element.before("內容"); //加到前面
內部添加的元素是父子關系
外部添加的元素是兄弟關系
8.4 刪除元素
element.remove() //刪除匹配的元素(本身)
element.empty() // 刪除匹配的元素集合中所有的子節點
element.html("") //清空匹配的元素內容子節點
9. jQuery 尺寸、位置操作
9.1 jQuery 尺寸
語法 用法
width()/ height() 取得匹配元素寬度和高度值 只算width / height
innerWidth()/innerHeight() 取得匹配元素寬度和高度值 包含padding
outerWidth()/outerHeight() 取得匹配元素寬度和高度值 包含padding、border
outerWidth(true)/outerHeig(true) 取得匹配元素寬度和高度值 包含padding、border. margin
以上參數為空,則是獲取相應值,返回的是數字型。
如果參數為數字,則是修改相應值。
參數可以不必寫單位。
9.2 jQuery 位置
位置主要有三個: offset()、 position()、 scrollTop()/scrollLeft()
9.2.1 offset()設置或獲取元素偏移
offset0 方法設置或返回被選元素相對於文檔的偏移坐標,跟父級沒有關系。
該方法有2個屬性left、top. offset().top 用於獲取距離文檔頂部的距離, offset().left用於獲取距離文檔左側的距離。
可以設置元素的偏移: offset({ top: 10, left: 30 });
9.2.2 position()獲取元素偏移
position()方法用於返回被選元素相對於帶有定位的父級偏移坐標,如果父級都沒有定位,則以文檔為准。
這個方法只能獲取不能設置
9.2.3 scrollTop()/scrollLeft()設置或獲取元素被卷去的頭部和左側
scrollTop()方法設置或返回被選元素被卷去的頭部。
返回頂部
$(".back").click(function() {
// $(document) . scro11Top(0);
$("body, html").stop().animate({
scrol1Top: 0
});
})
————————————————
原文鏈接：https://blog.csdn.net/shirlyran/article/details/107593190