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

記錄一下依稀記得的。來自《鋒利的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選擇器找到樣式後是添加行為。

jQuery基礎之二