<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <!-- 使用JQuery,首先要引入JQuery框架包 --> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <!-- //DOM操作按钮,修改背景颜色 --> <script > /* window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick()=function(){ this.style.backgroundColor="red"; } } */ /* //DOM对象转JQuery对象,只需要把DOM对象放在$(dom对象)-->JQuery对象 */ /* var btn=document.getElementById("btn"); $(btn).click(function(){ $(this).css("backgroundColor","red"); }) */ /* //把JQuery对象转DOM对象的两种方式: 1,$(btn).get(0);----DOM对象 2,$(btn)[0];----DOM对象 */ /* var btn=document.getElementById("btn"); var obj=$(btn).get(0); obj.onclick=function(){ this.style.backgroundColor="Green"; } */ /* var btn=document.getElementById("btn"); var obj=$(btn)[0]; obj.onclick=function(){ this.style.backgroundColor="yellow"; }; */ $(function(){ //$("#btn");---->jQuery对象 /* $("#btn").click(function(){ $(this).css("backgroundColor","yellow"); }) */ /* $("#btn").onclick=function(){ this.style.backgroundColor="red"; } */ $("#btn").get(0).onclick=function(){ this.style.backgroundColor="red"; } }) //DOM对象和JQuery对象可以互转 //DOM对象转JQuery对象 //$(DOM的对象)-->JQuery对象 //jQuery对象--->DOM对象 //1,$("#btn")[0]---DOM对象 //2,$("#btn").get(0)---DOM对象 </script> </head> <body> <h1>JQuery对象和DOM对象互转问题</h1> <hr > <input type="button" name="" id="btn" value="点击我,有惊喜·····" /> </body> </html>
Nearth===>WEB前端--第5课/JQuery/JQuery对象和DOM对象互转问题
最新推荐文章于 2019-11-16 17:30:09 发布