jQuery物件和dom物件的區別和相互轉換
阿新 • • 發佈:2019-02-10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>obj.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../../jquery-2.2.4.js"></script> <script type="text/javascript"> /* jQuery物件和dom物件的區別 dom物件是document.getElement來獲取dom物件,dom物件只能訪問dom中預定義的方法 value innerHTML innerText style.樣式名=值 jQuery物件 就是通過$()物件處理返回的物件,該物件是jQuery的陣列,只能呼叫 jQueryr提供的方法,比如 css text html val() value */ $(function(){ //dom物件 不能呼叫jQuery方法 var myDiv=document.getElementById("myDiv"); myDiv.style.color="red"; var myDiv2=document.getElementById("myDiv2"); myDiv.innerText=myDiv2.innerText; //jQuery物件不能呼叫dom物件的方法 $("#myDiv").css("color","green"); $("#myDiv").text($("input")[1].value); /* jQuery物件和dom物件的互相轉換 */ //jQuery物件轉換dom物件 var oDiv=$("input")[0]; alert(oDiv); //dom物件轉換成jQuery物件 var oDiv2=document.getElementById("myDiv2"); var jQueryDiv=$(oDiv2); jQueryDiv.css("color","skyblue"); }) </script> </head> <body> <div id="myDiv">hello jquery</div> <div id="myDiv2">hello world</div> <span>hello</span><br/> <input id="myInput" type="text" value="888888" /> <input type="text" value="99999" /> <p my="a"></p> <p my="b"></p> <div> <a href="www.google.com"></a> </div> </body> </html>