先舉一個例子,認識一下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對象的一個數組