jQuery 物件與 DOM ...LOGIN

jQuery 物件與 DOM 物件之間的轉換

jQuery轉換成DOM,開發中更多的情況是把一個dom物件加工成jQuery物件。 $(參數)是一個多功能的方法,透過傳遞不同的參數而產生不同的作用。

透過$(dom)方法將普通的dom物件加工成jQuery物件之後,我們就可以呼叫jQuery的方法了

看如下程式碼:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery 对象   与DOM 对象的转换</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
		<div>元素一</div>
		<div>元素二</div>
		<div>元素三</div>

		<script type="text/javascript">
		 var div = document.getElementsByTagName('div'); //这是一个DOM 对象

		 var $div = $(div); //jQuery 对象  将dom节点div转化为$div的jquery对象
		 var $first = $div.first(); //找到第一个div元素
		 $first.css('color', 'red'); //给第一个元素设置颜色
	</script>
</body>
</html>

如何將jQuery 物件轉換成DOM物件

    jQuery函式庫本質上還是JavaScript程式碼,它只是對JavaScript語言進行包裝處理,為的是提供更好更方便快捷的DOM處理與開發中經常使用的功能。我們使用jQuery的同時也能混合JavaScript原生程式碼一起使用。在許多場景中,我們需要jQuery與DOM能夠相互的轉換,它們都是可以操作的DOM元素,jQuery是一個類別數組對象,而DOM對象就是一個單獨的DOM元素。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
		<div>元素一</div>
		<div>元素二</div>
		<div>元素三</div>

		<script type="text/javascript">
		 	var $div = $('div');  //jquery对象
		 	var div = $div[1];	//转换成dom对象
		 	div.style.color = "red";//对dom对象进行操作
		</script>
</body>
</html>


#下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery 对象 与DOM 对象的转换</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var div = document.getElementsByTagName('div'); //这是一个DOM 对象 var $div = $(div); //jQuery 对象 将dom节点div转化为$div的jquery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color', 'red'); //给第一个元素设置颜色 </script> </body> </html>
章節課件