1. 程式人生 > >DOM物件和JQuery物件的區別

DOM物件和JQuery物件的區別

jQuery物件和DOM物件使用說明,需要的朋友可以參考下。
1.jQuery物件和DOM物件
第一次學習jQuery,經常分辨不清哪些是jQuery物件,哪些是 DOM物件,因此需要重點了解jQuery物件和DOM物件以及它們之間的關係.
DOM物件,即是我們用傳統的方法(javascript)獲得的物件,jQuery物件即是用jQuery類庫的選擇器獲得的物件;
複製程式碼 程式碼如下:

var domObj = document.getElementById("id"); //DOM物件
var $obj = $("#id"); //jQuery物件;

jQuery物件就是通過jQuery包裝DOM物件後產生的物件,它是jQuery獨有的。如果一個物件是jQuery物件,那麼就可以使用jQuery裡的方法,例:
$("#foo").html(); //獲取id為foo的元素內的html程式碼,html()是jQuery特有的方法;
上面的那段程式碼等同於:
document.getElementById("foo").innerHTML;

注意:在jQuery物件中無法使用DOM物件的任何方法。
例如$("#id").innerHTML 和$("#id").checked之類的寫法都是錯誤的,可以用$("#id").html()和$("#id").attr ("checked")之類的 jQuery方法來代替。同樣,DOM物件也不能使用jQuery方法。學習jQuery開始就應當樹立正確的觀念,分清jQuery物件和DOM物件之間的區別,之後學習 jQuery就會輕鬆很多的。

2.jQuery物件和DOM物件的互相轉換

在上面第一點說了,jquery物件和dom物件是不一樣的!比如jquery物件不能使用dom的方法,dom物件不能使用jquery方法,那假如我 jquery沒有封裝我要的方法,那能怎麼辦呢?
這時我們可以將jquer物件轉換成dom物件

jquery物件轉換成 dom物件
jquery提供了兩種方法將一個jquery物件轉換成一個dom物件,即[index]和get(index)。可能有人會覺得奇怪,怎麼是用下標呢,沒錯,jquery物件就是一個數組物件.
下面程式碼將演示一個jquery物件轉換成dom物件,再使用dom物件的方法
複製程式碼 程式碼如下:

var $cr=$("#cr"); //jquery物件
var cr = $cr[0]; //dom物件 也可寫成 var cr=$cr.get(0);
alert(cr.checked); //檢測這個checkbox是否給選中

dom物件轉換成jquery物件
對於一個dom物件,只需要用$()把dom物件包裝起來,就可以獲得一個jquery物件了,方法為$(dom物件);
複製程式碼 程式碼如下:

var cr=document.getElementById("cr"); //dom物件
var $cr = $(cr); //轉換成jquery物件

轉換後可以任意使用jquery中的方法了.

通過以上的方法,可以任意的相互轉換jquery物件和dom物件.
最後再次強調,dom物件才能使用dom中的方法,jquery物件不可以使用dom中的方法,但 jquery物件提供了一套更加完善的工具用於操作dom,關於jquery的dom操作將在後面的文章進行詳細講解.


ps: 平時用到的jquery物件都是通過$()函式製造出來的,$()函式就是一個jquery物件的製造工廠.
建議:如果獲取的物件是 jquery物件,那麼在變數前面加上$,這樣方便容易識別出哪些是jquery物件,例如:
var $variable = jquery物件;
如果獲取的是dom物件,則定義如下:
var variable = dom物件

相關推薦

Dom物件,js物件jquery物件區別

原文:https://blog.csdn.net/kuangdacaikuang/article/details/72235747 一、DOM物件 文件物件模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴充套件置標語言的標準程式設計介面。

DOM物件JQuery物件區別

jQuery物件和DOM物件使用說明,需要的朋友可以參考下。 1.jQuery物件和DOM物件 第一次學習jQuery,經常分辨不清哪些是jQuery物件,哪些是 DOM物件,因此需要重點了解jQuery物件和DOM物件以及它們之間的關係. DOM物件,即是我們用傳統的方法(javascript)獲得的物件

DOM物件jquery物件

$開頭的表示jquery物件,沒有則為DOM,這兩個物件的方法不能通用 var $variable = .... var variable = ... 可以互相轉換: var $cr = $("#cr"); var cr = $cr[0];   //使用陣列轉換 var

js物件jquery物件相互轉換

js物件轉化為jquery物件 方法:只需要用$()把DOM物件包起來,就能獲取一個jquery物件 示例: var dom=document.getElementById('dom');//js物件 var dom=$(dom);//jquery物件 轉換後就可以使用jq

jQuery的檔案引入、入口函式以及js物件jquery物件之間的互相轉換

JavaScript與jquery的區別 JavaScript是一門程式語言,用來編寫客戶端瀏覽器指令碼。 jQuery是javascript的一個庫,包含多個可重用的函式,用來輔助簡化javascript開發 jQuery能做的javascript都能做到,而JavaScript能做的事情,

