首頁 > web前端 > js教程 > 主體

淺談Jquery核心函數_jquery

WBOY
發布: 2016-05-16 15:54:26
原創
1218 人瀏覽過

      在Jquery中,所有的DOM對像都將封裝成Jquery對象,而且只有Jquery對象才能使用Jquery方法或屬性來執行對應的操作。

所以Jquery提供了一個可以將DOM物件封裝成Jquery物件的函數,就是Jquery核心函數jquery(),也稱為工廠函數。

jquery核心函數有7個重載,分別如下:

jquery()  此函數傳回一個空的jquery物件。
jquery(elements)  此函數將一個或多個DOM元素轉換為Jquery物件(或jquery集合)
jquery(callback)     此函數是jquery(document).ready(callback)的簡寫。 此函數將綁定一個在DOM文檔載入完成後執行的函數。頁面中所有需要在DOM載入完成時,執行的jquery操作,都需要包含在這個函數中。這個函數,可以在頁面中,出現多次。
jquery(expression,[context])
jquery(html)
jquery(html,props)
jquery(html,[ownerDocument])

我們詳細來看下其中的

jQuery(expression, [context])

這個函數接收一個包含 CSS 選擇器的字串,然後用這個字串去匹配一組元素。

透過doc[0]、doc[1] 可以分別取出一個DOM 對象,其它的則是一些jQuery 對象特有的屬性和方法;實際上jQuery 對象包裝了DOM 對象,同時還包含了一些操作DOM 元素的jQuery 方法。

  在使用jQuery 的過程中,大部分情況下第一步工作同時也是最重要的一步工作,就是取得包裝了要操作DOM 物件的jQuery 物件;然後透過呼叫取得的jQuery 物件的方法來完成對DOM 物件的操作。

for example

1.找出#first context中節點為p的搜有元素,並循環顯示對應的值。

$(function() {
    var items = $("p", "#first");
    $.each(items, function(i, n) {
      alert(i);
    });
  });
登入後複製

 i為對應的index,n對應的節點

2.找出所有 p 元素,而這些元素都必須是 div 元素的子元素。

HTML 代碼:

one

two

three

jQuery 程式碼:
$("div > p");

結果:
[

two

]

3.在文件的第一個表單中,找出所有的單選按鈕(即: type 值為 radio 的 input 元素)。

jQuery 程式碼:
$("input:radio", document.forms[0]);
                                                                                                     

jQuery(html, [ownerDocument])

根據提供的原始 HTML 標記字串,動態建立由 jQuery 物件包裝的 DOM 元素。

你可以傳遞一個手寫的 HTML 字串,或是由某些模板引擎或外掛程式建立的字串,也可以是透過 AJAX 載入過來的字串。

jQuery(html, props)

根據提供的原始 HTML 標記字串,動態建立由 jQuery 物件包裝的 DOM 元素。同時設定一系列的屬性、事件等。

參數

htmlString

用於動態建立DOM元素的HTML標記字串

propsMap

用於附加到新建立元素上的屬性、事件和方法

範例

描述:

動態建立一個 div 元素(以及其中的所有內容),並將它追加到 body 元素中。在這個函數的內部,是透過暫時建立一個元素,並將這個元素的 innerHTML 屬性設定為給定的標記字串,來實現標記到 DOM 元素轉換的。所以,這個函數既有彈性,也有限制。

jQuery 程式碼:

$("<div>", {
 "class": "test",
 text: "Click me!",
 click: function(){
  $(this).toggleClass("test");
 }
}).appendTo("body");
登入後複製

$(document).ready()的簡寫。

當DOM載入完成後,執行其中的函數。

jQuery 程式碼:

 
$(function(){
 // 文档就绪
});
登入後複製

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板