轉,jQuery入門[2]

轉,jQuery入門[2]－選取器

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery入門[2]－選取器

jQuery入門[1]－建構函式
jQuery入門[2]－選取器
jQuery入門[3]－事件
jQuery入門[4]－鏈式代碼
jQuery入門[5]－AJAX
jQuery入門[6]－動畫

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> </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的鏈式特點，後面文章還會有補充。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More