jQuery技巧總結 二

2021-05-24 05:10:41 字數 1989 閱讀 6922

四、語法總結和注意事項

1、關於頁面元素的引用

通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關係及dom或者xpath條件等方法,且返回的物件為jquery物件(集合物件),不能直接呼叫dom定義的方法。

2、jquery物件與dom物件的轉換

只有jquery物件才能使用jquery定義的方法。注意dom物件和jquery物件是有區別的,呼叫方法時要注意操作的是dom物件還是jquery物件。

普通的dom物件一般可以通過$()轉換成jquery物件。

如:$(document.getelementbyid("msg"))則為jquery物件,可以使用jquery的方法。

由於jquery物件本身是乙個集合。所以如果jquery物件要轉換為dom物件則必須取出其中的某一項,一般可通過索引取出。

如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]這些都是dom物件,可以使用dom中的方法,但不能再使用jquery的方法。

以下幾種寫法都是正確的:

$("#msg").html();

$("#msg")[0].innerhtml;

$("#msg").eq(0)[0].innerhtml;

$("#msg").get(0).innerhtml;

3、如何獲取jquery集合的某一項

對於獲取的元素集合,獲取其中的某一項(通過索引指定)可以使用eq或get(n)方法或者索引號獲取,要注意,eq返回的是jquery物件,而get(n)和索引返回的是dom元素物件。對於jquery物件只能使用jquery的方法,而dom物件只能使用dom的方法,如要獲取第三個元素的內容。有如下兩種方法:

$("div").eq(2).html();              //呼叫jquery物件的方法

$("div").get(2).innerhtml;       //呼叫dom的方法屬性

4、同一函式實現set和get

jquery中的很多方法都是如此,主要包括如下幾個:

$("#msg").html();              //返回id為msg的元素節點的html內容。

$("#msg").html("new content");      

//將「new content」 作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的new content

$("#msg").text();              //返回id為msg的元素節點的文字內容。

$("#msg").text("new content");      

//將「new content」 作為普通文字串寫入id為msg的元素節點內容中,頁面顯示new content

$("#msg").height();              //返回id為msg的元素的高度

$("#msg").height("300");       //將id為msg的元素的高度設為300

$("#msg").width();              //返回id為msg的元素的寬度

$("#msg").width("300");       //將id為msg的元素的寬度設為300

$("input").val(");       //返回表單輸入框的value值

$("input").val("test");       //將表單輸入框的value值設為test

$("#msg").click();       //觸發id為msg的元素的單擊事件

$("#msg").click(fn);       //為id為msg的元素單擊事件新增函式

同樣blur,focus,select,submit事件都可以有這兩種呼叫方法

jQuery技巧總結 4

10 幾個實用特效功能 其中toggle 和slidetoggle 方法提供了狀態切換功能。如toggle 方法包括了hide 和show 方法。slidetoggle 方法包括了slidedown 和slideup方法。11 幾個有用的jquery方法 browser.瀏覽器型別 檢測瀏覽器型別。...

jQuery基礎總結(二)

jquery基本總結 二 內容選擇器 contains text 返回包含指定的文字元素 parent 返回匹配子元素的元素 has text 返回包含指定元素的元素 empty 返回無文字或者空元素 可見性 visible 匹配所有可見的元素 hidden 匹配所有不可見的元素 只要在頁面上不顯示...

jQuery 動畫 ajax總結(二)

方法 作用引數 show 將隱藏元素顯示 speed 動畫時長 easing 切換效果,預設為swing。linear fn 動畫完成時執行的函式 這些引數都不是必選的 hide 隱藏元素 speed 動畫時長 easing 切換效果,預設為swing。linear fn 動畫完成時執行的函式 這些...