2三、jQuery九類選擇器/jQuery經常使用Method-API/jQuery經常使用Event-API

 

1）掌握jQuery九類選擇器及應用

2）掌握jQuery經常使用Method-API

3）掌握jQuery經常使用Event-API

 

 

一）jQuery九類選擇器【參見jQueryAPI.chm手冊】

    目的：經過九類選擇器，能定位web頁面（HTML/JSP/XML）中的任何標籤

   （1）基本選擇器【參見01_selector.html】

   （2）層次選擇器【參見02_selector.html】

   （3）加強基本選擇器【參見03_selector.html】

   （4）內容選擇器【參見04_selector.html】

   （5）可見性選擇器【參見05_selector.html】

   （6）屬性選擇器【參見06_selector.html】

   （7）子元素選擇器【參見07_selector.html】

   （8）表單選擇器【參見08_selector.html】

   （9）表單對象屬性選擇器【參見09_selector.html】

        注意：項目中，一般是多種選擇器一塊兒使用

 

 

二）jQuery經常使用Method-API

    目的：對web頁面（HTML/JSP/XML）中的任何標籤，屬性，內容進行增刪改查

   （1）DOM簡述與分類

       （A）DOM是一種W3C官方標準規則，可訪問任何標籤語言的頁面(HTML/JSP/XML)

       （B）DOM是跨平臺(window/linux/unix)，跨語言(javascript/java)，

跨瀏覽器(ie/firefox/Chrome)的標準規則          

       （C）咱們只須要按照DOM標準規則，針對主流瀏覽器(ie/firefox/Chrome)編程

       （D）JS/jQuery按照DOM的標準規則，既能夠操做HTML/JSP，也能操做CSS

       （E）DOM標準規則不是JS的專屬，其它語言，也能適用，例如:VBScript，Java語言等

 

   （2）DOM標準規則下的jQuery經常使用API，注意：如下方法均由jQuery對象調用

        each()：是jQuery中專用於迭代數組的方法，參數爲一個處理函數，this表示當前須要迭代的js對象

               append()：追加到父元素以後

        prepend()：追加到父元素以前

after()：追加到兄弟元素以後

        before()：追加到兄弟元素以前

attr(name)：獲取屬性值

        attr(name,value)：給符合條件的標籤添加key-value屬性對

$("<div id='xxID'>HTML代碼</div>")：建立元素，屬性，文本   

        remove()：刪除自已及其後代節點 

val()：獲取value屬性的值

               val("")：設置value屬性值爲""空串，至關於清空

               text()：獲取HTML或XML標籤之間的值

               text("")：設置HTML或XML標籤之間的值爲""空串

clone()：只複製樣式，不復制行爲

        clone(true)：既複製樣式，又複製行爲

replaceWith()：替代原來的節點

        removeAttr()：刪除已存在的屬性

addClass()：增長已存在的樣式

        removeClass()：刪除已存在的樣式

        hasClass()：判斷標籤是否有指定的樣式，true表示有樣式，false表示無樣式

        toggleClass()：若是標籤有樣式就刪除，不然增長樣式

offset()：獲取對象的left和top座標

        offset({top:100,left:200})：將對象直接定位到指定的left和top座標

width()：獲取對象的寬

        width(300)：設置對象的寬

        height()：獲取對象的高

        height(500)：設置對象的高

children()：只查詢子節點，不含後代節點

        next()：下一下兄弟節點

        prev()：上一下兄弟節點

        siblings()：上下兄弟節點

show()：顯示對象

        hide()：隱藏對象

fadeIn()：淡入顯示對象

        fadeOut()：淡出隱藏對象

slideUp()：向上滑動

        slideDown()：向下滑動

        slideToggle()：上下切換滑動，速度快點

面試題--find("9類選擇器")：查詢指定的節點和多重each()迭代

       

//使用jquery彈出奇數的tr標籤下的td裏的值 var $tr = $("table tr:lt(4):even"); $tr.each(function(){ //tr中查找td標籤,$(this)表示tr var $td = $(this).find("td"); $td.each(function(){         //$(this)表示td         var txt = $(this).text(); alert(txt); }); });

 

 

三）jQuery經常使用Event-API

    目的：對web頁面（HTML/JSP）進行事件觸發，完成特殊效果的處理

    window.onload：在瀏覽器加載web頁面時觸發，能夠寫屢次onload事件，但後者覆蓋前者

    ready：在瀏覽器加載web頁面時觸發，能夠寫屢次ready事件，不會後者覆蓋前者，依次從上向下執行，咱們經常使用$(函數)簡化

                  ready和onload同時存在時，兩者都會觸發執行，ready快於onload

    change：當內容改變時觸發

    focus：焦點獲取

    select：選中全部的文本值

    keyup/keydown/keypress：演示在IE和Firefox中獲取event對象的不一樣

    mousemove：在指定區域中不斷移動觸發

    mouseover：鼠標移入時觸發

    mouseout：鼠標移出時觸發

    submit：在提交表單時觸發，true表示提交到後臺，false表示不提交到後臺

    click：單擊觸發

    dblclick：雙擊觸發

    blur：焦點失去

 

練習：

1）將selector目錄下的全部練習題作一遍

2）將method目錄下的全部練習題作一遍

3）將event目錄下的全部練習題作一遍[暫不作]

4）將exe目錄下的全部練習題作一遍