Jquery學習筆記(1)

先舉一個例子,認識一下Jquery:

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//將dom對象轉換成jquery對象 $(document)
//ready的作用就是當頁面中的dom加載完畢後執行參數中的函數
$(document).ready(function()
{
	//1、$("a")是獲得a標籤的對象
	$("a").click(function(){
		alert("有反應");				  
	});		
});
</script>
<body>
1、使用$("a")獲得a標籤的Jquery對象,再使用其click方法,獲得點擊事件,在該事件中寫了一個方法
<hr />
<a href="#">test1</a> 
<a href="#">test2</a> 
<a href="#">test3</a> 
<a href="#">test4</a> 
</body>

由上所述,Jquery無非就是把DOM對象轉換成Jquery對象來使用,轉換成Jquery對象以後,就可以使用Jquery對象裏面自帶的一些方法,給我們帶來方便

 

那麼,如上面所說,Jquery無非就是把DOM對象轉換成Jquery對象來使用,那麼Jquery對象和DOM對象之間如何互相轉換呢?讓我們看如下代碼:

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
	//2.1、 DOM對象和Jquery對象的互相轉換。因爲下面的P標籤中有一個唯一的id="clickMe", 所以我們也可以直接用$("#clickMe")來獲得該對象
         //點擊下面的文字將彈出該對象裏面的內容  
	var pElement = document.getElementsByTagName("p")[0];  //獲得dom對象
	pElement.οnclick=function(){
		alert("這是通過DOM對象彈出來的:" + pElement.innerHTML);	//DOM 是innerHTML屬性	
         }
	
         var pElementJquery = $(pElement);	//將DOM對象轉換成jquery對象
	pElementJquery.click(function(){
	         alert("這是通過jquery對象彈出來的:" + pElementJquery.html());  	//Jquery是html()方法 			  
	});
});	
</script>
<body>
<p id="clickMe" style="color:#F00; cursor:hand">點擊我,彈出我! </p>
</body>

 

DOM---->Jquery對象: $("DOM對象")    DOM對象的獲得方法再次就不廢話了

Jquery--->DOM對象: Jquery : var cm = $("#clickMe") ---->DOM: var t = cm[0]   或者是使用jquery裏面自帶的方法 var t = cm.get(0)
由此可見 ,jquery對象其實獲得是一個DOM對象的一個數組

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章