DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery入門[2]-選擇器
jQuery入門[2]-選擇器
編輯:關於JavaScript     
jQuery之所以令人愛不釋手,在於其強大的選擇器表達式令DOM操作優雅而藝術。
jQuery的選擇符支持id,tagName,css1-3 expressions,XPath,參見:http://docs.jquery.com/Selectors
DEMO:
<!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>&nbsp;</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的鏈式特點,後面文章還會有補充。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved