jQuery基礎之二

jQuery基礎之二

 

jQuery的中文文檔十分詳細,而且權威.
W3C的jQuery文檔更加簡單實用。

---

jQuery 1.9.0

jQuery中文文檔
W3C的jQuery文檔

---

jQuery操做DOM元素

元素自己

attr() 得到元素的某項屬性,更改或添加元素的屬性值 實例 var className= $("div").attr("class") 得到元素的類名 attr("property",'value1') 更改一項屬性 attr({property1: 'value1', property2: 'value2' }) 更改多項屬性 css() 爲元素添加或修改某項或多項屬性 var className= $("div").css("propertyName") css("propertyname","value") 更改一項屬性 $("div").css({"background":"red","width":"100px"}) 多項屬性 注意： 多項屬性時之間要用","隔開 且與attr()的不一樣,設置多個屬性時其類名也加上引號

---

addClass() 爲元素添加新類名,來改變樣式 $("div").addClass("red") 爲div元素添加樣式 注意： 爲元素添加新樣式時不取消原有樣式。 addClass()的中類名再也不加"." 一次添加多項樣式時之間要用" "空格隔開 removeClass() 反 addClass() removeAttr() 反 css(),無需加屬性值 clone() 複製元素總體 $(selector).clone() 實例 var a=$("#div1").clone() 將id爲div1的元素賦值給變量a

包裹元素和內容

wrap() 用於包裹元素自己 $(selector).wrap(wrapper) 實例 $("#div1").wrap("<div></div>") id爲div1的元素總體被div標籤包裹 wrapInner() 實例 $("#div1").wrapInner("<div id="div2"></div>") id爲div1的元素的全部子元素被div2包裹,而div2又被div1包裹

元素的子元素

append(content) 向指定的元素中追加內容,被追加的content參數, 能夠是字符 HTML元素標記還能夠是字符串的標記 默認在該元素的子元素的最後面 實例 js: $html="<p class="green">asdawdasdwadsawdsa</p>" $("div").append($html) 至關於在div元素內部又加入p標籤 appendTo() 用法 $(content).appendTo(selector) 實例 js: $html="<p class="green">asdawdasdwadsawdsa</p>" $($html).appendTo("div") 將p標籤加入到div標籤的末尾處

---

remove() 刪除所選元素自己和子元素 實例 <span class="green">asd</span> <span class="red">asd</span> js: $("span").remove(".red") 刪除span標籤中類名爲red的元素,此時該span標籤再也不存在 empty() 刪除元素的全部子元素 實例 <span class="green">asd</span> js: $("span").empty() 知識刪除了asd文本節點span標籤依然存在

層級以內

before()和 after() 在元素的先後插入內容 $(selector).before(content) $(selector).after(content)

替換內容

replaceWith() 和 replaceAll() 格式 $(selector).replaceWith(content) $(content).replaceAll(selector) 實例 $("#div1").replaceWith("<p>asdwsadaw</p>") 把id爲#div1的整個元素換爲p標籤

---

遍歷元素

each() 格式:$(selector).each(function(index)) 實例： <span class="green1"></span> <span class="green2"></span> <span class="green3"></span> <span class="green4"></span> js: $("span").each(function(){ if(index==2){ $(this).addClass("red") } })) 爲類爲 green4的span元素添加red樣式 注意 this的使用$(this)此時不加雙引號

---

jQuery事件與應用

jQuery並無建立太多新的事件,而是爲綁定事件時提供了方便。

注意:這裏得事件名稱沒有'on',綁定鼠標點擊事件時只需click便可

新事件

ready事件 ready事件相似於onLoad事件，但前者只要頁面的DOM結構 加載後便觸發，然後者必須在頁面所有元素加載成功才觸發， ready()能夠寫多個，按順序執行。 注意: $(document).ready(function(){})等價於$(function(){}); focus和blur事件 文本框的focus和blur事件 focus事件:當點擊文本框時,觸發該事件 blur事件:當文本框失去焦點時,觸發該事件 change 事件 當一個元素的值(value)發生改變時,將觸發該事件 實例： 當改變下拉列表框的opnion時,將觸發該事件

綁定事件的方法

bind() 方法

    經過bind()方法能夠爲得到的DOM對象綁定任意的事件

    $(selector).bind(event,[data],function)

    實例
        $("#btntest").bind("click mouseout",function(){
            $(this).attr("value","OK")
        })
        當鼠標點擊id爲btntest的按鈕時改變其值爲OK

    注意：
        事件要加引號
        多個事件一塊兒綁定時當中空格隔開

綁定事件新方法

one() 方法 $(selector).one(event,func) 能夠綁定任何有效的事件,但該事件函數只會觸發一次 hover() 方法 $(selector).hover(function1,function2) 當鼠標移到所選元素上時,執行的function1,鼠標移出時執行function2 toggle() 方法 $(seleector).toggle(func1,func2,func3,funcN) 當第一次點擊元素對象時執行func1,第二次點擊元素對象時執行func2.. 當執行完最後一個函數時,再次點擊將返回執行的第一個函數

卸載綁定事件方法

unbind() 方法

    能夠移除元素已經綁定的事件

    $(selector).unbind(event[,fun])

    注意：
        若fun沒有指定將移除全部的觸發函數

模擬事件的觸發

trigger() 方法

    該方法能夠直接觸發元素指定的事件

    $(selector).trigger(event)

    實例
        $("#form1 input:submit").trigger("click")

        當執行該語句是至關於點擊提交按鈕,表單元素將被提交

精彩集錦

1.this指針的使用 $("span").each(function(){ if(index==2){$(this).addClass("red")}}) 2.易錯點睛 var speed=‘24px’ 或var speed=24 不能夠 var speed=24px

相關標籤：JavaScript

 

 

記錄一下依稀記得的。來自《鋒利的jQuery》第二章的總結

第一類：基本選擇器（最多見的選擇器）
①$("#id") ②$(".classname") ③ $("element") ④$("selector1,selector2,……,selectorN")

第二類：層次選擇器
①$("ancestor descendant") 後代選擇器 ② $("parent>child") 子代選擇器
③$("prev+next") 緊接在prev後的next元素
④ $("prev~siblings") prev後的全部siblings元素

第三類：過濾選擇器
①基本過濾選擇器
②內容過濾選擇器
③可見性過濾選擇器
④屬性過濾選擇器
⑤子元素過濾選擇器
⑥表單對象過濾選擇器

Ps:私覺得過濾選擇器分類太細，應總結經常使用的幾個過濾選擇器，方便記憶。

第四類：表單選擇器

$(":input")、$(":text")、$(":password")、$(":radio")、$(":image")
$(":checkbox")、$("submit")、$(":reset")、$(":button")、$(":file")
Ps:仍是以爲表單選擇器也挺細的，不知道經常使用的是哪幾個

書中有段話：jQuery選擇器的寫法與CSS選擇器的寫法十分相似，只不過二者的做用效果不一樣，css選擇器找到元素後是添加樣式，而jQuery選擇器找到樣式後是添加行爲。

做者： 慕粉1464062117 連接：http://www.imooc.com/article/16236來源：慕課網