`

尚硅谷:jQuery对象和DOM对象的相互转换

阅读更多

1、jQuery对象转换成DOM对象

 

2、DOM对象转换成jQuery对象

 

3、代码

<!doctype html>
<html>
 <head>
	<!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!--当前页面的三要素-->
	<title>jQuery对象和DOM对象的相互转换</title>
	<meta name="Keywords" content="关键词,关键词">
	<meta name="description" content="">
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function() {
			$("button").click(function() {
				//1.将jQuery对象转换成DOM对象:使用[index]
				var jBtns = $("button");
				var btn1 = jBtns[0];
				alert(btn1.firstChild.nodeValue); //Clickme
				
				//2.将DOM对象转换成jQuery对象:使用$()包装
				var btn1 = document.getElementById("btn");
				var jBtn = $(btn1);
				alert(jBtn.text()); //Clickme
			});
		});
	</script>
 </head>
 <body>
 	<button id="btn">Clickme</button>
 	<button>Clickme2</button>
 </body>
</html>

 

4、界面显示

 

 

 

  • 大小: 170.6 KB
  • 大小: 158.2 KB
  • 大小: 32.1 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics