在jQuery中,最常用的莫過於使用美元符號$,它提供了各種各樣的豐富功能。包括選擇頁面中一個或者一類元素、作為功能函數的前綴、windows.onload的完善,創建DOM節點等。本文介紹jQuery的用法。作為基礎
1.選擇器
在css中,選擇器的作用是選擇頁面的某一類(類別選擇器)元素或者某個(id選擇器)。而jQuery中的“$”作為選擇器,同樣是選擇某類或者某個元素,只不過jQuery提供了更全面的選擇方式。而且為用戶處理了浏覽器兼容問題。
例如在在css<h2>下的<a>元素,css:
h2 a{
/* 添加css屬性 */}
在jQuery中,通過以下代碼選擇h2下的a元素,作為一個對象數組,供javascript使用。
$("H2 a")
例子:
代碼如下:
<body>
<script type="text/javascript">
window.onload = function() {
var oElements = $("h2 a"); //選擇匹配元素
for (var i = 0; i < oElements.length; i++)
oElements[i].innerHTML = i.toString();
}
</script>
<h2><a href="#">正文</a>內容</h2>
<h2>正文<a href="#">內容</a></h2>
<h2>正文<a href="#">內容</a></h2>
<h2>正文<a href="#">內容</a></h2>
<h2>正文<a href="#">內容</a></h2>
</body>
如上,文檔中有5個<H2>標記,分別包含了<a>元素,使用$選擇器,如下,可以看到jQuery輕松的實現了元素的選擇,如果使用DOM,類似這樣的節點將要使用大量的javascript代碼。
jQuery中選擇器的通用語法如下
$(selector)
或者
jQuery(selector)
其中,selector符合css標准,甚至css3的標准
例如:
$("#showDiv")
id選擇器,這相當於javascript中,document.getElementById("shouDiv"),可以看到jQuery的變色方法簡潔很多。
$(".newClass")
類別選擇器,選擇css類別為"newClass"元素的節點,在javascript要實現相同的選擇,需要用for循環遍歷整個DOM
$("p:odd")
選擇所有奇數行的p元素,幾乎所有的標記都可以使用 ":odd"和":even"選擇奇偶的選擇。
$("td:nth-child(1)")
選擇所有表格行的第一個單元格,就是第一列。這在修改表格的某一列是非常有用的,不再需要一行行的遍歷表格。
$("li>a")
子選擇器,返回<li>下標記的<a>元素,不包括孫元素標記
$("a[herf$=pdf]")
屬性選擇器,選擇所有超鏈接,並且這些鏈接是以pdf結尾的。有了屬性選擇器,可以很好的選擇頁面中各種特性的元素
總結:
$就是jQuery的別稱
而jQuery就是jQuery庫提供的一個函數.(好像也不僅僅只是函數, 因為還有 $.ajax(options) 這樣的使用,等同 jQuery.ajax(options))
這個函數的作用是根據 () 裡的參數進行查找和選擇html文檔中的元素, 函數作用之一就是GetElementByID的代替,但()內不僅可以是ID,還可以是各類選擇器