js jQuery 对象相互转换

js 的 getElementBy 系列获取不够方便, jQuery的过滤器很好用但是操作多个也不方便? 概念理清,混着用吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>对象转换</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style type="text/css">
  #close_img:hover{
    cursor: hand;
  }
</style>

</head>

<body>

<div id="test"  style="width:300px; height:200px; background-color: orange"></div>
<div class="article" style="width:300px; height:200px; background-color: blue"></div>
<div class="article" style="width:400px; height:200px; background-color: skyblue"></div>
<div class="article" style="width:200px; height:200px; background-color: green"></div>

<script type="text/javascript">

// 直接用$() 将js的变量包住即可变成jQuery对象使用
var obj = document.getElementById('test'); 
alert("test 的高度为" + $(obj).height() + "px"); 


// jquery对象转js对象,直接在其后加上[0]即可
var display = $("#test")[0].style.width;
alert("test 的高度为" + display + "px");


// js与jquery对象混用
var list = $(".article");
var content = "";
for (var i = 0; i < list.length; i++) {
	content +="第 "+i+" 篇文章div 高" +
			 $(list[i]).css("height") + " 宽" +
			  $(list[i]).css("width") + "\n";
};
alert(content);

</script>

</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>