首頁 web前端 js教程 jquery和document取得html元素的差別是什麼?

jquery和document取得html元素的差別是什麼?

Nov 20, 2020 pm 04:40 PM
document html元素 jquery

區別:jquery取得的html元素是jquery對象,可以執行jquery的方法,而document取得的是dom對象,執行的是dom的方法。 jQuery物件是jQuery獨有的,不能用DOM方法;而DOM物件也不能用jQuery方法。

jquery和document取得html元素的差別是什麼?

相關推薦:《jQuery教學

最近透過ocx做了一個影片插件,然後將插件放到html(想知道的可以看一下)

因為我要操作這個插件,要播放,停止等,所以我需要獲取這個元素,不出意外的,我就用jquery來獲取,然後根本無法執行,然後用document來獲取,正常執行,具體的如下所示

//正常执行     var obj = document.getElementById("player00");
obj.testhelloworld();//无法执行var playobj = $('#player00');
playobj.testhelloworld();
登入後複製

然後我就在想,這兩者有什麼區別呢? 接著搜尋如下結論

jquery取得的html元素是jquery對象,可以執行jquery的方法,而document取得的是dom對象,執行的是dom的方法

說明:

DOM物件是我們用傳統的方法(javascript)得到的對象,jQuery物件就是用jQuery的類別庫選擇器所獲得的對象。 JQuery物件就是透過jQuery包裝DOM物件後產生的物件。 JQuery物件是jQuery獨有的,其可以使用jQuery裡的方法,但是不能使用DOM的方法

頓時釋然,我此前一直認為兩個是等價的,並為追究為什麼dom的方法為什麼不能在jquery來執行,現在想想,完全釋然了。

既然這樣,那麼兩者之間要怎麼互相轉化呢? 畢竟所得到的對象的內容是一樣的。

jQuery物件轉換為DOM物件: 

兩種轉換方式將一個jQuery物件轉換成DOM物件:[index]和.get(index); 

(1)jQuery物件是一個資料對象,可以透過[index]的方法,來得到對應的DOM對象。

如:

var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中
登入後複製

(2)jQuery本身提供,透過.get(index)方法,得到對應的DOM物件 

如:

var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中
登入後複製

DOM物件轉換成jQuery物件: 

對於已經是DOM對象,只要用$()把DOM物件包裝起來,就可以獲得一個jQuery物件了。 $(DOM物件) 

如:

var v=document.getElementById("v"); //DOM对象 
var $v=$(v); //jQuery对象
登入後複製

轉換後,就可以任意使用jQuery的方法了。 

透過上述方法,可以任意的相互轉換jQuery物件和DOM物件。需要再強調注意的是:DOM物件才能使用DOM中的方法,jQuery物件是不可以用DOM中的方法。 

更多程式相關知識,請造訪:程式設計課程! !

以上是jquery和document取得html元素的差別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

使用 onclick 執行 PHP 函數 使用 onclick 執行 PHP 函數 Feb 29, 2024 pm 04:31 PM

我們也將介紹另一種使用Jquery函式庫透過onclick()事件執行PHP函數的方法。此方法呼叫一個javascript函數,該函數將在網頁中輸出php函數的內容。我們也會示範另一種使用onclick()事件執行PHP函數的方法,使用純JavaScript呼叫PHP函數。本文將介紹一種執行PHP函數的方法,使用GET方法傳送URL中的數據,並使用isset()函數檢查GET數據。如果設定了資料並執行函數,則此方法呼叫PHP函數。使用jQuery透過onclick()事件執行PHP函數我們可以使用

html怎麼讀取excel數據 html怎麼讀取excel數據 Mar 27, 2024 pm 05:11 PM

html讀取excel資料的方法:1.使用JavaScript庫讀取Excel資料;2、使用伺服器端程式語言讀取Excel資料。

jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題:jQuery小技巧:快速修改頁面所有a標籤的文字在網頁開發中,我們經常需要對頁面中的元素進行修改和操作。使用jQuery時,有時候需要一次修改頁面中所有a標籤的文字內容,這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本,同時給出具體的程式碼範例。首先,我們需要引入jQuery庫文件,確保在頁面中引入了以下程式碼:&lt

使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題:使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫,被廣泛用於處理DOM操作。在網頁開發中,經常會遇到需要修改頁面上連結標籤(a標籤)的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標,並提供具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼:

dreamweaver換行符號是什麼 dreamweaver換行符號是什麼 Apr 08, 2024 pm 09:54 PM

Dreamweaver中使用<br>標籤建立換行,透過選單、快速鍵或直接鍵入插入。可結合CSS樣式建立特定高度空白行。在某些情況下,使用<p>標籤替代<br>標籤更合適,因為它可自動建立段落間空白行並套用樣式控制。

如何判斷jQuery元素是否具有特定屬性? 如何判斷jQuery元素是否具有特定屬性? Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性?在使用jQuery操作DOM元素時,常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下,我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性,並附上具體的程式碼範例。方法一:使用attr()方法和typeof運算子//判斷元素是否具有特定屬

GTA 6 文件詳細概述了所有洩漏 GTA 6 文件詳細概述了所有洩漏 Sep 08, 2024 am 06:37 AM

9 月 3 日,俠盜獵車手 VI 文件 1.5 版發布,詳細概述了迄今為止有關該遊戲的所有資訊。該文件的更新版本在 X(以前的 Twitter)上發布的預告片中宣布。

ridge在css中是什麼意思 ridge在css中是什麼意思 Apr 28, 2024 pm 04:06 PM

ridge是CSS中的邊框樣式,用於創建具有浮雕效果的3D邊框,具體表現為一條凸起的山脊狀線條。

See all articles