jQuery之所以令人愛不釋手,在於其強
大的選擇器表達式令DOM操作優雅而藝術。
jQuery的選擇符支持id,tagName,CSS1-3
expressions,XPath
DEMO:
re><!DOCTYPE html PUBLIC “-//W3C//DTD XHtml 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd”>
<Html
XMLns=”http://www.w3.org/1999/xHtml”>
<head>
<title>Selector</title>
<script src=”../scripts/jquery-
1.2.3.intellisense.JS”
type=”text/Javascript”></script>
</head>
<body>
<input
value=”1″ /> +
<input value=”2″ />
<input type=”button”
value=”=” />
<label> </label>
<script
type=”text/Javascript”>
$(“input[type='button']“).click(function(){
var i = 0;
$(“input[type='text']“).each(function(){
i += parseInt($(this).val());
});
$(‘label’).text
(i);
});
$(‘input:lt(2)’)
.add(‘label’)
.CSS(‘border’,'none’)
.CSS(‘borderBottom’,'solid 1px navy’)
.CSS({‘width’:’30px’});
</script>
</body>
</Html>
代碼
分解:
$("input[type='button']")用於找到type屬性為button的input元素(此為CSS表達式,
IE7才開始支持,所以在 IE6中通常用jQuery的這種表達式代替CSS代碼設置樣式)。click()函數為
button添加click事件處理函數。
在button_click時,$("input[type='text']")找出所有輸入框
,each()函數遍歷找出來的數組中的對象的值,相加後設到label中。
$('input:lt(2)')
.add('label')
兩行代碼意為:所有input中的前面兩個(lt表示序號小於)再加上label對象
合並成一個jQuery對象。
.CSS('border','none')
.CSS('borderBottom','solid 1px
navy')
.CSS({'width':'30px'});
以上三行代碼都是針對之前的jQuery對象設置CSS樣式,
如果一次需要設置多個CSS值,可用另一種形式,如:
.CSS
({'border':'none','borderBottom':'solid 1px navy','width':'30px'});
CSS()函
數如果只傳一個字符串參數,則為取樣式值,比如CSS('color')為取得當前jQuery對象的樣式屬性
color的值。jQuery 對象有多種這樣的函數,比如,val('')為設value,val()為取value,text
('text')為設innerText,text() 為取得innerText,此外還有html(),用於操作innerHtml,而click
(fn)/click(),change(fn) /change()……系統函數則為事件的設置處理函數與觸發事件。
由於多數
jQuery對象的方法仍返回當前jQuery,所以jQuery代碼通常寫成一串串的,如上面的
.CSS
('border','none')
.CSS('borderBottom','solid 1px navy')
.CSS
({'width':'30px'});
,而不需要不斷重復定位對象,這是jQuery的鏈式特點,後面文章還會有
補充。