jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流瀏覽器, 包括 IE 6！開(kāi)發(fā)時(shí)常用 jquery.js，上線用 jquery.min.js。
jq插件
目前jQuery有三個(gè)大版本：
（1）1.x.x: 兼容ie6,7,8，使用最為廣泛，官網(wǎng)只做BUG維護(hù)，功能不再新增。因此一般項(xiàng)目來(lái)說(shuō)，使用1.X版本就可以了，最終版本：1.12.4 (2016年5月20日)
（2）2.x.x: 不兼容ie6,7,8，很少有人使用，官方只做BUG維護(hù)，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
（3） 3.x.x: 不兼容ie6,7,8，只支持最新的瀏覽器。除非特殊要求，一般不會(huì)使用3.x版本的，很多老的jQuery插件不支持這個(gè)版本。目前該版本是官方主要更新維護(hù)的版本。最新版本：3.2.1（2017年3月20日）
| 一、jQuery 下載安裝 | 1.1 網(wǎng)頁(yè)中添加 jQuery；1.2 查看版本 |
| 二、選擇器 | 2.1 基本選擇器；2.2 層次選擇器；2.3 過(guò)濾選擇器（重點(diǎn)）； 2.4 內(nèi)容過(guò)濾選擇器；2.5 可見(jiàn)性過(guò)濾選擇器；2.6 屬性過(guò)濾選擇器；2.7 狀態(tài)過(guò)濾選擇器；2.8 表單選擇器； |
| 三、遍歷選擇元素的方法 | 3.1 遍歷祖先；3.2 遍歷子孫后代；3.3 遍歷兄弟同胞；3.4 過(guò)濾；3.5 其他方法：clone()； |
| 四、jQuery動(dòng)畫(huà) | 4.1 隱藏、顯示：hide()、show()、togger()； 4.2 漸隱漸顯：fadeOut()、fadeIn()、fadeToggle()、fadeTo()； 4.3 上拉下拉：slideUp()、slideDown()、lideToggle()； 4.4 動(dòng)畫(huà)：animate(); |
一、jQuery 下載安裝
jquery中文網(wǎng)，教程也可以看 菜鳥(niǎo)教程。
1.1 網(wǎng)頁(yè)中添加 jQuery：
（1）jquery 官網(wǎng)上的所有版本；
（2）國(guó)內(nèi)常用靜態(tài)資源庫(kù)：Staticfile CDN、百度、又拍云、新浪、谷歌和微軟的服務(wù)器都存有 jQuery ，我們也可以在Staticfile CDN、又拍云、新浪、谷歌或微軟引用 jQuery，具體地址可以查看 菜鳥(niǎo)教程。
我們?nèi)∷麄兦懊娴牡刂肪涂梢钥吹嚼锩娓髯源娴膸?kù)，以新浪為例（百度不能用了）：
1.2 查看版本：
可以在瀏覽器的 Console 窗口中使用 $.fn.jquery 命令查看當(dāng)前 jQuery 使用的版本。
二、選擇器
2.1 基本選擇器
| $("#id") | ID選擇器 |
| $("div") | 元素選擇器 |
| $(".classname") | 類選擇器 |
| $(".classname,.classname1,#id1") | 組合選擇器 |
2.2 層次選擇器
| $("#id>.classname ") | 子元素選擇器，選擇親兒子 |
| $("#id .classname ") | 后代元素選擇器 |
| $("#id + .classname ") | 緊鄰下一個(gè)元素選擇器 |
| $("#id ~ .classname ") | 兄弟元素選擇器 |
2.3 過(guò)濾選擇器(重點(diǎn))
| $("li:first") | 第一個(gè)li |
| $("li:last") | 最后一個(gè)li |
| $("li:even") | 挑選下標(biāo)為偶數(shù)的li |
| $("li:odd") | 挑選下標(biāo)為奇數(shù)的li |
| $("li:eq(4)") | 下標(biāo)等于 4 的li(第五個(gè) li 元素) |
| $("li:gt(2)") | 下標(biāo)大于 2 的li |
| $("li:lt(2)") | 下標(biāo)小于 2 的li |
| $("li:not(#runoob)") | 挑選除 id=“runoob” 以外的所有l(wèi)i |
2.4 內(nèi)容過(guò)濾選擇器
| $("div:contains('Runob')") | 包含 Runob文本的元素，可用來(lái)做搜索關(guān)鍵字高亮顯示。 |
| $("td:empty") | 不包含子元素或者文本的空元素 |
| $("div:has(selector)") | 含有選擇器所匹配的元素 |
| $("td:parent") | 含有子元素或者文本的元素 |
2.5 可見(jiàn)性過(guò)濾選擇器
| $("li:hidden") | 匹配所有不可見(jiàn)元素，或type為hidden的元素 |
| $("li:visible") | 匹配所有可見(jiàn)元素 |
2.6 屬性過(guò)濾選擇器
| $("div[id]") | 所有含有 id 屬性的 div 元素 |
| $("div[id='123']") | id屬性值為123的div 元素 |
| $("div[id!='123']") | id屬性值不等于123的div 元素 |
| $("div[id^='qq']") | id屬性值以qq開(kāi)頭的div 元素 |
| $("div[id$='zz']") | id屬性值以zz結(jié)尾的div 元素 |
| $("div[id*='bb']") | id屬性值包含bb的div 元素 |
| $("input[id][name$='man']") | 多屬性選過(guò)濾，同時(shí)滿足兩個(gè)屬性的條件的元素 |
2.7 狀態(tài)過(guò)濾選擇器
| $("input:enabled") | 匹配可用的 input |
| $("input:disabled") | 匹配不可用的 input |
| $("input:checked") | 匹配選中的 input |
| $("option:selected") | 匹配選中的 option |
2.8 表單選擇器
| $(":input") | 匹配所有 input, textarea, select 和 button 元素 |
| $(":text") | 所有的單行文本框，(":text")等價(jià)于(":text") 等價(jià)于(":text")等價(jià)于("[type=text]")，推薦使用$(“input:text”)效率更高，下同 |
| $(":password") | 所有密碼框 |
| $(":radio") | 所有單選按鈕 |
| $(":checkbox") | 所有復(fù)選框 |
| $(":submit") | 所有提交按鈕 |
| $(":reset") | 所有重置按鈕 |
| $(":button") | 所有button按鈕 |
| $(":file") | 所有文件域 |
三、遍歷選擇元素的方法
jQuery 遍歷，意為"移動(dòng)"，用于根據(jù)其相對(duì)于其他元素的關(guān)系來(lái)"查找"（或選取）HTML 元素。
<div id="box"><p class="title">標(biāo)題tttt</p><span>文字</span><span></span><div id="content"><h2>h2標(biāo)簽</h2><p class="msg">信息xxx</p><p>段落</p></div> </div>3.1 祖先
| parent() | 返回被選元素的直接父元素 | $("#content").parent();，返回 元素#box |
| parents() | 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>) | $("#content").parents();，返回 元素#box、元素body、元素html |
| parentsUntil("元素") | 返回介于兩個(gè)給定元素之間的所有祖先元素 | $(".title").parentsUntil(".msg");，返回 元素#box、元素body、元素html |
3.2 子孫后代
| children() | 返回被選元素的所有親兒子，效果等價(jià) >。 | $("#box").children();，返回 p.tilte、span、span、div#content |
| find("元素") | 返回被選元素的所有后代元素，一路向下直到最后一個(gè)后代。等價(jià)于 后代選擇符 | $("#box").find("p");，在 #box 中查找所有的 p 元素 |
3.3 兄弟同胞
| siblings() | 返回被選元素的所有兄弟元素，等價(jià) ~。 | $(".msg").siblings();，返回 h2、p |
| next() | 返回被選元素的下一個(gè)兄弟元素，等價(jià) +。 | $(".msg").next();，返回相鄰的span |
| nextAll() | 返回被選元素的所有兄弟元素。 | $(".msg").nextAll();，返回 span、span、div#content |
| nextUntil("元素") | 返回被選元素的所有跟隨的兄弟元素。 | $("h2").nextUntil(".content p.msg")，返回的是與 h2 同級(jí)的所有兄弟元素（不包括h2） |
| prev()、prevAll() 、prevUntil("元素") | 類似上面的方法，只不過(guò)是前面的兄弟元素 |
3.4 過(guò)濾
1. 三個(gè)最基本的過(guò)濾方法是：first()，last() 和 eq()，它們?cè)试S您基于其在一組元素中的位置來(lái)選擇一個(gè)特定的元素。
2. 其他過(guò)濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項(xiàng)指定標(biāo)準(zhǔn)的元素。
| first() | 返回被選元素的首個(gè)元素。 | $("div p").first();，返回 p.tilte。這里的 $("div p") 可以選擇到兩個(gè)，一是 #box 中的 p，二是 #content 中的 p，$("div p").first();選擇到的是第一種。 |
| last() | 返回被選元素的最后一個(gè)元素。 | $("div p").last();，返回 p.tilte。與上面相反，選擇的是最后一個(gè)p，即#content 中的 p。 |
| ep(索引) | 返回被選元素中帶有指定索引號(hào)的元素，從 0 開(kāi)始。 | $("#content p").eq(0);返回 p.msg。#content 中索引為0的 p。 |
| filter("元素") | 允許您規(guī)定一個(gè)標(biāo)準(zhǔn)。等價(jià)于指定元素 | $("p").filter(".msg");效果等同于$("p.msg")。 |
| not("元素") | 返回不匹配標(biāo)準(zhǔn)的所有元素。等價(jià)于:not() | $("p").not(".msg");，返回p.title、p，效果等同于p:not(.msg)。 |
3.5 其他方法：clone()
四、jQuery 動(dòng)畫(huà)
動(dòng)畫(huà)分為三部分：內(nèi)置動(dòng)畫(huà)、自定義動(dòng)畫(huà)（animate）、動(dòng)畫(huà)的配置；
內(nèi)置動(dòng)畫(huà)包含：
- 隱藏、顯示：hide()、show()、togger()；
- 漸隱漸顯：fadeOut()、fadeIn()、fadeToggle()、fadeTo()；
- 上拉下拉：slideUp()、slideDown()、lideToggle()；
4.1 隱藏、顯示：hide()、show()、togger()
隱藏hide(speed)、顯示show(speed)、隱藏或顯示togger(speed) - 類似toggleClass()
- 參數(shù)speed的值："slow"（600毫秒）、"fast"（200ms） 或 毫秒。默認(rèn)（不寫字符，即參數(shù)為""）400ms，不寫為直接顯示或隱藏（下同）。
這三個(gè)方法相當(dāng)于給被選元素添加內(nèi)置的樣式：display:none; 和 display:block;
<div id="box">boxoxbox</div> <script>$("#box").on("click", function(event){event.stopPropagation(); //阻止冒泡$("#box").hide();})$(document).on("click", function(){$("#box").show();}) </script>4.2 漸隱漸顯：fadeOut()、fadeIn()、fadeToggle()、fadeTo()
漸隱fadeOut(speed)、漸顯fadeIn(speed)、漸隱漸顯fadeToggle(speed)、漸變到fadeTo(speed, opacity)
- 參數(shù)speed："slow"、"fast" 或 毫秒。
- 參數(shù)opacity：不透明度（值介于 0 與 1 之間）。
4.3 上拉下拉：slideUp()、slideDown()、lideToggle()
上拉slideUp(speed)、下拉slideDown(speed)、上拉或下拉lideToggle(speed)
- 參數(shù)speed："slow"、"fast" 或 毫秒。
4.4 動(dòng)畫(huà)：animate()
animate() 中可以接收3個(gè)參數(shù)，分別是：對(duì)象（要變化的樣式和值），回調(diào)函數(shù)（回調(diào)函數(shù)中可以是再次對(duì)動(dòng)畫(huà)進(jìn)行改變，也可以改變樣式等）、動(dòng)畫(huà)的持續(xù)時(shí)間（單位：ms）。
1. 使用方法：
目標(biāo)元素（即要發(fā)生變化的元素）.animate({要發(fā)生變化的屬性: 屬性值（即改變到多少值）});
animate 中的屬性值可以做簡(jiǎn)單的運(yùn)算：
//在原來(lái)的基礎(chǔ)上寬度+100，這里要注意是字符形式 $("div").animate({width: "+=100",height: 100,top: 30,left:30 });2. 鏈?zhǔn)竭\(yùn)動(dòng)
（1）鏈?zhǔn)竭\(yùn)動(dòng)是同步的，最原始的寫法：
（2）可以改寫成：
//寬先增加到200px，位置變化到 top:30,left:30，然后高再變化到200px $("div").animate({width: "+=100",height: 100,top: 30,left:30 },function(){$("div").animate({height: 200}); });
（3）上面這種方式有簡(jiǎn)單寫法：
上面3中寫法的選擇：
- 當(dāng)鏈?zhǔn)竭\(yùn)動(dòng)操作的對(duì)象（元素）不是同一個(gè)時(shí)，選擇（1）、（2）；
- 每次動(dòng)畫(huà)操作的都是同一個(gè)元素時(shí)，采用連綴的寫法：（3）；
- 當(dāng) css 方法和 animate 方法一起使用時(shí)，連綴寫法會(huì)讓 css 和 animate 同時(shí)生效。如果想要在animate 中的樣式執(zhí)行完之后，再去執(zhí)行 css，需要變成寫法（2）【css樣式需要在哪個(gè)動(dòng)畫(huà)后改變，就在這個(gè)動(dòng)畫(huà)后寫回調(diào)函數(shù)】。//連綴寫法：會(huì)在一開(kāi)始顏色就變成 yellow $("div").animate({width: "+=100",height: 100,top: 30,left:30 }).animate({height:200}).css({ background: "yellow" });//回調(diào)函數(shù)式寫法： $("div").animate({width: "+=100",height: 100,top: 30,left:30 }).animate({height:200},function(){$("div").css({ background: "yellow" }); }) 函數(shù)式寫法的鏈?zhǔn)竭\(yùn)動(dòng)：
3. 動(dòng)畫(huà)的配置
（1）動(dòng)畫(huà)延遲生效：.delay(延遲時(shí)間ms)； 寫在動(dòng)畫(huà)開(kāi)始之前。
（2）動(dòng)畫(huà)停止：.stop(動(dòng)畫(huà)隊(duì)列[布爾值], 當(dāng)前動(dòng)畫(huà)[布爾值])；默認(rèn)為（false,false）
使用方式與 .delay() 相同
參數(shù)一：true 表示清除動(dòng)畫(huà)隊(duì)列（即清除整個(gè)動(dòng)畫(huà)效果），false表示不清除動(dòng)畫(huà)隊(duì)列。
參數(shù)二：true 表示直接運(yùn)行到當(dāng)前動(dòng)畫(huà)的終點(diǎn)，false 表示停止當(dāng)前動(dòng)畫(huà)。
案例放到Github上了：https://github.com/hexiling/jq-animate-stop
上面兩張圖片中，第一個(gè)是沒(méi)有關(guān)閉動(dòng)畫(huà)的效果，第二個(gè)是關(guān)閉了動(dòng)畫(huà)，.stop() 中的第一個(gè)參數(shù)傳 true 或者 false 都可以。主要：.stop(false,false)
（3）動(dòng)畫(huà)遞歸–動(dòng)畫(huà)自動(dòng)循環(huán)播放
<style>div{width:100px;height:100px;background:red;}</style><script>$("#btn1").click(function(){$("div").toggle(1000, function () {$("div").toggle(1000, arguments.callee);})}); </script>（4）動(dòng)畫(huà)的全局方法
寫在全局位置。
- $.fx.interval; 默認(rèn)13毫秒動(dòng)畫(huà)幀數(shù)設(shè)置，幀數(shù)越小，動(dòng)畫(huà)越流暢，但是可能會(huì)影響性能。使用：$.fx.interval = 2000;。
- $.fx.off=true; 關(guān)閉動(dòng)畫(huà)，設(shè)置為 true 時(shí)直接到動(dòng)畫(huà)的結(jié)束位置。
總結(jié)
以上是生活随笔為你收集整理的jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 关于HTML的面试题-html5/css
- 下一篇： 单独使用 laydate 日期时间组件