jQuery常用操作
jQuery
jQuery是一個輕量級的JS庫，是一個被封裝好的JS文件，提供了更為簡便的元素操作方式，jQuery封裝了DOM。
?
使用jQuery
引入jQuery文件
<scrtipt src='jquery-1.11.3.js'> </script>
注意：引入必須放在其他jQuery操作之前。
?
jQuery對象
jQuery對象是由jQuery對頁面元素進行封裝后的一種體現
jQuery中所提供的所有操作都只針對jQuery對象，其他對象（DOM）無法使用
?
工廠函數? --? $()
想要獲取jQuery對象，則必須使用工廠函數$()
在$()中允許傳遞一個選擇器/DOM對象作為參數，$()能夠將選擇器和DOM對象全部封裝成jQuery對象再進行返回
例子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery演示</title> </head> <body><div id="main">id是mian的div元素</div> <button onclick="bClick()">獲取元素</button><script src="jquery-1.11.3.js"></script><script>function bClick() {//通過jquery選擇器獲取id='main'的元素var m = $("#main");//設置元素的內容 m.html('動態設置的值');console.log(m)}</script> </body> </html>?
DOM對象和jQuery對象之間的轉換
DOM對象不能使用jQuery提供的操作，反之同樣。
1、將DOM對象轉換為jQuery對象
語法：var 變量 = $(DOM對象)；
注意:所有的jQuery對象在起名的時候，最好在變量前加$，主要用于和DOM對象的區分
例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="main">這是div元素</div><button onclick="bClick()">DOM - jQuery</button><script src="jquery-1.11.3.js"></script><script>function bClick() {// 通過DOM的操作，得到id為main的元素var main = document.getElementById('main');// 再將其轉換為jQuery對象var $main = $(main);$main.html('轉換為JQ對象成功！')}</script> </body> </html>
2、將jquery對象轉換為DOM對象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="main">這是div元素</div><button onclick="JQtoDom()">jQuery-DOM</button><script src="jquery-1.11.3.js"></script><script>function JQtoDom() {// 使用jquery得到id為main的元素var $main = $("#main");// 再將其轉換為DOM對象// var m = $main[0];var m = $main.get(0);m.innerHTML = '轉換為DOM對象成功！'}</script> </body> </html>
?
jQuery選擇器
?
作用
獲取頁面上的元素們，返回值都是由jQuery對象所組成的數組
語法：$("選擇器")
基本選擇器
1、ID選擇器
$("#id");
返回：返回頁面中指定ID值的元素
2、類選擇器
$(".className")
返回：頁面中指定className的所有元素
3、元素選擇器
$("element")
返回：頁面中指定標記的所有元素
4、群組選擇器 / 復合選擇器
$("selector1,selector2,...")
返回：返回滿足函數內所有選擇器的函數們
?
層級選擇器
1、$("selector1 selector2")
后代選擇器
2、$("selector1>selector2")
子代選擇器
3、$("selector1+selector2")
名稱：相鄰兄弟選擇器
作用：匹配緊緊跟在selector1后面且滿足selector2選擇器的元素
例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="main"><p id="p1">這是id為p1的元素</p><p>這是普通元素</p><p>這是普通元素</p><p>這是普通元素</p><p>這是普通元素</p></div><button onclick="bNB()">相鄰兄弟選擇器</button><script src="jquery-1.11.3.js"></script><script>function bNB() {$("#p1+p").css('background', 'yellow');}</script></body> </html>4、$("selector1~selector2")
名稱：通用兄弟選擇器
作用：匹配selector1后面所有滿足selector2選擇器的元素
例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="main"><p id="p1">這是id為p1的元素</p><p>這是普通元素</p><p>這是普通元素</p><p>這是普通元素</p><p>這是普通元素</p></div><button onclick="bNB()">通用兄弟選擇器</button><script src="jquery-1.11.3.js"></script><script>function bNB() {$("#p1~p").css('color', 'red');}</script> </body> </html>
?
基本過濾選擇器
過濾選擇器通常都會配合著其他的選擇器一起使用
1、:first
只匹配一組元素中的第一個元素
$("p:first")
2、:last
只匹配一組元素中的最后一個元素
3、:not("selector")
在一組元素中，將滿足selector選擇器的元素排除出去
4、:odd
匹配 偶數行 元素(奇數下標)
5、:even
匹配 奇數行 元素(偶數下標)
6、:eq(index) -- equals
匹配 下標等于 index 的元素
7、:gt(index)
匹配 下標大于 index 的元素
8、:lt(index)
匹配 下標小于 index 的元素
?
屬性過濾選擇器
依托于html元素的屬性來進行元素過濾的
1、[attribute]
作用：匹配包含指定屬性的元素
ex:
div[id]:匹配具備id屬性的div元素
2、[attribute=value]
作用：匹配attribute屬性值為value的元素
ex:
input[type=text]
input[type=password]
3、[attribute!=value]
作用：匹配attribute屬性值不是value的元素
4、[attribute^=value]
作用：匹配attribute屬性值是以value字符開頭的元素
ex:
p[class^=col]
5、[attribute$=value]
作用：匹配attribute屬性值是以value字符結尾的元素
6、[attribute*=value]
作用：匹配attribute屬性值中包含value字符的元素
?
子元素過濾選擇器
1、:first-child
匹配屬于其父元素中的首個子元素
2、:last-child
匹配屬于其父元素中的最后一個子元素
3、:nth-child(n)
匹配屬于其父元素中第n個子元素
4、jQuery操作DOM
基本操作
1、html()
作用：獲取 或 設置 jQuery對象中的html內容
ex:
console.log($("#main").html());
$("#main").html("");
2、text()
作用：獲取 或 設置 jQuery對象中的text內容
3、val()
作用：獲取 或 設置 jQuery對象中的value值(表單控件)
4、屬性操作
attr()
作用：讀取 或 設置jQuery對象的屬性值
ex:
$obj.attr("id");
獲取 $obj 的id屬性值
$obj.attr("id","main");
? 設置$obj對象的id屬性值為main
removeAttr("attrName")
刪除jQuery對象的attrName屬性
ex:
$obj.removeAttr("class");
2、樣式操作
1、attr()
$obj.attr("class","redBack");
2、addClass("className")
作用：將className 添加到元素的class值之后
ex:
$obj = $obj.addClass("c1");
$obj = $obj.addClass("c2");
連綴調用：
$obj.addClass("c1").addClass("c2");
3、removeClass("className")
如果無參的話，則清空類選擇器
如果有參數的話，則刪除對應的類選擇器
ex:
$obj.removeClass("c1")
將c1類選擇器從$obj移除出去
$obj.removeClass()
清空$obj的所有類選擇器
4、toggleClass("className")
切換樣式：
元素如果具備className選擇器，則刪除
元素如果沒有className選擇器，則添加
5、css("屬性名")
$obj.css("width");
獲取$obj對象的width屬性值
6、css("屬性名","屬性值")
$obj.css("background-color","yellow");
設置$obj對象的background-color的屬性值為yellow
7、css(JSON對象)
JSON對象：
是一種約束了格式的對象表現形式
JSON:JavaScript Object Notation
JSON對象的表示方式：
1、JSON對象必須使用{}括起來
2、使用鍵值對的方式來聲明數據(表示屬性和值)
3、所有的屬性在使用時必須使用""括起來，值如果是字符串的話，也必須使用""括起來
4、屬性和值之間使用:連接
5、多對屬性和值之間使用 , 隔開
ex:
$obj.css({
"color":"red",
"font-size":"32px",
"float":"left"
});
?
遍歷節點
?
1、children() / children("selector")
獲取某jQuery對象的所有子元素 或 帶有指定選擇器的子元素
注意：只考慮子代元素，不考慮后代元素
2、next() / next("selector")
獲取某jQuery對象的下一個兄弟元素 / 滿足selector的下一個兄弟元素
3、prev() / prev("selector")
獲取某jQuery對象的上一個兄弟元素 / 滿足selector的上一個兄弟元素
4、siblings() / siblings(selector)
獲取某jQuery對象的所有兄弟元素 / 滿足selector的所有兄弟元素
5、find("selector")
查找滿足selector選擇器的所有后代元素
6、parent()
查找某jQuery對象的父元素
?
創建對象
語法：$("創建的標記")
ex:
1、創建一對div
var $div = $("<div></div>");
$div.html("動態創建的div");
$div.attr("id","container")
$div.css("color","red");
2、創建一對div
var $div = $("<div id='container' style='color:red;'>動態創建的div</div>");
插入元素
作用：將創建好的元素插入到網頁中
1、內部插入
作為元素的子元素插入到網頁中
$obj.append($new);
將$new元素插入到$obj元素中的最后一個子元素位置處(追加)
$obj.prepend($new);
將$new元素插入到$obj元素中的第一個子元素位置處
2、外部插入
作為元素的兄弟元素插入到網頁中
$obj.after($new);
將$new元素作為$obj的下一個兄弟元素插入進來
$obj.before($new);
將$new元素作為$obj的上一個兄弟元素插入進來
?
刪除元素
$obj.remove();
將$obj元素刪除出去
jQuery中的事件處理
?
?
1、頁面加載后的執行
類似于window.onload 但不同于 window.onload
jQuery加載后執行的特點：
在DOM樹加載完畢的時候就開始執行
$(document).ready( function(){
//頁面的初始化操作
//DOM樹加載完成后就開始運行
} );
$().ready( function(){
//頁面的初始化操作
//DOM樹加載完成后就開始運行
} );
$( function(){
//頁面的初始化操作
//DOM樹加載完成后就開始運行
} );
?
2、jQuery的事件綁定
方式1
$obj.bind("事件名稱",事件處理函數);
ex:
$obj.bind("click",function(){
//事件的行為操作
console.log("... ....");
});
?
方式2
$obj.事件名稱(function(){
//事件處理函數
});
ex:
$obj.click(function(){
//通過 this 來表示觸發該事件的DOM對象
});
3、事件對象 - event
在綁定事件的時候，允許傳遞 event 參數來表示事件對象
$obj.bind("click",function(event){
//event表示當前事件的事件對象
});
$obj.click(function(event){
//event表示當前事件的事件對象
});
event的使用方式與原生JS事件中的event使用方式一致。
event.stopPropagation() : 阻止事件冒泡
event.offsetX:
event.offsetY:
event.target:獲取事件源
?
jQuery 動畫
1、基本顯示 / 隱藏
?
語法：
$obj.show() / $obj.show(執行時間)
$obj.hide() / $obj.hide(執行時間)
2、滑動式顯示 / 隱藏
語法：
顯示：$obj.slideDown() / $obj.slideDown(執行時間)
隱藏：$obj.slideUp() / $obj.slideUp(執行時間)
3、淡入淡出式顯示 / 隱藏
語法：
顯示：$obj.fadeIn() / $obj.fadeIn(執行時間)
隱藏：$obj.fadeOut() / $obj.fadeOut(執行時間)
轉載于:https://www.cnblogs.com/hxgoto/p/9411444.html
總結
以上是生活随笔為你收集整理的jQuery常用操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微软平板电脑的优势(微软平板好不好用)
- 下一篇： 按键扫描