jQuery对象和DOM对象互转的问题、jQuery文件引入问题、DOM版本的网页开关灯
生活随笔
收集整理的這篇文章主要介紹了
jQuery对象和DOM对象互转的问题、jQuery文件引入问题、DOM版本的网页开关灯
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
jQuery對象和DOM對象互轉(zhuǎn)的問題
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <input type="button" value="按鈕" id="btn"> <script src="jquery-1.12.1.js"></script> <script>// 這個按鈕----如果通過DOM獲取----DOM對象// 這個按鈕----如果通過$或者是jQuery的方式獲取----jQuery對象// DOM獲取的----DOM對象// var btnObj1 = document.getElementById("btn");// DOM操作需要解決一些兼容的問題,jQuery中的兼容問題都差不多解決了// DOM對象----轉(zhuǎn)成jQuery對象,那么就可以使用jQuery中的方法或者屬性了// DOM對象調(diào)用jQuery的方法----不能實現(xiàn),必須是jQuery對象調(diào)用jQuery的方法// 如何把DOM對象轉(zhuǎn)----jQuery對象---->$(DOM對象)---->jQuery對象// $(btnObj1).click(function(){// console.log("哈哈,我又變帥了,小楊果然很帥");// });// btnObj1.click(function(){// console.log("哈哈,小蘇太帥了");// });// jQuery獲取的----jQuery對象// var btnObj2 = $("#btn");// jQuery對象調(diào)用DOM對象的屬性和方法,不能實現(xiàn)// jQuery對象轉(zhuǎn)----DOM對象----jQuery對象[0]----DOM對象// btnObj2[0].onclick = function(){// console.log("哈哈,我又變帥了");// }// 錯誤的// btnObj2.onclick = function(){// console.log("助教比小楊帥");// }// console.log(btnObj1==btnObj2);</script> <script>// DOM對象var btnObj = document.getElementById("btn");// jQuery對象// $(btnObj)// $(btnObj)[0] ---->$($(btnObj)[0])----jQuery對象----沒人這么寫// 為什么要把DOM對象轉(zhuǎn)jQuery對象,為什么又把jQuery對象轉(zhuǎn)DOM對象// DOM操作很麻煩(兼容,一個功能寫好多代碼)---->轉(zhuǎn)jQuery對象,操作簡單,不需要// 寫兼容代碼// jQuery操作中,有一些兼容沒封裝在jQuery中,轉(zhuǎn)DOM對象,通過原生的js代碼實現(xiàn)// 功能,如果后面都解決了,又想簡單的寫代碼操作內(nèi)容,再轉(zhuǎn)回jQuery對象</script></body> </html>jQuery文件引入問題
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <input type="button" value="按鈕" id="btn"> <script src="jquery-1.12.1.js">// 點擊按鈕,顯示一句話// $("#btn").click(function(){// console.log("班主任好漂亮啊");// }); </script> <script>$("#btn").click(function(){console.log("班主任好漂亮啊");}); </script></body> </html>DOM版本的網(wǎng)頁開關(guān)燈
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.cls{background-color: black;}</style> </head> <body> <input type="button" value="關(guān)燈" id="btn"> <script>// DOM版本----10行代碼document.getElementById("btn").onclick = function(){// 判斷var body = document.body;if(body.className=="cls"){body.className = "";this.value = "關(guān)燈";}else{body.className = "cls";this.value = "開燈";}}; </script></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的jQuery对象和DOM对象互转的问题、jQuery文件引入问题、DOM版本的网页开关灯的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery课程介绍、Query的介绍、
- 下一篇： jQuery版本的网页开关灯、jQuer