一、jQuery簡介
jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。
jQuery 庫位於一個 JavaScript 文件中，其中包含了所有的 jQuery 函數。
$：jQuery標識符
二、jQuery選擇器
1.基本選擇器
①ID選擇器:#
$("#div1").css("background-color", "red")
②class選擇器：.
1 $(".div2").css("background-color", "red");
③標簽選擇器
$("div").css("background-color", "red");
④並列
$("#div1,#div2").css("background-color", "red"); //並列選擇，用逗號隔開
⑤后代
$("#div1 a").css("background-color", "red"); //后代選擇，用空格隔開
2、過濾選擇器
（1）、基本過濾
①首個：:first
$(".div:first").css("background-color", "red"); //取首個
②尾個：:last
$(".div:last").css("background-color", "red"); //取最后一個
③任意個：:eq(索引號)
$(".div:eq(2)").css("background-color", "red"); //取任意個， :eq(索引號) 或者$(".div").eq(2).css("background-color", "red");——重點
④大於：:gt(索引號)
$(".div:gt(2)").css("background-color", "red"); //:gt(索引號)，取大於該索引號的
⑤小於：:lt(索引號)
$(".div:lt(2)").css("background-color", "red"); //:lt(索引號)，取小於該索引號的
⑥排除：:not(選擇器)
$(".div:not(.div:eq(2))").css("background-color", "red"); //:not(“選擇器”)，排除這一個，選剩余的
⑦奇數：odd
$(".div:odd").css("background-color", "red"); //:odd，選索引為奇數的
⑧偶數：even
$(".div:even").css("background-color", "red"); //:even，選索引為偶數的
（2）、屬性過濾
①屬性名過濾：[屬性名]
1 $(".div[he]").css("background-color", "red"); //[屬性名]，選有該屬性名的
②屬性值過濾：[屬性名=屬性值]或[屬性名！=屬性值]
1 $(".div[hehe=aaa]").css("background-color", "red"); //[屬性名=屬性值]，選有該屬性名且是此屬性值的 2 $(".div[hehe!=bbb]").css("background-color", "red"); //[屬性名！=屬性值]，選有該屬性名的且屬性值不是此的
（3）、內容過濾
①文字過濾：:contains(“字符串”)
$(".div:contains('a')").css("background-color", "red"); //:contains('字符串')，選取包含該字符串的——根據文字
②子元素過濾：:has(選擇器)
$(".div:has(a)").css("background-color", "red"); //:has(“選擇器”)，選取包含該選擇器的——根據選擇器
所有選擇器實例：
| 選擇器 | 實例 | 選取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #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 元素 |
三、事件
1、常規事件——把js事件前面的on去掉
比如：js：onclick——JQuery：click
下面是 jQuery 中事件方法的一些例子：
| Event 函數 | 綁定函數至 |
| $(document).ready(function(){}) | 將函數綁定到文檔的就緒事件（當文檔完成加載時） |
| $(selector).click(function(){}) | 觸發或將函數綁定到被選元素的點擊事件 |
| $(selector).dblclick(function(){}) | 觸發或將函數綁定到被選元素的雙擊事件 |
| $(selector).focus(function(){}) | 觸發或將函數綁定到被選元素的獲得焦點事件 |
| $(selector).mouseover(function(){}) | 觸發或將函數綁定到被選元素的鼠標懸停事件 |
| $(selector).mouseout(function(){}) | 觸發、或將函數綁定到指定元素的 mouse out 事件 |
2、復合事件
①hover(function(){},functiaon(){})——相當於把mouseover()mouseout()合二為一
②toggle(function(){},function(){},....)——點擊事件循環執行，具體看下面的代碼用法展示
3、事件冒泡
冒泡事件就是點擊子節點，會向上觸發父節點，祖先節點的點擊事件。
在事件執行完后添加return false
四、DOM操作
1.操作屬性
①設置屬性
$("選擇器").attr("屬性名","屬性值")
②獲取屬性
var s = $("選擇器").attr("屬性名")
③刪除屬性
$("選擇器").removeAttr("屬性名")
2.操作樣式
（1）操作內聯樣式
①獲取樣式
var s = $("選擇器").css("樣式名")
②設置樣式
$("選擇器").css("樣式名","值")
（2）操作樣式表的class
①添加class
$("選擇器").addClass("class名") -向被選元素添加一個或多個類
②移除class
$("選擇器").removeClass("class名") -從被選元素刪除一個或多個類
③添加移除交替class
$("選擇器").toggleClass("class名") -對被選元素進行添加/刪除類的切換操作
3.操作內容
三個簡單實用的用於 DOM 操作的 jQuery 方法：
- text() - 設置或返回所選元素的文本內容
- html() - 設置或返回所選元素的內容（包括 HTML 標記）
- val() - 設置或返回表單字段的值
（1）表單元素
①取值
var s = $("選擇器").val()
②賦值
$("選擇器").val("值")
（2）非表單元素
①賦值
$("選擇器").html("內容"), $("選擇器").text("內容")
②取值
var s = $("選擇器").html(), var s = $("選擇器").text()
4.操作相關元素
（1）查找
父、前輩：
①parent()
parent() 方法返回被選元素的直接父元素。
該方法只會向上一級對 DOM 樹進行遍歷。
var p = $(this).parent();//查找該元素的父級 var p = $(this).parent().parent();//查找該元素的父級的父級
②parents(選擇器)
parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。
也可以使用可選參數來過濾對祖先元素的搜索。
$(document).ready(function(){ $("span").parents(); });
var p = $(this).parents("#div2");//若知道前輩的id或name，可以用parents("選擇器")
子、后代：
①children(選擇器)
children() 方法返回被選元素的所有直接子元素。
該方法只會向下一級對 DOM 樹進行遍歷。
$(document).ready(function(){ $("div1").children(); //查找div1的子元素 });
②find(選擇器)
find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。
var p = $("div1").find("#div3");//查找div1的后代div3
兄弟:
prev():
返回被選元素的上一個同胞元素，該方法只返回一個元素。
prevAll(選擇器)：
返回被選元素的所有前面的同胞元素。
var p = $(this).prev();//查找該元素的哥哥，可以prev().prev() var p = $(this).prevAll("#div6");//prevtAll("選擇器")，前提知道需要查找的哥哥的選擇器
next()
返回被選元素的下一個同胞元素。
nextAll(選擇器)
方法返回被選元素的所有跟隨的同胞元素。
var p = $(this).next();//查找該元素的弟弟，可以next().next() var p = $(this).nextAll("#div6");//nextAll("選擇器")，前提知道需要查找的弟弟的選擇器
（2）操作
新建
$("HTML字符串")
添加
append(jquery對象):在被選元素的結尾插入內容。
prepend() :在被選元素的開頭插入內容。
after(,..):在被選元素之后插入內容。
before("..."):在被選元素之前插入內容
移除
empty()
清空內部全部元素
remove()
移除元素
復制
clone()
5.未來元素
對象.live("事件名",function(){});