JS物件jQuery物件的相互轉換

jQuery–>js 有兩種轉換方法 var jq=$('#btn'); var js=jq[0];//第一種 //var js=jq.get[0];//第二種 js.onclick=function(){ console.log(1);

DOM物件js物件以及jQuery物件區別

一、DOM物件 文件物件模型簡稱DOM,是W3C組織推薦的處理可擴充套件置標語言的標準程式設計介面。 DOM實際上是以面向物件方式描述的文件模型。DOM定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。 通過DOM,可以訪問所有的

JavaScript——Dom物件jQuery

JavaScript是一種直譯式指令碼語言,一種動態型別、弱型別、基於原型的語言,內建支援型別;廣泛用於Web應用開發,常用來為網頁新增各式各樣的動態功能,為使用者提供更流暢美觀的瀏覽效果; Dom物件

jQuery(0)——Dom物件jQuery包裝集

Dom物件和jQuery包裝集 開始學習jQuery,沒想到還要知道這個概念。 Dom物件 DOM(Document Object Model)文件物件模型 在w3c中是這樣說明它的: 當網頁被載入時,瀏覽器會建立頁面的文件物件模型(Document Object Model)。 HTML DOM 模型被構

Dom物件jQuery物件區別

Dom物件與JQuery物件的區別 1、  概念理解 dom物件:是一個直接根據傳統的(javaScrip)書寫規則來定義物件的 jQuery物件:是根據Jquery類庫中的選擇器來獲取物件的 注意

成員函式返回的是物件引用的區別

我們發現,在C++中,有些成員函式返回的是物件,而有些函式返回的又是引用。 返回物件和返回引用的最主要的區別就是函式原型和函式頭。 Car run(const Car &)     //返回物件 Ca

python下,類物件例項物件區別,類變數例項變數區別

Y14 一、類物件和例項物件 簡短理論: 類物件是將具有相似屬性和方法的物件總結抽象為類物件,可以定義相似的一些屬性和方法,不同的例項物件去引用類物件的屬性和方法,能減少程式碼的重複率。 例項物件又稱例項化物件,不是抽象而是一類物件中具體的一例物件。 比

PHP全站開發工程師-第14章 JavaScript DOM物件BOM物件

第一階段(A)(前端) 20天 120學時 第14章 JavaScript DOM物件和BOM物件(6) [學習課時] 本章共需要學習  6  課時 [目的要求]  掌握JavaScript DOM物件 掌握JavaScript BOM物件 [教學內容

js中 json字串 json物件 以及 物件陣列的區別

json 字串轉json 物件 轉換後就可以取出物件中的值 json字串: var jsonString = '{"bar":"property","baz":3}' ; json物件: var jsObject =

jQuery學習筆記(2)——jQuery物件 & 靜態物件例項物件 & each()方法

四、jQuery物件——偽陣列 當我們呼叫jQuery核心函式時,無論傳入的引數是函式、字串或DOM元素,最終都會返回一個jQuery物件。 jQuery物件可以看作是一個“偽陣列”。所謂“偽陣列”,就是像陣列一樣含有"length"屬性,並且含有索引從0到le

new 出一個物件 = null的區別

在寫java程式碼的時候經常會new出物件來,就會有以下的程式碼: SKY s = new SKY(); s = t.select(); 被別人看到後就要找罵了。 其實可以簡單的寫: SKY S = t.select(); 簡單解釋一下:t.select();返回的就是一個

C++ 物件例項的區別,以及用new不用new建立類物件區別

起初剛學C++時,很不習慣用new,後來看老外的程式,發現幾乎都是使用new,想一想區別也不是太大,但是在大一點的專案設計中,有時候不使用new的確會帶來很多問題。當然這都是跟new的用法有關的。new建立類物件,使用完後需使用delete刪除,跟申請記憶體類似。所以,n

ES6ES5語法區別(Reflect物件Object物件

概述 Reflect物件與Proxy物件一樣,也是 ES6 為了操作物件而提供的新 API。 現階段,某些方法同時在Object和Reflect物件上部署,未來的新方法將只部署在Reflect物件上。也就是說,從Reflect物件上可以拿到語言內部的方法。

JS的物件陣列的區別使用

JS宣告物件或陣列 JS物件:{ } JS陣列:[ ] 1. 物件 var b={    m:'123',    n:'abc' } alert(b.m); alert(b.n); 2.一維陣列 var a=[1,2,3] alert(a[1]); alert(a.length);3.二維陣列 var ar

python中的類物件例項物件訪問屬性的區別property屬性

定義一個類就會開闢出一塊記憶體空間。類屬性就是類中的變數(例項物件共有的屬性就放在類屬性中共用),例項屬性就是例項物件的變數。類物件(類的一個模板),例項物件(用類模板創建出來的一個物件)。一個類物件可以創建出無數個例項物件。 類物件只能有一個,例項物件可以有多個。類屬性,類方法,例項方法,