2019-6-25 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
文章目錄
jQuery
jQuery的安裝：
jQuery 語(yǔ)法
選擇器
基本選擇器：
層級(jí)選擇器
基本篩選器
樣式操作
表單篩選器
遍歷方法
jQuery鏈?zhǔn)讲僮?br />
jQuery 事件
$(document).ready()
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
input()
取消標(biāo)簽?zāi)J(rèn)的事件
事件冒泡
事件委托
jQuery自帶的動(dòng)畫效果
jQuery
jQuery的字面意思其實(shí)就是JavaScript和查詢（Query），即用于輔助開發(fā)JavaScript的庫(kù)。jQuery 極大地簡(jiǎn)化了 JavaScript 編程，jQuery使用戶可以更加方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，而且方便地為網(wǎng)站提供AJAX交互。
實(shí)例找到div標(biāo)簽并給div標(biāo)簽設(shè)置為紅色
原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
jQuery操作
$('#d1').css('color','blue');
1
2
3
4
5
jQuery的安裝：
您可以從網(wǎng)頁(yè)中添加 jQuery
1、從官網(wǎng)http://jquery.com/download/下載 jQuery 庫(kù)
里面分為：Production version（用于實(shí)際的網(wǎng)站中，已被精簡(jiǎn)和壓縮）和Development version（用于測(cè)試和開發(fā)，未壓縮，是可讀的代碼），一般使用Production version壓縮版本的。
2、從 CDN 中載入 jQuery, 如從 Google 或 百度 中加載 jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
或者
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
或者
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>
1
2
3
4
5
一定要先導(dǎo)入后使用
jQuery 語(yǔ)法
jQuery 語(yǔ)法是通過(guò)選取 HTML 元素，并對(duì)選取的元素執(zhí)行某些操作。
$(selector).action()
1
美元符號(hào)定義 jQuery
選擇符（selector）“查詢"和"查找” HTML 元素
jQuery 的 action() 執(zhí)行對(duì)元素的操作
選擇器
jQuery 選擇器可以對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作。 jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等查找HTML 元素。它基于已經(jīng)存在的 CSS 選擇器外，還有一些自定義的選擇器。
基本選擇器：
ID選擇器、類名選擇器、標(biāo)簽選擇器、組合選擇器
選擇器 實(shí)例 選取
* $("*") 所有元素
#id $("#d1") id=“d1” 的元素
.class $(".name") class=“name” 的所有元素
.class , .class $(".name,.password") class 為 “name” 或 “password” 的所有元素
*element $(“span”) 所有 <span> 元素
el1,el2,el3 $(“h1,div,p”) 所有 <h1>、<div> 和 <p> 元素
提出注意點(diǎn)，原生DOM查找和jQuery查找出來(lái)的結(jié)果區(qū)別DOM對(duì)象與jQuery對(duì)象
DOM對(duì)象與jQuery對(duì)象互相轉(zhuǎn)換
$('#d1')[0]
var d1Ele = document.getElementById('d1');
$(d1Ele)
1
2
3
4
層級(jí)選擇器
選擇器 實(shí)例 選取
parent > child $(“div > p”) <div> 元素的直接子元素的所有 <p> 元素
parent descendant $(“div p”) <div> 元素的后代的所有 <p> 元素
element + next $(“div + p”) 每個(gè) <div> 元素相鄰的下一個(gè) <p> 元素
element ~ siblings $(“div ~ p”) <div> 元素同級(jí)的所有 <p> 元素
基本篩選器
選擇器 實(shí)例 選取
:first $(“p:first”) 第一個(gè) <p> 元素
:last $(“p:last”) 最后一個(gè) <p> 元素
:even $(“tr:even”) 所有偶數(shù) <tr> 元素
:odd $(“tr:odd”) 所有奇數(shù) <tr> 元素
:gt(nu) $(“ul li:gt(3)”) 列舉 index 大于 3 的元素
:lt(nu) $(“ul li:lt(3)”) 列舉 index 小于 3 的元素
:eq(nu) $(“ul li:eq(3)”) 列舉 index 等于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不為空的輸入元素
:has(element) $(“div:has(a)”) 返回?fù)碛幸粋€(gè)或多個(gè)元素在其內(nèi)的所有元素
/用ul標(biāo)簽舉例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')
最后一個(gè)has的玩法需要寫個(gè)三個(gè)div:一個(gè)空div、一個(gè)兒子有a標(biāo)簽、一個(gè)兒子沒(méi)有a，孫子有a標(biāo)簽
$('div:has(a)')
輸出：
k.fn.init(3) [div, div#d2, div#d3, prevObject: k.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
樣式操作
方法 描述
addClass() 向被選元素添加一個(gè)或多個(gè)類名
after() 在被選元素后插入內(nèi)容
append() 在被選元素的結(jié)尾插入內(nèi)容
appendTo() 在被選元素的結(jié)尾插入 HTML 元素
attr() 設(shè)置或返回被選元素的屬性/值
before() 在被選元素前插入內(nèi)容
clone() 生成被選元素的副本
css() 為被選元素設(shè)置或返回一個(gè)或多個(gè)樣式屬性
detach() 移除被選元素（保留數(shù)據(jù)和事件）
empty() 從被選元素移除所有子節(jié)點(diǎn)和內(nèi)容
hasClass() 檢查被選元素是否包含指定的 class 名稱
height() 設(shè)置或返回被選元素的高度
html() 設(shè)置或返回被選元素的內(nèi)容
innerHeight() 返回元素的高度（包含 padding，不包含 border）
innerWidth() 返回元素的寬度（包含 padding，不包含 border）
insertAfter() 在被選元素后插入 HTML 元素
insertBefore() 在被選元素前插入 HTML 元素
offset() 設(shè)置或返回被選元素的偏移坐標(biāo)（相對(duì)于文檔）
offsetParent() 返回第一個(gè)定位的祖先元素
outerHeight() 返回元素的高度（包含 padding 和 border）
outerWidth() 返回元素的寬度（包含 padding 和 border）
position() 返回元素的位置（相對(duì)于父元素）
prepend() 在被選元素的開頭插入內(nèi)容
prependTo() 在被選元素的開頭插入 HTML 元素
prop() 設(shè)置或返回被選元素的屬性/值
remove() 移除被選元素（包含數(shù)據(jù)和事件）
removeAttr() 從被選元素移除一個(gè)或多個(gè)屬性
removeClass() 從被選元素移除一個(gè)或多個(gè)類
removeProp() 移除通過(guò) prop() 方法設(shè)置的屬性
replaceAll() 把被選元素替換為新的 HTML 元素
replaceWith() 把被選元素替換為新的內(nèi)容
scrollLeft() 設(shè)置或返回被選元素的水平滾動(dòng)條位置
scrollTop() 設(shè)置或返回被選元素的垂直滾動(dòng)條位置
text() 設(shè)置或返回被選元素的文本內(nèi)容
toggleClass() 在被選元素中添加/移除一個(gè)或多個(gè)類之間切換
unwrap() 移除被選元素的父元素
val() 設(shè)置或返回被選元素的屬性值（針對(duì)表單元素）
width() 設(shè)置或返回被選元素的寬度
常用實(shí)例：
三級(jí)菜單展示
$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
1
直接操作css屬性
// 兩個(gè)參數(shù)設(shè)置屬性
$('#p1').css('font-size','24px')
// 一個(gè)參數(shù)獲取屬性
$('#p1').css('font-size')
// 一次設(shè)置多個(gè)屬性
$('#p1').css({"border":"1px solid black","color":"blue"})
1
2
3
4
5
6
7
位置操作
// 不加參數(shù)獲取位置參數(shù)
$(".c3").offset()
// 加參數(shù)設(shè)置位置參數(shù)
$(".c3").offset({top:284,left:400})
// position只能獲取值，不能設(shè)置值
// scrollTop獲取當(dāng)前滾動(dòng)條偏移量
$('window').scrollTop();
$('window').scrollTop(0); // 設(shè)置滾動(dòng)條偏移量
1
2
3
4
5
6
7
8
9
10
文本操作
text() html() 不加參數(shù)獲取值，加參數(shù)設(shè)置值
val() 不加參數(shù)獲取值，加參數(shù)設(shè)置值
1
2
屬性操作
// 獲取文本屬性
$('#d1').attr('s1') // 獲取屬性值
$('#d1').attr('s1','haha') // 設(shè)置屬性值
$('#d1').attr({'num':50,'taidi':'gay'}) // 設(shè)置多個(gè)屬性
$('#d1').removeAttr('taidi') // 刪除一個(gè)屬性
// 獲取check與radio標(biāo)簽的checked屬性
$('#i1').prop('checked')
$('#i1').prop('checked',true)
1
2
3
4
5
6
7
8
9
文檔處理
// 標(biāo)簽內(nèi)部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))
// 標(biāo)簽內(nèi)部頭部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))
// 標(biāo)簽外部下面添加元素
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
// 標(biāo)簽外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
// 替換標(biāo)簽
replaceWith() // 什么被什么替換
replaceAll() // 拿什么替換什么
// 克隆事例
<button id="b2">屠龍寶刀，點(diǎn)擊就送</button>
// clone方法加參數(shù)true，克隆標(biāo)簽并且克隆標(biāo)簽帶的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this); // true參數(shù)
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
表單篩選器
選擇器 實(shí)例 選取
:input $(":input") 所有 input 元素
:text $(":text") 所有帶有 type=“text” 的 input 元素
:password $(":password") 所有帶有 type=“password” 的 input 元素
:checkbox $(":checkbox") 所有帶有 type=“checkbox” 的 input 元素
:submit $(":submit") 所有帶有 type=“submit” 的 input 元素
:reset $(":reset") 所有帶有 type=“reset” 的 input 元素
:button $(":button") 所有帶有 type=“button” 的 input 元素
:image $(":image") 所有帶有 type=“image” 的 input 元素
:file $(":file") 所有帶有 type=“file” 的 input 元素
:enabled $(":enabled") 所有啟用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有選定的 input 元素
:checked $(":checked") 所有選中的 input 元素
// 針對(duì)表單內(nèi)的標(biāo)簽
$('input[type="text"]')
// 簡(jiǎn)化寫法
$(':text')
// 找到所有被選中的checkbox
$(':checkbox') // 注意select框中默認(rèn)selected標(biāo)簽也會(huì)被找到
$('input:checkbox')
1
2
3
4
5
6
7
8
遍歷方法
方法 描述
add() 把元素添加到匹配元素的集合中
children() 返回被選元素的所有直接子元素
closest() 返回被選元素的第一個(gè)祖先元素
contents() 返回被選元素的所有直接子元素（包含文本和注釋節(jié)點(diǎn)）
each() 為每個(gè)匹配元素執(zhí)行函數(shù)
filter() 把匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素
find() 返回被選元素的后代元素
first() 返回被選元素的第一個(gè)元素
is() 根據(jù)選擇器/元素/jQuery 對(duì)象檢查匹配元素集合，如果存在至少一個(gè)匹配元素，則返回 true
last() 返回被選元素的最后一個(gè)元素
next() 返回被選元素的后一個(gè)同級(jí)元素
nextAll() 返回被選元素之后的所有同級(jí)元素
nextUntil() 返回介于兩個(gè)給定參數(shù)之間的每個(gè)元素之后的所有同級(jí)元素
not() 從匹配元素集合中移除元素
offsetParent() 返回第一個(gè)定位的父元素
parent() 返回被選元素的直接父元素
parents() 返回被選元素的所有祖先元素
parentsUntil() 返回介于兩個(gè)給定參數(shù)之間的所有祖先元素
prev() 返回被選元素的前一個(gè)同級(jí)元素
prevAll() 返回被選元素之前的所有同級(jí)元素
prevUntil() 返回介于兩個(gè)給定參數(shù)之間的每個(gè)元素之前的所有同級(jí)元素
siblings() 返回被選元素的所有同級(jí)元素 Returns all sibling elements of the selected element
slice() 把匹配元素集合縮減為指定范圍的子集
each() 方法為每個(gè)匹配元素規(guī)定要運(yùn)行的函數(shù)。
$.each(array,function(index){
console.log(array[index])
})
$.each(array,function(){
console.log(this);
})
// 支持簡(jiǎn)寫
$divEles.each(function(){
console.log(this) // 標(biāo)簽對(duì)象
})
1
2
3
4
5
6
7
8
9
10
11
jQuery鏈?zhǔn)讲僮?br />
python代碼詮釋鏈?zhǔn)秸{(diào)用,其實(shí)就是在調(diào)用方法之后講對(duì)象再次返回
<div>
<p>p1</p>
<p>p2</p>
</div>
$('div>p').first().addclass('c1').next().addclass('c2');
1
2
3
4
5
jQuery 事件
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法。
$(document).ready()
$(document).ready() 方法允許我們?cè)谖臋n完全加載完后執(zhí)行函數(shù)。為了防止網(wǎng)頁(yè)還沒(méi)加載完，js代碼就已經(jīng)執(zhí)行，通常利用下面兩種方式來(lái)書寫js代碼。
$(document).ready(function(){
// 在這里寫你的JS代碼...
})
網(wǎng)頁(yè)最后
$(function(){
// 在這里寫你的代碼
})
1
2
3
4
5
6
7
8
click()
click() 方法是當(dāng)按鈕點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù)。
在下面的實(shí)例中，當(dāng)點(diǎn)擊事件在某個(gè)<p> 元素上觸發(fā)時(shí)，隱藏當(dāng)前的 <p> 元素：
$("p").click(function(){
$(this).hide();
});
1
2
3
dblclick()
當(dāng)雙擊元素時(shí)，會(huì)發(fā)生 dblclick 事件。
$("p").dblclick(function(){
$(this).hide();
});
1
2
3
mouseenter()
當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)，會(huì)發(fā)生 mouseenter 事件。
$("#p1").mouseenter(function(){
alert("鼠標(biāo)經(jīng)過(guò)了!");
});
1
2
3
mouseleave()
當(dāng)鼠標(biāo)指針離開元素時(shí)，會(huì)發(fā)生 mouseleave 事件。
$("#p1").mouseleave(function(){
alert("鼠標(biāo)離開了!");
});
1
2
3
mousedown()
當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí)，會(huì)發(fā)生 mousedown 事件。
$("#p1").mousedown(function(){
alert("鼠標(biāo)按下!");
});
1
2
3
mouseup()
當(dāng)在元素上松開鼠標(biāo)按鈕時(shí)，會(huì)發(fā)生 mouseup 事件。
ouseup(function(){
alert("鼠標(biāo)松開!");
});
1
2
3
hover()
hover()方法用于模擬光標(biāo)懸停事件。當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave)。
$("#p1").hover(function(){
alert("你的光標(biāo)懸停！");
},
function(){
alert("你的光標(biāo)已經(jīng)離開！");
});
1
2
3
4
5
6
focus()
當(dāng)元素獲得焦點(diǎn)時(shí)，發(fā)生 focus 事件。
$("input").focus(function(){
$(this).css("background-color","#eee");
});
1
2
3
blur()
當(dāng)元素失去焦點(diǎn)時(shí)，發(fā)生 blur 事件。
$("input").blur(function(){
$(this).css("background-color","#eee");
});
1
2
3
input()
input實(shí)時(shí)監(jiān)聽(tīng)，輸入內(nèi)容時(shí)發(fā)生 input 事件
$('#i1').on('input',function () {
console.log($(this).val())
});
1
2
3
取消標(biāo)簽?zāi)J(rèn)的事件
利用preventDefault()
$('input').click(function (e) {
alert(123);
e.preventDefault();
});
直接返回false
$('input').click(function (e) {
alert(123);
return false；
});
1
2
3
4
5
6
7
8
9
10
11
事件冒泡
iv>p>span // 三者均綁定點(diǎn)擊事件
$("span").click(function (e) {
alert("span");
e.stopPropagation(); // 阻止事件冒泡
});
1
2
3
4
5
事件委托
<button>按鈕</button>
<script src="jQuery-3.3.1.js"></script>
<script>
$('body').on('click','button',function () {
alert(123)
})
</script>
1
2
3
4
5
6
7
jQuery自帶的動(dòng)畫效果
下面的表格列出了用于創(chuàng)建動(dòng)畫效果的 jQuery 方法。
方法 描述
delay() 對(duì)被選元素的所有排隊(duì)函數(shù)（仍未運(yùn)行）設(shè)置延遲
dequeue() 移除下一個(gè)排隊(duì)函數(shù)，然后執(zhí)行函數(shù)
fadeIn() 逐漸改變被選元素的不透明度，從隱藏到可見(jiàn)
fadeOut() 逐漸改變被選元素的不透明度，從可見(jiàn)到隱藏
fadeTo() 把被選元素逐漸改變至給定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之間進(jìn)行切換
finish() 對(duì)被選元素停止、移除并完成所有排隊(duì)動(dòng)畫
hide() 隱藏被選元素
queue() 顯示被選元素的排隊(duì)函數(shù)
show() 顯示被選元素
slideDown() 通過(guò)調(diào)整高度來(lái)滑動(dòng)顯示被選元素
slideToggle() slideUp() 和 slideDown() 方法之間的切換
slideUp() 通過(guò)調(diào)整高度來(lái)滑動(dòng)隱藏被選元素
stop() 停止被選元素上當(dāng)前正在運(yùn)行的動(dòng)畫
toggle() hide() 和 show() 方法之間的切換
藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.b186.net