js和jQuery載入DOM的幾種方法對比

2021-08-13 11:43:05 字數 915 閱讀 3945

js: window.οnlοad=function()

等價於jq:$(window).load(function())

另:jq中的 $

(document

).ready

(function

() 簡寫1.

$(function())

簡寫2.

$().ready(function())

三者等價,但和上面的有差別:

這兩種寫法表示在dom載入完成就執行裡面的**,但對一些等其他還未載入的檔案不能進行操作;而上面的表示要在網頁中所有的元素(元素和所有關聯檔案)都載入到瀏覽器後才執行裡面的**,這時可以操作dom中的任何元素。

對比:window.onload 和 $(document).ready()

window.onload 方法不能多次使用,而後者可以。

原因:前者一次只能儲存乙個物件的引用,它會自動用後面的函式覆蓋前面的函式;而$(document).ready()可以在每次呼叫時在現有的行為上追加新的行為,且這些行為函式會按照註冊的順序依次執行

例子:

function one()

function two()

//用window.onload

window.onload = one;

window.onload = two;

//結果:只彈出 「two」 對話方塊

//用$(document).ready()

$(document).ready(function())

$(document).ready(function())

//結果:先彈出「one」對話方塊,後彈出「two」 對話方塊

jQuery中的dom載入

jquery中的載入 function 呼叫的是rootjquery.ready selector 其中rootjquery jquery document 所以上述 可以寫成 document ready function ready 中的ready 是例項方法 ready function fn...

原生js和Jquery操作DOM

dom元素節點 1 文件節點 2 元素節點 3 屬性節點 4 文字節點 5 注釋節點 1 建立節點 2 選擇 訪問 節點 3 操作 1 節點操作 1 新增節點 2 刪除節點 3 替換節點 4 修改內容 1 文字 text 2 html 3 表單val 4 改變事件 2 css操作 3 動畫 下文 一...

jQuery學習(監聽DOM載入)

jquery的extend方法 functionnjquery njquery.extend function obj this key obj key njquery.extend njquery.istest njquery.prototype.extend function obj this ...