一.jQuery 是一個(gè) JavaScript 函數(shù)庫(kù)。
jQuery 庫(kù)包含以下特性：
1.HTML 元素選取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函數(shù)
5.JavaScript 特效和動(dòng)畫(huà)
6.HTML DOM 遍歷和修改
7.AJAX(**Asynchronous JavaScript and XML** 譯為（異步的[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)與[XML](https://zh.wikipedia.org/wiki/XML)技術(shù)）)
8.Utilities(實(shí)用工具,設(shè)備)
- jQ語(yǔ)法是XPath(XML路徑語(yǔ)言,在XML文檔中查找信息的語(yǔ)言)與css選擇器語(yǔ)法的組合
- jQuery基礎(chǔ)語(yǔ)法$(selector).action()實(shí)例
$(this).hide()- 隱藏當(dāng)前元素 - 文檔就緒函數(shù)
$(document).ready(function(){
--- jQuery functions go here ----
});
也可寫(xiě)成
$(function(){
})```
>* jQuery選擇器
* 元素選擇器(css)
1.$("p") 選取 < p > 元素。
2.$("p.intro") 選取所有 class="intro" 的 < p > 元素克伊。
3.$("p#demo") 選取所有 id="demo" 的 < p > 元素。
* 屬性選擇器(XPath)
1.$("[href]") 選取所有帶有 href 屬性的元素僚碎。
2.$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素扇苞。
3.$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素层亿。
4.$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素录择。
* 解除jQuery名稱(chēng)沖突(自定義名稱(chēng))
>jQuery 使用 $ 符號(hào)作為 jQuery 的簡(jiǎn)介方式拔莱。
某些其他 JavaScript 庫(kù)中的函數(shù)（比如 Prototype）同樣使用 $ 符號(hào)。
jQuery 使用名為 noConflict() 的方法來(lái)解決該問(wèn)題隘竭。
*var jq=jQuery.noConflict()*塘秦，幫助您使用自己的名稱(chēng)（比如 jq）來(lái)代替 $ 符號(hào)。
>#####二.jQ效果
* 隱藏/顯示語(yǔ)法hide(),show().toggle()
語(yǔ)法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
實(shí)例
$("button").click(function(){
$("p").toggle();
});
***可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度动看，可以取以下值："slow"尊剔、"fast" 或毫秒。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱(chēng)菱皆。
toggle是顯示/隱藏轉(zhuǎn)換***
* 淡入淡出 fadeIn(),fadeOut(),fadeToggle() , fadeTo()
** fadeTo()** 語(yǔ)法
$(selector).fadeTo(speed,opacity,callback);
**其余三個(gè)同顯示/隱藏**
* 滑動(dòng)slideDown(),slideUp(),slideToggle()
**語(yǔ)法同顯示/隱藏**
* 效果 - 動(dòng)畫(huà)(允許創(chuàng)建自定義動(dòng)畫(huà))animate()
語(yǔ)法
`$(selector).animate({params},speed,callback);`
**params 參數(shù)定義形成動(dòng)畫(huà)的 CSS 屬性**
定義多個(gè)屬性動(dòng)畫(huà)實(shí)例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
######注意:用駝峰寫(xiě)法,顏色動(dòng)畫(huà)要下 Color Animations 插件
* 停止動(dòng)畫(huà) (方法用于在動(dòng)畫(huà)或效果完成前對(duì)它們進(jìn)行停止)stop()
語(yǔ)法
`$(selector).stop(stopAll,goToEnd);`
######可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列须误。默認(rèn)是 false，即僅停止活動(dòng)的動(dòng)畫(huà)搔预，允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行霹期。
######可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)叶组。默認(rèn)是 false拯田。
######因此，默認(rèn)地甩十，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫(huà)船庇。
* chaining鏈鎖
語(yǔ)法
`$("#p1").css("color","red").slideUp(2000).slideDown(2000);`
實(shí)例
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
#####三.jQuery HTML
>* 獲得內(nèi)容和屬性text()、html() 以及 val()
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值
實(shí)例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
* 設(shè)置內(nèi)容和屬性
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值
實(shí)例
$("#btn1").click(function(){
$("#test1").text("哈哈!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("你好");
});
* 添加元素
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開(kāi)頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
實(shí)例
`$("p").append("Some appended text.");`
* 刪除元素
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
語(yǔ)法同上
* 獲取并設(shè)置 CSS 類(lèi)
addClass() - 向被選元素添加一個(gè)或多個(gè)類(lèi)
removeClass() - 從被選元素刪除一個(gè)或多個(gè)類(lèi)
toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類(lèi)的切換操作
css() - 設(shè)置或返回樣式屬性
* css() 方法
實(shí)例
`$("p").css("background-color","yellow");`
* 尺寸
通過(guò) jQuery侣监，很容易處理元素和瀏覽器窗口的尺寸鸭轮。
jQuery 尺寸 方法
width()設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）橄霉。
height()方法設(shè)置或返回元素的高度（不包括內(nèi)邊距窃爷、邊框或外邊距）。
innerWidth()方法返回元素的寬度（包括內(nèi)邊距）姓蜂。
innerHeight()方法返回元素的高度（包括內(nèi)邊距）按厘。
outerWidth()方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight()方法返回元素的高度（包括內(nèi)邊距和邊框）钱慢。
實(shí)例
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
#####四.遍歷
>* 遍歷
* 祖先parent(),parents(),parentsUntil()
parent() 方法返回被選元素的直接父元素逮京。
parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)束莫。
parentsUntil() 方法返回介于兩個(gè)給定元素之間的所有祖先元素懒棉。
實(shí)例之一
$(document).ready(function(){
$("span").parents("ul");
});
* 后代children(),find()
children() 方法返回被選元素的所有直接子元素草描。
find() 方法返回被選元素的后代元素，一路向下直到最后一個(gè)后代策严。
實(shí)例
$(document).ready(function(){
$("div").children("p.1");
});
* 同胞siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()
siblings() 方法返回被選元素的所有同胞元素穗慕。
next() 方法返回被選元素的下一個(gè)同胞元素。
nextAll() 方法返回被選元素的所有跟隨的同胞元素妻导。
nextUntil() 方法返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類(lèi)似揍诽，只不過(guò)方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹(shù)中沿著同胞元素向后遍歷，而不是向前）栗竖。
實(shí)例
$(document).ready(function(){
$("h2").siblings("p");
});
* 過(guò)濾first(), last() , eq(),filter() 和 not()
first(), last() 和 eq()暑脆，它們?cè)试S您基于其在一組元素中的位置來(lái)選擇一個(gè)特定的元素。
實(shí)例
$(document).ready(function(){
$("div p").first();
});
filter() 和 not() 允許您選取匹配或不匹配某項(xiàng)指定標(biāo)準(zhǔn)的元素狐肢。
實(shí)例
$(document).ready(function(){
$("p").not(".intro");
});
