一.簡介 jQuery 庫可以通過一行簡單的標記被添加到網頁中 jQuery 是一個 JavaScript 函數庫。 jQuery 庫包含以下特性： HTML 元素選取 HTML 元素操作 CSS 操作 HTML 事件函數 JavaScript 特效和動畫 HTML DOM 遍歷和修改 AJAX U ...
一.簡介
jQuery 庫可以通過一行簡單的標記被添加到網頁中
jQuery 是一個 JavaScript 函數庫。
jQuery 庫包含以下特性：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
jQuery產生的對象時jQuery獨有的，只能自己調用
書寫規則
支持鏈式操作；
在變數前加"$"符號（var $variable = jQuery 對象）；
註：此規定並不是強制要求
二.Jquery安裝
jQuery 庫是一個 JavaScript 文件，可以使用 HTML 的 <script> 標簽引用它
<head> <script src="jquery.js"></script> </head>
下載 jQuery
有兩個版本的 jQuery 可供下載：
- Production version - 用於實際的網站中，已被精簡和壓縮。
- Development version - 用於測試和開發（未壓縮，是可讀的代碼）
下載地址:http://jquery.com/download/
通過 jQuery，可以選取（查詢，query） HTML 元素，並對它們執行“操作”（actions）
三.查找元素
1.選擇器
基本選擇器
#id //“#” 指ID element //指向 DOM 節點的標簽名 .class //“." 類 * //匹配所有元素 selector1,selector2,selectorN //將每一個選擇器匹配到的元素合併後一起返回
| 選擇器 | 實例 | 選取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| 基本篩選器 | ||
| :first | $("p:first") | 第一個 <p> 元素 |
| :last | $("p:last") | 最後一個 <p> 元素 |
| :even | $("tr:even") | 所有偶數 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇數 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四個元素（index 從 0 開始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大於 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小於 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不為空的 input 元素 |
| :header | $(":header") | 所有標題元素 <h1> - <h6> |
| :animated | 所有動畫元素 | |
| 內容選擇器 | ||
| :contains(text) | $(":contains('W3School')") | 包含指定字元串的所有元素 |
| :empty | $(":empty") | 無子（元素）節點的所有元素 |
| :hidden | $("p:hidden") | 所有隱藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可見的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有帶有匹配選擇的元素 |
| 屬性 | ||
| [attribute] | $("[href]") | 所有帶有 href 屬性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 屬性的值等於 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 屬性的值不等於 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 屬性的值包含以 ".jpg" 結尾的元素 |
| 表單選擇器 | ||
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <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 元素 |
查找選擇器：
| 函數 | 描述 |
|---|---|
| .add() | 將元素添加到匹配元素的集合中。 |
| .andSelf() | 把堆棧中之前的元素集添加到當前集合中。 |
| .children() | 獲得匹配元素集合中每個元素的所有子元素。 |
| .closest() | 從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。 |
| .contents() | 獲得匹配元素集合中每個元素的子元素，包括文本和註釋節點。 |
| .each() | 對 jQuery 對象進行迭代，為每個匹配元素執行函數。 |
| .end() | 結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。 |
| .eq() | 將匹配元素集合縮減為位於指定索引的新元素。 |
| .filter() | 將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。 |
| .find() | 獲得當前匹配元素集合中每個元素的後代，由選擇器進行篩選。 |
| .first() | 將匹配元素集合縮減為集合中的第一個元素。 |
| .has() | 將匹配元素集合縮減為包含特定元素的後代的集合。 |
| .is() | 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。 |
| .last() | 將匹配元素集合縮減為集合中的最後一個元素。 |
| .map() | 把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。 |
| .next() | 獲得匹配元素集合中每個元素緊鄰的同輩元素。 |
| .nextAll() | 獲得匹配元素集合中每個元素之後的所有同輩元素，由選擇器進行篩選（可選）。 |
| .nextUntil() | 獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .not() | 從匹配元素集合中刪除元素。 |
| .offsetParent() | 獲得用於定位的第一個父元素。 |
| .parent() | 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。 |
| .parents() | 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。 |
| .parentsUntil() | 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。 |
| .prev() | 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。 |
| .prevAll() | 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。 |
| .prevUntil() | 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .siblings() | 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 |
| .slice() | 將匹配元素集合縮減為指定範圍的子集。 |
例：
$("div").children() //div中的每個子元素,第一層
$("div").find("span") //div中的包含的所有span元素,子子孫孫
$("p").next() //緊鄰p元素後的一個同輩元素
$("p").nextAll() //p元素之後所有的同輩元素
$("#test").nextUntil("#test2") //id為"#test"元素之後到id為'#test2'之間所有的同輩元素,掐頭去尾
$("p").prev() //緊鄰p元素前的一個同輩元素
$("p").prevAll() //p元素之前所有的同輩元素
$("#test").prevUntil("#test2") //id為"#test"元素之前到id為'#test2'之間所有的同輩元素,掐頭去尾
$("p").parent() //每個p元素的父元素
$("p").parents() //每個p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id為"#test"元素到id為'#test2'之間所有的父級元素,掐頭去尾
$("div").siblings() //所有的同輩元素,不包括自己
查找元素
實例：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","red"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>基本篩選器及CSS樣式操作
<html> <head> <script type="text/javascript" src="/jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>隱藏標簽
<html> <head> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button type="button">Click me</button> </body> </html>查找ID操作
<html> <head> <script type="text/javascript" src="/jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>查找類 操作
<!DOCTYPE html> <html> <head> <script src="jquery-1.12.4.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); </script> </head> <body> <p>姓名：<input type="text" id="test" value="獲取表單內容"></p> <button>顯示值</button> </body> </html>獲取表單內容
四.屬性操作
屬性操作主要有以下幾種：
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的類名。 |
| attr() | 設置或返回匹配元素的屬性和值。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類。 |
| html() | 設置或返回匹配的元素集合中的 HTML 內容。 |
| removeAttr() | 從所有匹配的元素中移除指定的屬性。 |
| removeClass() | 從所有匹配的元素中刪除全部或者指定的類。 |
| toggleClass() | 從匹配的元素中添加或刪除一個類。 |
| val() | 設置或返回匹配元素的值。 |
| text() | 設置或返迴文本的值 |
例：
<!DOCTYPE html> <html> <head> <script src="jquery-1.12.4.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#test").attr("href")); }); }); </script> </head> <body> <p><a href="http://www.baidu.com" id="test">夢裡尋他千百度</a></p> <button>顯示 href 值</button> </body> </html>獲取屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
.test{
background-color: dodgerblue;
width: 950px;
margin: 0 auto;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
給DIV加樣式
</div>
<script>
$("div").addClass("test");
</script>
</body>
</html>
給DIV加樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<a>我只想證明html()返回的是元素的代碼</a>
<script>
var val = $("a").html();
alert(val)
</script>
</body>
</html>
html()返回的是元素的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<a href="/index" onclick="RemoveAttr(this);">click me</a>
<script>
function RemoveAttr(ths) {
$(ths).removeAttr("href");
alert("天呢！我的href屬性呢！")
}
</script>
</body>
</html>
移除屬性removeAttr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<input type="text" name="用戶名">
<input type="button" value="點我"/>
<script>
$(":button").click(function(){
alert("你輸入的內容是" + $(":text").val());
});
</script>
</body>
</html>
獲文本框值val()
五.CSS操作
| CSS 屬性 | 描述 |
|---|---|
| css() | 設置或返回匹配元素的樣式屬性。 |
| height() | 設置或返回匹配元素的高度。 |
| offset() | 返回第一個匹配元素相對於文檔的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一個匹配元素相對於父元素的位置。 |
| scrollLeft() | 設置或返回匹配元素相對滾動條左側的偏移。 |
| scrollTop() | 設置或返回匹配元素相對滾動條頂部的偏移。 |
| width() | 設置或返回匹配元素的寬度。 |
例:
<!DOCTYPE html> <html> <head> <script src="jquery-1.12.4.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Background color = " + $("p").css("background-color")); }); }); </script> </head> <body> <h2>這是標題</h2> <p style="background-color:#ff0000">這是一個段落。</p> <button>返回 p 元素的背景色</button> </body> </html>css()
<!DOCTYPE html> <html> <head> <script src="jquery-1.12.4.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>顯示 div 的尺寸</button> <p>width() - 返回元素的寬度。</p> <p>height() - 返回元素的高度。</p> </body> </html>width()/height()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.divH {
height: 1800px;
}
.divT {
width: 50px;
height: 50px;
font-size: 23px;
background-color: #2F4F4F;
color: white;
position: fixed;
right: 18px;
bottom: 18px;
}
.divT:hover{
cursor: pointer;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="divH"></div>
<div class="divT hide" onclick="ReturnTop();"><strong>返回頂部</strong></div>
<script src="../../jquery-1.12.4.js"></script>
<script>
window.onscroll = function () {
var current = $(window).scrollTop();
if (current > 180){
$(".divT").removeClass("hide");
}else {
$(".divT").addClass("hide");
}
};
function ReturnTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>
返回頂部小實例
六.文檔處理
| 方法 | 描述 |
|---|---|
| after() | 在匹配的元素之後插入內容。 |
| append() | 向匹配元素集合中的每個元素結尾插入由參數指定的內容。 |
| appendTo() | 向目標結尾插入匹配元素集合中的每個元素。 |
| before() | 在每個匹配的元素之前插入內容。 |
| clone() | 創建匹配元素集合的副本。 |
| detach() | 從 DOM 中移除匹配元素集合。 |
| empty() | 刪除匹配的元素集合中所有的子節點。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類。 |
| insertAfter() | 把匹配的元素插入到另一個指定的元素集合的後面。 |
| insertBefore() | 把匹配的元素插入到另一個指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每個元素開頭插入由參數指定的內容。 |
| prependTo() | 向目標開頭插入匹配元素集合中的每個元素。 |
| remove() | 移除所有匹配的元素。 |
| removeAttr() | 從所有匹配的元素中移除指定的屬性。 |
| replaceAll() | 用匹配的元素替換所有匹配到的元素。 |
| replaceWith() | 用新內容替換匹配的元素。 |
| unwrap() | 移除並替換指定元素的父元素。 |
| wrap() | 把匹配的元素用指定的內容或元素包裹起來。 |
| wrapAll() | 把所有匹配的元素用指定的內容或元素包裹起來。 |
| wrapinner() | 將每一個匹配的元素的子內容用指定的內容或元素包裹起來。 |
例：
$("p").append("<b>test</b>"); //每個p元素內後面追加內容
$("p").appendTo("div"); //p元素追加到div內後
$("p").prepend("<b>Hello</b>"); //每個p元素內前面追加內容
$("p").prependTo("div"); //p元素追加到div內前
$("p").after("<b>test</b>"); //每個p元素同級之後插入內容
$("p").before("<b>test</b>"); //在每個p元素同級之前插入內容
$("p").insertAfter("#test"); //所有p元素插入到id為test元素的後面
$("p").insertBefore("#test"); //所有p元素插入到id為test元素的前面
$("p").replaceWith("<b>Paragraph. </b>"); //將所有匹配的元素替換成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的元素替換掉所有 selector匹配到的元素
$("p").empty(); //刪除匹配的元素集合中所有的子節點，不包括本身
$("p").remove(); //刪除所有匹配的元素,包括本身
$("p").detach(); //刪除所有匹配的元素(和remove()不同的是:所有綁定的事件、附加的數據會保留下來)
$("p").clone() //克隆元素並選中克隆的副本
$("p").clone(true) //布爾值指事件處理函數是否會被覆制
用法
七.事件
| 方法 | 描述 |
|---|---|
|
bind(type,[data],fn) |
向匹配元素附加一個或更多事件處理器 |
| blur([[data],fn]) | 觸發、或將函數綁定到指定元素的 blur 事件 |
| change([[data],fn]) | 觸發、或將函數綁定到指定元素的 change 事件 |
| click([[data],fn]) | 觸發、或將函數綁定到指定元素的 click 事件 |
| dblclick([[data],fn]) | 觸發、或將函數綁定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的當前或未來的子元素附加一個或多個事件處理器 |
| die() | 移除所有通過 live() 函數添加的事件處理程式。 |
| error([[data],fn]) | 觸發、或將函數綁定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 對象上是否調用了 event.preventDefault()。 |
| event.pageX | 相對於文檔左邊緣的滑鼠位置。 |
| event.pageY | 相對於文檔上邊緣的滑鼠位置。 |
| event.preventDefault() | 阻止事件的預設動作。 |
| event.result | 包含由被指定事件觸發的事件處理器返回的最後一個值。 |
| event.target | 觸發該事件的 DOM 元素。 |
| event.timeStamp | 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 |
| event.type | 描述事件的類型。 |
| event.which | 指示按了哪個鍵或按鈕。 |
| focus([[data],fn]) | 觸發、或將函數綁定到指定元素的 focus 事件 |
| focusin([data],fn) | |
| keydown([[data],fn]) | 觸發、或將函數綁定到指定元素的 key down 事件 |
| keypress([[data],fn]) | 觸發、或將函數綁定到指定元素的 key press 事件 |
| keyup([[data],fn]) | 觸發、或將函數綁定到指定元素的 key up 事件 |
| live() | 為當前或未來的匹配元素添加一個或多個事件處理器 |
| load() | 觸發、或將函數綁定到指定元素的 load 事件 |
| mousedown([[data],fn]) | 觸發、或將函數綁定到指定元素的 mouse down 事件 |
| mouseenter([[data],fn]) |
  更多相關文章
一周排行
 所有分類
|