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