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