jQuery介绍
?1.jQuery概述
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
2.使用版本
jquery-1.11.0.js
3.? 基本語法
3.1? jQuery語法
<input name="name" id="in" value="lucy" /> <script type="text/javascript">//根據id獲取jquery對象var $input = $("#in");alert($input.val()); </script>3.2?jQuery對象和dom對象轉換
<input type="text" id="username" value="jack"/> <script type="text/javascript">//1.dom如何獲取var username =document.getElementById("username");//alert(username.value);//2.將dom轉jquery對象// 語法 $(dom對象)var $username =$(username);//alert($username.val());//3.jquery轉成dom對象//jquery對象內部使用“數組”存放所有的數據，可以通過數組下標來獲取var username2 = $username[0];//alert(username2.value);//3.1jquery提供了一個函數get() jq轉dom對象var username3 = $username.get(0);alert(username3.vaule); </script>?
4.?選擇器
① ?#id??? id選擇器 根據id獲取標簽jQuery對象
② ?Element? 標簽選擇器 ? 根據標簽獲取jQuery對象
③ ?.class??????? ??類選擇器?????? ??根據類名獲取jQuery對象
④ ?s1,s2,s3… ? ? 多選擇器 ? ?將多個選擇器添加到一個數組中
⑤ ?* ? ?所有 ? ? ? ? 使用的不多
?
5.層級
? A? B ? ? 取A元素內部所有的B后代元素（爺孫）
? A > B?? 獲取A元素內部所有的B子元素（父子）
? A + B?? 獲取A元素后面的第一個兄弟元素
? A ~ B??? 獲取A元素后面的所有兄弟B
?
6.基本過濾
? : first ? ? ? ? ? ? ? ? ?第一個
? : last ? ? ? ? ? ? ? ? ?最后一個
? : eq(index)???????? 獲取指定索引
? : gt(index)????????? 獲取大于指定索引
? : lt(index)?????????? 獲取小于指定索引
? : even ? ? ? ? ? ? ? 偶數
? : odd ? ? ? ? ? ? ? ? 奇數
? : not(selector) ? 去除所有與給定選擇器匹配的元素
? : header ? ?獲取所有的標題元素 h1 – h6
? : animated ? ? ? ?獲取所有的動畫
? : focus ? ? ? ? ? ? ?獲得焦點
?
7.內容
Contains(text) ? ? ? ? ? ?標簽體是否包含指定的文本
Empty ? ? ? ? ? ? ? ? ? ? ? ?當前元素是否為空
Has（…）???????????????? 當前元素是否含有指定的子元素
Parent ? ? ? ? ? ? ? ? ? ? ? 當前元素是否是父元素
?
8.可見性過濾?
? : hidden????????????? 隱藏
? : visible ? ? ? ? ? ? ?可見
9.屬性?
[屬性名] ? ? ? ? ? ? ? ? ? ? ? ? ? ? 獲取指定屬性名的元素
[屬性名=屬性值] ? ? ? ? ? ? ? ? 獲取屬性名 等于?? 指定值 的元素
[屬性名!=屬性值] ? ? ? ? ? ? ? ?獲取屬性名 不等于 指定值得元素
[attr1][attr2][attr3] ? ? ? ? ? ? ? 符合選擇器???? 多個條件同時成立? 相當于and
-----------------------------------------------
[屬性名^=屬性值]?????????? 獲取屬性名? 以指定值開頭 的元素
[屬性名$=屬性值]?????????? 獲取屬性名? 以指定值結尾 的元素
[屬性名*=屬性值] ? ? ? ? ? ?獲取屬性名? 含有指定值?? 的元素
10.子元素過濾
11.表單過濾
12.表單對象屬性
13.屬性和CSS
14.?文檔處理?
14.1?內部插入
A.append(B) ? ? ? ? ? ? 將B插入到A的內部后面
A.prepend(B)?????????? ? 將B插入到A的內部前面
A.appendTo(B)??????????????? ?將A插入到B的內部后面
A.prependTo(B)?????????????? ? ? 將A插入到B的內部前面
14.2?外部插入
A.after(B) ? ? ? ? ? ? ? ? ? ? ? ? ? ??將B插入到A的外部 （同級）
A.before(B)??????????????? ?將B插入到A的前面????
A.insertAfter(B)?????? 將A插入到B的后面
A.insertBefore(B)?? ? 將A插入到B的前面
?
15.篩選
eq(index) 根據索引獲取jq對象 $(“div:eq(0)”) $(“div”).eq(0)
?first()??????? 獲取第一個
?last() ? ? ? ? ? ?獲取最后一個
?is() ? ? ? ? ? ?? 判斷
hasClass() ? ? ? 判斷 專業類樣式
filter()?????? ? ?過濾篩選指定的元素集合
not() ? ? ? ? ? ? ? ?刪除指定元素
16.查找
<A>
<B>
<C><C>
<D><D>
<E><E>
<F><F>
<B>
<A>
?
B.children() ? ? ? ?獲取所有的孩子 CDEF
A.find(D) ? ? ? ? ? ?查找???????? D
D.next()???????????? 下一個兄弟 E
D.nextAll() ? ? ? ? ?后面所有兄弟 E F
E.prev()???????????? 上一個兄弟???? D
E.prevAll()???????? 前面所有兄弟 CD
E.siblings()??????? 所有兄弟???????? CDF
E.parent()???????? 父元素???? B
E.closest(A)????? 向上獲取指定的父元素，如果有返回一個對象，如果沒有就不返回
?
17.串聯
A.add(B) ??講A和B組合一個對象 $(“A B”)
end()???????? 回到最近一次”破壞性” 操作之前
contents()???????? 獲取所有的子節點(子元素和文本)
addBack()???????? 把當前和上一次操作的元素 組合
?
18.事件
19.頁面加載
頁面加載完畢執行 ??$(document).ready(fn)
簡化版 ? ?? ? $(fn)
20.事件處理
on(events,fun) ?提供綁定事件處理程序所需要的功能，完成3個方法 .bind(), .delegate(), 和 .live().
off(enents)?????? 解綁
one(type,fun)?? 為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數
trigger(type)??? ?會執行瀏覽器默認動作，會產生事件冒泡。????
triggerHandler(type) ? ? ? 這個特別的方法將會觸發指定的事件類型上所有綁定的處理函數。但不會執行瀏覽器默認動作，也不會產生事件冒泡。
21.事件切換
hover(overfun,outfun)
?簡化版；
A.mouseover(fun).mouseout(fun);
A.hover(fun,fun);
toggle(fn,fn,fn,fn…)?? 切換?? 執行click事件，每點擊一次執行一個fn
22.效果、動畫
?show() ??? 顯示
?hide() ? ? ? 隱藏
?toggle()??? 切換
?
轉載于:https://www.cnblogs.com/jjqq0921/p/10195541.html
總結
- 上一篇： SDK 和 API
- 下一篇： IO-00. Hello World!