jQuery
jQuery，顧名思義，也就是JavaScript和查詢（Query）極大地簡化了JavaScript開發人員遍歷HTML檔案、操作DOM、處理事件、執行影片和開發Ajax，
-
jQuery是免費、開源的
-
輕量級(壓縮后只有幾十k)
-
強大的選擇器
-
出色的 DOM 操作的封裝
-
可靠的事件處理機制
-
完善的 Ajax使用
-
出色的多瀏覽器兼容性
-
隱式迭代：對集合物件做相同操作時不需要逐個進行遍歷，jQuery自動進行遍歷
-
檔案說明很全
-
可擴展插件
jQuery庫實際上就是一個js檔案，只需要在網頁中直接引入這個檔案就可以了，
jQuery核心函式： $()
-
jQuery庫中為window物件定義了一個函式： jQuery()，簡化為：$()
-
$是jQuery的核心函式，jQuery的核心功能都是通過這個函式實作，$()就是呼叫$這個函式，
-
$函式會根據引數資料型別的不同做不同的作業, 回傳一個jQuery封裝的偽陣列的物件
傳入引數為函式時：$(function(){})
-
傳入一個function引數, 作為回呼函式，相當于window.onload = function(){}
-
表示：在DOM檔案載入完成后，回呼函式自動執行
-
這個函式是 $(document).ready(function(){})的簡寫形式，
傳入引數為選擇器字串時： $(選擇器字串)
-
接收一個CSS選擇器格式的字串引數
-
根據這個選擇器查找元素節點物件
-
根據此字串在document中去匹配一組元素，并封裝成jQuery物件回傳
$("#id屬性值"); 相當于通過id屬性查找標簽物件
$("標簽名"); 相當于通過標簽名查找標簽物件，回傳集合
$(".class屬性值"); 相當于通過class屬性查找標簽物件，回傳集合
傳入引數為HTML字串時：$(HTML字串)
-
接收一個標簽字串引數，
-
根據這個html字串創建元素節點物件
-
創建對應的標簽物件， 并包裝成jQuery物件
var $liEle = $("<li>香港</li>") //相當于創建了一個標簽物件 <li>香港</li>， $("#city").append($liEle); //將此jQuery物件添加到現有的jQuery物件中，
傳入引數為DOM物件時： $(DOM物件)
-
接收一個DOM物件型別的引數
-
回傳包含這個dom物件的jQuery物件，相當于把DOM物件包裝（或轉換）成jQuery物件，
-
注意：如果宣告一個變數指向jQuery物件，那么這個變數命名習慣上要以$開頭，
-
var bjEle = document.getElementById("bj"); alert(bjEle); alert($(bjEle));
jQuery物件和DOM物件區分
- Dom物件：通過原生js實作的DOM標準查找到的元素物件
- jQuery物件：通過$查找或包裝過的物件
jQuery物件本質上是一個封裝了DOM物件陣列加一系列的jQuery的功能函式function的結構，
習慣上給jQuery物件命名時，變數名前加上$，便于區分jQuery物件和js DOM物件，
jQuery物件和DOM物件使用區別
-
jQuery物件和DOM物件的屬性不能互用，只能呼叫各自宣告過的屬性，
-
jQuery物件和DOM物件的函式也不能互用，只能呼叫各自宣告過的函式，
DOM物件和jQuery物件的互相轉換
-
DOM物件轉jQuery物件
-
使用jQuery核心函式包裝DOM物件：$(DOM物件)
-
例如：var $btnEle = $(btnEle)
-
-
jQuery物件轉DOM物件
-
使用陣列下標：$btnEle[0]
-
使用get(index)方法：$btnEle.get(0)
-
-
DOM物件轉為jQuery物件：為了呼叫jQuery提供的豐富的方法
-
jQuery物件轉為DOM物件：有些特殊需求在框架中沒有提供，需要使用原生的js實作
檔案處理 增 刪 改 查 事件
選擇器
jQuery的選擇器分類
-
基本選擇器
-
層級選擇器（或層次選擇器）
-
過濾選擇器
-
基本
-
內容
-
可見性
-
屬性
-
子元素
-
表單
-
表單物件屬性
-
基本選擇器
它通過標簽名,id屬性,class屬性來查找匹配的DOM元素
1） id選擇器
-
用法： $("#id")
-
回傳值：根據id屬性匹配一個標簽， 封裝成jQuery物件
2） 標簽選擇器
-
用法: $("tagName")
-
回傳值：根據標簽名匹配的一個或多個標簽，封裝成jQuery物件
3） class選擇器
-
用法: $(".class")
-
回傳值：根據class屬性值匹配一個或多個標簽, 封裝成jQuery物件
4） *選擇器
-
用法: $("*")
-
回傳值: 匹配所有標簽， 封裝成jQuery物件
5） selector1,selector2,…
-
用法: $(”div,span,.myClass”)
-
回傳值: 所有匹配選擇器的標簽, 封裝成jQuery物件,用，分割
層級選擇器
如果想通過DOM元素之間的層級關系來獲取特定元素，例如后代元素、子元素、兄弟元素等，則需要通過層級選擇器（或層次選擇器），
1） ancestor descendant
-
用法:$(”form input”)
-
說明:在給定的祖先元素下匹配所有后代元素（包括子元素的子元素，...）
2） parent > child
-
用法: $(”form > input”)
-
說明: 在指定父元素下匹配所有子元素，
-
注意：要區分好后代元素與子元素
-
3） prev + next
-
用法: $(”label + input”)
-
說明: 匹配所有緊接在prev元素后的next元素，（即相鄰的下一個）
-
注意：從平級元素中找，而不要去子元素中查找，
-
4） prev ~ siblings
-
用法: $(”form ~ input”)
-
說明: 匹配prev元素之后的所有 siblings元素，不包含該元素在內，并且siblings匹配的是和prev同輩（兄弟元素）的元素，其后輩子元素不被匹配，
過濾選擇器：基本
-
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素, 該選擇器都以 “:” 開頭
-
按照不同的過濾規則，過濾選擇器可以分為基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾，表單過濾和表單物件屬性過濾選擇器，
1） :first
-
用法: $(”tr:first”) ;
-
說明: 匹配找到的第一個元素，
2） :last
-
用法: $(”tr:last”)
-
說明: 匹配找到的最后一個元素.與 :first 相對應，
3） :not(selector)
-
用法: $(”input:not(:checked)”)
-
說明: 去除所有與給定選擇器匹配的元素，類似于”非”，意思是沒有被選中的input(即當input的type=”checkbox”)，
4） :even
-
用法: $(”tr:even”)
-
說明: 匹配所有索引值為偶數的元素，從0開始計數，js的陣列都是從0開始計數的，
5） :odd
-
用法: $(”tr:odd”)
-
說明: 匹配所有索引值為奇數的元素，和:even對應，從 0 開始計數，
6） :eq(index)
-
用法: $(”tr:eq(0)”)
-
說明: 匹配一個給定索引值的元素，eq(0)就是獲取第一個tr元素，括號里面的是索引值，不是元素排列數，從0開始
7） :gt(index)
-
用法: $(”tr:gt(0)”)
-
說明: 匹配所有大于給定索引值的元素，
8） :lt(index)
-
用法: $(”tr:lt(2)”)
-
說明: 匹配所有小于給定索引值的元素，
9） ：header （匹配h1-h6標題）、：animated （匹配正在執行影片效果的）、：focus（匹配當前獲取焦點的）
過濾選擇器：內容
-
內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上
1） :contains(text)
-
用法: $(”div:contains(’John’)”)
-
說明: 匹配包含給定文本的元素，這個選擇器比較有用，當我們要選擇的不是dom標簽元素時，它就派上了用場了，它的作用是查找被標簽”圍”起來的文本內容是否符合指定的內容的，
2） :has(selector)
-
用法: $(”div:has(p)”).addClass(”test”)
-
說明: 匹配含有選擇器所匹配的元素的元素，這個解釋需要好好琢磨，但是一旦看了使用的例子就完全清楚了:給所有包含p元素的div標簽加上class=”test”，
3） :empty
-
用法: $(”td:empty”)
-
說明: 匹配所有不包含子元素或者文本的空元素
4） :parent
-
用法: $(”td:parent”)
-
說明: 匹配含有子元素或者文本的元素，注意:這里是”:parent”可不是”.parent”！感覺與上面講的”:empty”形成反義詞，
過濾選擇器：可見性
-
根據元素的可見和不可見狀態來選擇相應的元素
1） :hidden
-
用法: $(”tr:hidden”)
-
說明: 匹配所有的不可見元素，有兩種情況：css中display:none和input type=”hidden”的都會被匹配到，同樣，要在腦海中徹底分清楚冒號”:”，點號”.”和逗號”,”的區別，
2） :visible
-
用法: $(”tr:visible”)
-
說明: 匹配所有的可見元素，
過濾選擇器：屬性
- 屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素，
1） [attribute]
-
用法: $(”div[id]“)
-
說明: 匹配包含給定屬性的元素，例子中是選取了所有帶id屬性的div標簽，
2） [attribute=value]
-
用法: $(”input[name='newsletter']“).attr(”checked”, true)
-
說明: 匹配給定的屬性是某個特定值的元素，例子中選取了所有name屬性是newsletter的 input 元素，
3） [attribute!=value]
-
用法: $(”input[name!='newsletter']“).attr(”checked”, true)，
-
說明：匹配所有不含有指定的屬性，或者屬性不等于特定值的元素，此選擇器等價于:not([attr=value])，要匹配含有特定屬性但不等于特定值的元素，請使用[attr]:not([attr=value])，之前看到的 :not 派上了用場，
4） [attribute^=value]
-
用法: $(”input[name^=‘news’]“)
-
說明: 匹配給定的屬性是以某些值開始的元素，
5 ） [attribute$=value]
-
用法: $(”input[name$=‘letter’]“)
-
說明: 匹配給定的屬性是以某些值結尾的元素，
6） [attribute*=value]
-
用法: $(”input[name*=‘man’]“)
-
說明: 匹配給定的屬性是以包含某些值的元素，
7） [selector1] [selector2] [selectorN]
-
用法：$("input[id] [name$='man']]")
-
說明：復合屬性選擇器，需要同時滿足多個條件時使用，
過濾選擇器：子元素
1） :nth-child(index/even/odd/equation)
-
用法: $(”ul li:nth-child(2)”)
-
說明: 匹配其父元素下的第N個子或奇偶元素，注意index不同于eq(index),這里從1開始
2） :first-child
-
用法: $(”ul li:first-child”)
-
說明: 匹配第一個子元素，’:first’ 只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素，這里需要特別的記憶一下區別，二者的呼叫者都是針對要操作的元素來講的，
3） :last-child
-
用法: $(”ul li:last-child”)
-
說明: 匹配最后一個子元素，’:last’只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素，
4） : only-child
-
用法: $(”ul li:only-child”)
-
說明: 如果某個元素是父元素中唯一的子元素，那將會被匹配，如果父元素中含有其他元素，那將不會被匹配，意思就是：只有一個子元素的才會被匹配！
過濾選擇器：表單
1） :input
-
用法: $(”:input”)
-
說明:匹配所有 text, textarea, select 和 button 元素 ，
2） :text
-
用法: $(”:text”)
-
說明: 匹配所有的單行文本框，
3） :password
-
用法: $(”:password”)
-
說明: 匹配所有密碼框，
4） :radio
-
用法: $(”:radio”)
-
說明: 匹配所有單選按鈕，
5） :checkbox
-
用法: $(”:checkbox”)
-
說明: 匹配所有復選框，
6） :submit
-
用法: $(”:submit”)
-
說明: 匹配所有提交按鈕，
7） :image
-
用法: $(”:image”)
-
說明: 匹配所有影像域，
8） :reset
-
用法: $(”:reset”)
-
說明: 匹配所有重置按鈕，
9） :button
-
用法: $(”:button”)
-
說明: 匹配所有按鈕.這個包括直接寫的元素button，
10） :file
-
用法: $(”:file”)
-
說明: 匹配所有檔案域，
11） :hidden
-
用法: $(”input:hidden”)
-
說明: 匹配所有不可見元素，或者type為hidden的元素.這個選擇器就不僅限于表單了,除了匹配input中的hidden外,那些style為hidden的也會被匹配，
過濾選擇器：表單物件屬性
-
此選擇器主要對所選擇的表單元素進行過濾
1） :enabled
-
用法: $(”input:enabled”)
-
說明: 匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”的input.不為disabled,當然就為enabled啦，
2） :disabled
-
用法: $(”input:disabled”)
-
說明: 匹配所有不可用元素.與上面的那個是相對應的，
3） :checked
-
用法: $(”input:checked”)
-
說明: 匹配所有被選中的元素(復選框、單選框等，不包括下拉串列select中的option)，
-
注意：官方檔案說明是不包括select中的option，但測驗中是包含的，只是不建議大家這樣用，
-
4） :selected
-
用法: $(”select option:selected”)
-
說明: 匹配所有選中的option元素，
檔案處理（CRUD）
查找節點方法()
1） $(selector)
-
使用jQuery選擇器查詢
-
得到一個包含所有匹配的dom節點物件的jQuery物件
2） find(selector)
-
查詢jQuery物件內部資料
-
在Jquery物件中根據selector查找其中匹配的后代節點
3） eq(index)
-
根據索引值查找集合中指定位置的元素
-
index從0開始，也可以為-1，-2，...，其中-1是最后一個元素
4） filter(expr|obj|ele|fn)
-
根據傳入的選擇器字串等再次從呼叫者中篩選
5） children([expr])
-
取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合，
6） parent([expr])
-
取得一個包含著多個匹配元素的唯一父元素的元素集合，
7） parents([expr])
-
取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素），可以通過一個可選的運算式進行篩選，
8） each(callback)
-
遍歷jQuery物件包含的資料：$(selector1).each(function(index, itemDom){ })
-
遍歷jQuery物件所包含的所有節點, 每取一個dom節點物件都去呼叫設定的回呼函式, 并將取出的節點在陣列中的下標和節點物件傳入函式
獲取長度
1） 屬性：length
-
jQuery 物件中元素的個數，
2） 函式：size()
-
jQuery 物件中元素的個數，與length屬性作用一樣，
內部插入節點
1） append(content)
-
向每個匹配的元素的內部的結尾處追加內容，
2） appendTo(content)
-
把所有匹配的元素追加到另一個指定的元素集合中
3） prepend(content)
-
向每個匹配的元素的內部的開始處插入內容
4） prependTo(content)
-
將每個匹配的元素插入到指定的元素內部的開始處
外部插入節點
1） after(content)
-
在每個匹配的元素之后插入內容
2） before(content)
-
在每個匹配的元素之前插入內容
3） insertAfter(content)
-
把所有匹配的元素插入到另一個、指定的元素集合的后面
4） insertBefore(content)
-
把所有匹配的元素插入到另一個、指定的元素集合的前面
創建節點
-
$(htmlString)
-
動態創建的新元素節點不會被自動添加到檔案中, 需要使用其他方法將其插入到檔案中;
-
當創建單個元素時, 需注意閉合標簽和使用標準的 XHTML 格式. 例如創建一個<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)
-
創建文本節點就是在創建元素節點時直接把文本內容寫出來; 創建屬性節點也是在創建元素節點時一起創建
洗掉節點
1） empty()
-
洗掉匹配的元素集合中所有的子節點(不包括本身)，
2） remove()
-
洗掉匹配的元素及其子元素(包括本身)
修改節點
1） replaceAll(selector)
-
用匹配的元素替換掉所有 selector匹配到的元素，
2） replaceWith(content|fn)
-
將所有匹配的元素替換成指定的HTML或DOM元素，
屬性操作
1） attr(name ,[value])
-
attr(屬性名) 回傳“屬性名”對應的屬性值
-
attr(屬性名,屬性值) 將“屬性名”對應的屬性設定為“屬性值”
2） removeAttr(name)
-
根據屬性名洗掉對應的屬性
HTML代碼/值
1）html([val])
-
得到元素的內容或者設定元素的內容
2）val([value])
-
val() 讀取value屬性
-
val(value值) 設定value屬性
-
val([選項值1,選項值2,…,選項值n]) 設定單選框、多選框或下拉串列被選中的值
3）text()
-
text() 得到元素節點物件的文本內容
-
text(str) 設定元素的文本內容
CSS
1） addClass(className)
-
添加class屬性
2） removeClass()
-
移除class屬性
3） css(name,[value])
-
查看某個樣式屬性, 或設定某個樣式屬性
常用事件
1） ready(fn)
-
當DOM載入就緒可以查詢及操作時，系結一個要執行的函式
2） click([fn])
-
觸發每一個匹配元素的click事件
3） blur([fn])
-
blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的
4） change([fn])
-
change事件會在元素失去焦點的時候觸發，也會當其值在獲得焦點后改變時觸發，
系結與解綁事件
1） bind(type, fn)
-
為每個匹配元素的特定事件系結事件處理函式，
2） unbind(type)
-
bind()的反向操作，從每一個匹配的元素中洗掉系結的事件
事件切換
1）hover(over,out)
-
當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函式，當滑鼠移出這個元素時，會觸發指定的第二個函式，
2） 事件冒泡
-
描述: 事件會按照 DOM 層次結構像水泡一樣不斷向上直至頂端，即：子元素事件觸發引起父元素的事件也觸發的現象
-
解決: 在事件處理函式中回傳 false, 會對事件停止冒泡
效果
基本
1） show()
-
顯示當前標簽
2） hide()
-
隱藏當前標簽
3） toggle()
-
切換當前標簽的可見性
滑動
1） slideDown()
-
這個影片效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來
2） slideUp()
-
這個影片效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來
3） slideToggle()
-
通過高度變化來切換所有匹配元素的可見性
淡入淡出
1） fadeIn()
-
通過不透明度的變化來實作所有匹配元素的淡入效果
2） fadeOut()
-
通過不透明度的變化來實作所有匹配元素的淡出效果
3） fadeToggle()
-
通過不透明度的變化來開關所有匹配元素的淡入和淡出效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/25002.html
標籤：jQuery
上一篇：Ajax 的基本使用