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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
