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>
Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s