Chapter 1? ? 認識jQuery

• jQuery對象和DOM對象的相互轉換

獲取jQuery對象：

var $variable = JQuery對象;獲取DOM對象：
var variable = DOM對象;

jQuery對象轉換成DOM對象：

var $cr = $("#cr");????//jQuery對象 var cr = $cr[0];????//DOM對象

Chapter 2? ? jQuery選擇器

$('#tt')? 獲取的是對象，即使網頁上沒有這個元素也不會報錯。應該根據獲取的元素長度來判斷是否存在

if ( $("#tt").length > 0) {//do something }

• 過濾選擇器： 以一個冒號（:）開頭

:first? ? 選取第一個元素

:even? ? 選取索引是偶數的所有元素

:odd?? ? 選取索引是奇數的所有元素

:eq（index）? ? 選取索引等于index的元素，從0開始計算（只匹配一個元素）

• 內容過濾選擇器????

:empty?? ? 選取不包含子元素或者文本的空元素

:has(selector)? ? 選取含有選擇器所匹配的元素的元素

• 屬性過濾選擇器

$("div[id]")?? ? 選取擁有屬性id的元素

• 子元素過濾選擇器

：nth-child(index)? ? 選取每個父元素下的第index個子元素

• 表單選擇器

：input? ? 選取所有的<input>、<textarea>、<select>和button元素

$("form :input").length,? （注意和$("form input")的區別）

• 選擇器的注意事項

1、? ? 選擇器含有特殊符號. 、 [ 等

????需要使用轉義字符轉義

$("#id\\#b")? ? 轉義特殊字符“#”，需要兩個\\，一個轉義用，一個雙引號用

2、? ? 選擇器含有空格

$('.test :hidden')? ? 帶空格的，選取class為"test"的元素里面的隱藏元素

$('.test:hidden')? ? 不帶空格，選取隱藏的class為"test"的元素

Chapter 3? ? jQuery中的DOM操作

• 屬性節點attr()

查找屬性節點：$("p").attr("title");? ? 獲取<p>元素的節點屬性title

刪除節點：removeAttr()

• 插入節點 （<p>我想說</p>）

向元素內部追加內容： $("p").append("<b>你好</b>"); <p>我想說 <b>你好</b></p>

在元素之后插入內容：

$("p").after("<b>你好</b>"); <p>我想說 </p><b>你好</b>????????（insertAfter()? ? 則顛倒了操作）

• 刪除節點

remove()? ? 該節點所包含的所有后代節點將同時被刪除，這個方法的返回值的一個指向已被刪除的節點的引用。

detach()? ? 也是刪除所有匹配的元素，但是和remove()不同的是，所有綁定的事件、附加的數據都會留下來。

empty()? ? 清空節點，只是內容被清空

• 復制節點

$("li").click(function() {$(this).clone().appendTo("ul"); };

? 復制的新元素并不具有任何行為。在clone()方法中傳遞一個參數true，則復制元素的同時復制元素所綁定的事件。

• 樣式

addClass()方法：追加class類

removeClass()：移除樣式

toggle()：行為的重復切換

toggleClass()：類名的重復切換（類名存在則刪除，不存在則添加）

• 設置和獲取HTML、文本和值

html()?? ? 讀取或設置某個元素的HTML內容 （類似innerHTML）

text()? ? 讀取或設置某個元素的文本內容 （jQuery的text()方法支持所有瀏覽器）（類似innerText）

val()? ? 設置和獲取元素的值 （類似value屬性）

• 遍歷節點

children()? ? 取得匹配元素的子元素集合（不考慮其他后代元素）

next()? ? 取得匹配元素后面緊鄰的同輩元素

siblings()? ? 取得匹配元素前后所有的同輩元素

Chapter 4? ? jQuery中的事件和動畫

$(document).ready()方法:? ? 在DOM載入就緒時，就能對其進行操縱。每次調用都會在現有行為上追加新的行為。

簡寫方式

$(function(){...}) 或 $().ready(function(){...});

總結

以上是生活随笔為你收集整理的《锋利的JQuery》notes的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。