1、代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery与javascript的相互转换</title> <!--引入jquery依赖包--> <script type="text/javascript" src="../jquery-1.11.3.js"></script> <script type="text/javascript"> /** * 1.DOM对象转换成jquery对象 * 方法:对于一个DOM对象, 只需要用$()把DOM对象包装起来, 就可以获得一个jquery对象。 * 例如: * var helloDom = document.getElementById("hello"); * $(helloDom).css("color","#f00") * * 2.jquery对象转换成DOM对象 * 方法一:jquery对象是一个数组对象, 可以通过[index]的方法得到对应的DOM对象。 * 例如: * ($("li.abc")[0]).innerHTML = "ttttttttttttttt"; * 方法二:使用jquery中的get(index)方法得到相应的DOM对象。 * 例如: * ($("li.abc").get(0)).innerHTML = "ttttttttttttttt"; */ $(function() { //目前是javascript对象,对于该对象而言,无法使用jquery的方法 var helloDom = document.getElementById("hello"); //使用$()将helloDom节点封装成jquery节点 var jHello = $(helloDom); jHello.css("color","#f00"); //每一个jquery节点都是一个数组,只要取出数组中的值,这个值就是js节点,就能使用js方法 //当转换为js节点之后,就无法使用jquery的方法,要使用jquery的方法,再通过$()进行封装 //($("li.abc")[0]).innerHTML = "ttttttttttttttt"; ($("li.abc").get(0)).innerHTML = "ttttttttttttttt"; }); </script> </head> <body> <div id="hello"> <ul> <li class="abc">aaaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbbb</li> <li>ccccccccccccccc</li> <li>ddddddddddddddd</li> </ul> </div> </body> </html>