首頁 > web前端 > 前端問答 > 怎麼將dom對象轉換成jquery對象

怎麼將dom對象轉換成jquery對象

青灯夜游
發布: 2022-03-11 15:32:41
原創
4691 人瀏覽過

dom物件轉換成jquery物件的方法:只要使用「$()」把DOM物件包裝起來即可,語法為「$(DOM物件)」;轉換後,就可以任意使用jQuery中的方法了。

怎麼將dom對象轉換成jquery對象

本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。

DOM物件

DOM(Document Object Model,文檔物件模型),每一份DOM都可以表示成一棵樹。先看一個簡單範例:程式碼如下

// ...省略其他代码
<h3>例子</h3>
<p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>
// ...省略其他代码
登入後複製

將上面HTML結構描述為一棵DOM樹:

怎麼將dom對象轉換成jquery對象

在這棵DOM樹中的節點都是DOM元素節點。可以透過JS中的getElementByTagName或是getElementById來取得元素節點。像這樣得到的DOM元素就是DOM物件。

jQuery物件

jQuery物件就是透過jQuery包裝DOM物件後產生的物件。

jQuery物件是jQuery獨有的。如果一個物件是jQuery對象,那麼就可以使用jQuery裡的方法。在jQuery物件中無法使用DOM物件的任何方法,同樣的DOM物件也不能使用jQuery裡的方法。

怎麼將dom物件轉換成jquery物件

對於一個DOM對象,只要用$()把DOM物件包裝起來,就可以獲得一個jQuery物件了。方式為$(DOM物件), 轉換後,就可以任意使用jQuery中的方法了。

注意: 平常用的jQuery物件都是透過$()函數製造出來的,$()函數就是一個jQuery物件的製造工廠。

jquery程式碼如下:

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-1.10.2.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM对象
  var $cr = $(cr);   //jquery对象
  $cr.eq(0).("fuck"); //检测是否转换成功,可以用jquery方法 输出结果为第二个my改成了fuck
  $cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>
登入後複製

轉換後,可以任意使用jquery方法。

透過上述方法,可以任意的相互轉換jquery物件和DOM物件網頁特效。

最後再次強調,DOM物件才能使用DOM方法,jquery物件不能使用DOM中的方法,但jquery物件提供了一套更完善的工具來操作DOM。

【推薦學習:jQuery影片教學web前端影片

以上是怎麼將dom對象轉換成jquery對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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