書名： jQuery即學即用
作者名：王志剛編著
本章字數： 221字
更新時間： 2019-01-09 16:34:25

第2部分 jQuery的基礎應用

jQuery庫中提供了很多的方法，本部分將介紹其中使用得比較頻繁的方法。特別selector的指定方法是使用jQuery庫時重要的方法，讀者必須掌握；另外將詳細介紹動畫效果和effect特效等jQuery的特色部分。

第5章獲取元素

實際上取得的是HTML/xHTML的元素。在jQuery中使用CSS匹配（CSS like）來進行元素指定，比其他的JavaScipt庫都簡單，這也正是jQuery在網頁設計人員大受歡迎的理由了。

5.1 利用標簽名改變格式

在CSS中需要為某一個標簽設置背景或者改變標簽中的文字的顏色時使用$來指定，在jQuery中也可以用同樣方法來獲取標簽元素。

如果使用普通JavaScript，則必須用如“document.getElementsByTagName(‘標簽名’)”這樣的格式編寫代碼。而jQuery方法與CSS相同，指定需要操作的標簽名即可操控所有的標簽。

5.1.1 語法

操作span標簽的語法如下：

            $(‘標簽名’)

5.1.2 應用實例

本例將此標簽中的所有文字變為紅色。

HTML的部分代碼

            <p><span>span標簽的顏色變為紅色</span></p>
            <p><span>這個也變為紅色</span></p>
            <p>這個不變色</p>

JavaScript部分代碼

            $(function(){
                $("span").css("color","red");
            });

實現結果如圖5-1所示。

圖5-1 實現結果

5.2 通過id獲取元素

在CSS中經常使用id來控制元素，在jQuery中獲取元素時，也使用同樣方法。與CSS一樣，在id的前面加上“#”字符。

5.2.1 語法

            $('#id')

可以控制指定id的HTML/xHTML元素，在HTML/xHTML中有id不可重復的規定，因此可以控制文檔內部惟一的元素。如果定義了多個同名的id元素，則只有最初出現的同名id有效。在JavaScript中使用[document.getElementById('id名')]來獲取元素，在jQuery中以如下代碼獲取[id="id_name"]的元素：

            $(‘#id_name’)

5.2.2 應用實例

本例將指定ID元素中的顏色變為紅色。

HTML代碼

            <div>這個標簽沒有指定ID，因此不變色</div>
            <div id="id_name">標簽id為id_name，變紅色</div>
            <p id="id_1">標簽id不是id_name，這個不變色</p>

JavaScript代碼

          $(function(){
              $("#id_name").css("color","red");
            });

實現結果如圖5-2所示。

圖5-2 實現結果

5.3 通過類名獲取元素

可以獲取擁有同一類名的多個HTML/xHTML元素，編寫方式同CSS，即在類名的前面加上[.](點)。

5.3.1 語法

        $('.類名')

通過類名獲取元素可以控制所有同一類名的對象。在JavaScript中，以document. getElementsByClassName('類名')方式獲取相同的元素。如下代碼獲取class='className'的元素：

        $('.className')

5.3.2 應用實例

本例將類名為“className”的元素的背景變為紅色。

部分HTML代碼

        <div class="className">這個標簽的類名為className，因此變為紅色</div>
        <div>沒有定義標簽的類名，不改變顏色</div>
        <p class="className">盡管為P標簽，但類名為className，因此也變為紅色</p>

JavaScript代碼

            $(function(){
                $(".className").css("backgroundColor","red");
            });

實現結果如圖5-3所示。

圖5-3 實現結果

5.4 一次性獲取多個元素

可以一次獲取完全不相關的以標簽名，或者以id和類名為標識的元素，這些標識之間用逗號“,”分隔。

5.4.1 語法

            $('元素名,元素名,元素名,…')

例如，對于諸如p標簽、id為“id_name”且類名為“className”的這些元素可以使用jQuery的方法一次性獲取，而使用普通的JavaScript無論如何都做不到：

            $('p,#id_name,.className')

其他可以使用“*”一次性獲取所有的元素：

            $('*')

5.4.2 應用實例

本例將多個元素的背景都變為紅色。

部分HTML代碼

            <div id="id_name">id為id_name，因此變為紅色</div>
            <div>沒有定義id及class，不改變顏色</div>
            <div class="className">這個標簽的類名為className，因此變為紅色</div>
            <p >P標簽也變為紅色</p>

JavaScript代碼

            $(function(){
              $("p, #id_name, .className").css("backgroundColor","red");
            });

實現結果如圖5-4所示。

圖5-4 實現結果

5.5 通過指定層次關系獲取元素

可以通過指定HTML/xHTML文檔的標簽層次關系來獲取元素，與CSS指定層次關系的方式相同；另外可以組合多種層次關系。

5.5.1 語法

            $('祖先,子孫')
            $('父 > 子')
            $('前+后')
            $('兄～弟')

可以指定form標簽中的input或label標簽來完成相關設置，還可以指定input標簽前的label標簽執行操作。

5.5.2 應用實例

部分HTML代碼

            <form>
            <label>子節點</label><input type="text" value="背景變成紅色">
            <fieldset>
            <label>孫節點</label><input type="text" value="背景變成紅色">
            </fieldset>
            </form>
            <label>form外</label><input type="text" value="背景不變色">
            <fieldset>
            <label>form外</label><input type="text" value="背景不變色">
            </fieldset>

JavaScript代碼

（1）$('祖先,子孫')的實例

            $(function(){
                $("form input").css("backgroundColor","red");
            });

實現結果如圖5-5所示。

圖5-5 實現結果

（2）$('父 > 子')的實例

            $(function(){
              $("form > label").css("color","red");
            });

實現結果如圖5-6所示。

圖5-6 實現結果

（3）$('前+后')的實例

            $(function(){
              $("label+input").css("color","blue");
            });

實現結果如圖5-7所示。

圖5-7 實現結果

（4）$('兄～弟')的實例

            $(function(){
              $("form～label").css("border","3px solid red");
            });

實現結果如圖5-8所示。

圖5-8 實現結果

5.6 根據元素的屬性值獲取元素

5.6.1 語法

通過在[]中指定標簽（tag）的屬性，可以獲取標簽元素，從而應用在需要更細微操作的情況。表5-1所示為指定屬性的語法及其說明，其中Attribute代表屬性；value代表值。

表5-1 指定屬性值的語法及其說明

5.6.2 應用實例

下面各個實例中除了提示文字不同外，其他結構均相同。

部分HTML代碼

            <div>div標簽中沒定義id屬性，不變色</div>
            <div id="div_test" class="class1">div標簽中定義了id屬性，也不變色</div>
            <p id="p_test1" class="class1">p標簽中定義了id屬性，變紅色</p>
            <p id="p_test2" class="class2">p標簽中定義了id屬性，變紅色</p>

JavaScript代碼

（1）獲取擁有指定屬性的元素

            $(function(){
              $("p[id]").css("color","red");
            });

實現結果如圖5-9所示。

圖5-9 實現結果

（2）獲取擁有指定屬性且設定值一致的元素

            $(function(){
              $("div[id=div_test]").css("color","red");
            });

實現結果如圖5-10所示。

圖5-10 實現結果

（3）獲取擁有指定屬性且設定值不一致的元素

            $(function(){
              $("p[id!=p_test2]").css("color","red");
            });

實現結果如圖5-11所示。

圖5-11 實現結果

（4）獲取擁有指定屬性且設定值的最初部分一致的元素

            $(function(){
                $("p[id^=p]").css("color","red");
            });

實現結果如圖5-12所示。

圖5-12 實現結果

（5）獲取擁有指定屬性且設定值的最后部分一致的元素

            $(function(){
                $("[id$=test]").css("color","red");
            });

實現結果如圖5-13所示。

圖5-13 實現結果

（6）獲取擁有指定屬性且設定值中包含指定字符串的元素

            $(function(){
                $("[id^=p][class=class1]").css("color","red");
            });

實現結果如圖5-14所示。

圖5-14 實現結果

5.7 通過過濾器獲取元素

通過過濾器（又稱“濾鏡”）的方法來獲取元素主要用于操作集合型的標簽，尤其適用于需要操作列表標簽或表標簽的情況下。通過“元素名:過濾器名”的形式來使用這種方法。

所有過濾器及其說明如表5-2所示。

表5-2 所有過濾器及其說明

例如，要設置表格中奇偶數行的不同背景色時，過濾器方法非常適用。

應用實例的部分HTML代碼

            <ul>
            <li>第0個li的文字變為紅色</li>
            <li><h3><span>第1個li</span>不變色</h3></li>
            <li>第2個li不變色</li>
            <li><span>第3個li不變色</span></li>
            <li>最后一個li不變色</li>
            </ul>

JavaScript代碼

（1）獲取第1個元素

            $(function(){
                $("li:first").css("color","red");
            });

實現結果如圖5-15所示。

圖5-15 實現結果

（2）獲取最后一個元素

            $(function(){
              $("li:last").css("color","red");
            });

實現結果如圖5-16所示。

圖5-16 實現結果

（3）獲取指定元素外的元素

            $(function(){
              $("li:not(:first)").css("color","red");
            });

實現結果如圖5-17所示。

圖5-17 實現結果

（4）獲取偶數序號的元素

            $(function(){
              $("li:even").css("backgroundColor","grey");
              $("li:even").css("color","white");
            });

實現結果如圖5-18所示。

圖5-18 實現結果

（5）獲取奇數序號的元素

            $(function(){
                $("li:odd").css("backgroundColor","grey");
                $("li:odd").css("color","white");
            });

實現結果如圖5-19所示。

圖5-19 實現結果

（6）獲取指定序號的元素

            $(function(){
                $("li:eq(2)").css("color","red");
            });

實現結果如圖5-20所示。

圖5-20 實現結果

（7）獲取指定序號后的元素

            $(function(){
              $("li:gt(2)").css("color","red");
            });

實現結果如圖5-21所示。

圖5-21 實現結果

（8）獲取指定序號前的元素

            $(function(){
              $("li:lt(2)").css("color","red");
            });

實現結果如圖5-22所示。

圖5-22 實現結果

（9）獲取標題元素

            $(function(){
              $("li :header").css("color","red");
            });

實現結果如圖5-23所示。

圖5-23 實現結果

（10）獲取動畫元素

            $(function(){
                (function animate(){
                    $("li:eq(2)").toggle('slow',animate);
                })();
                $("li:animated").css("color","red");
            });

實現結果如圖5-24所示。

圖5-24 實現結果

（11）獲取包含指定字符串的元素

            $(function(){
              $("li:contains('紅色')").css("color","red");
            });

實現結果如圖5-25所示。

圖5-25 實現結果

（12）獲取空元素

            $(function(){
              $(“li:empty”).text(“空元素”).css(“color”,”red”);
            });

實現結果如圖5-26所示。

圖5-26 實現結果

（13）獲取擁有子孫元素的元素

            $(function(){
              $("li:has(span)").css("color","red");
            });

實現結果如圖5-27所示。

圖5-27 實現結果

（14）獲取非空元素

        $(function(){
                $("li:parent").css("color","red");
        });

實現結果如圖5-28所示。

圖5-28 實現結果

5.8 獲取表單元素

在檢查表單（Form）的輸出數據時需要獲取表單元素。

獲取表單元素的方法如表5-3所示。

表5-3 獲取表單元素的方法

提示

使用“:hidden”時可以獲取HTML/xHTML文檔中的所有隱藏元素，要獲取表單中hidden屬性的元素，應使用“input:hidden”。

部分HTML代碼

            <form>
            <ul>
            <li><label>文字輸入框</label><input type = "text"/></li>
            <li><label>密碼輸入框</label><input type = "password"/></li>
            <li><input type = "radio" name="rad1"/><label>單選按鈕1</label></li>
            <li><input type = "radio" name="rad1"/><label>單選按鈕2</label></li>
            <li><input type = "checkbox" /><label>多選按鈕1</label></li>
            <li><input type = "checkbox" /><label>多選按鈕2</label></li>
            <li><input type = “submit” value= “提交”/></li>
            <li><input type = "image" src= ""/></li>
            <li><input type = "reset"/></li>
            <li><input type = "button" value="測試按鈕"/></li>
            <li><input type = "file" /></li>
            <li><input type = "hidden" value="test"/></li>
            <li><select><option>選項</option></select/></li>
            </ul>
            </form>

JavaScript代碼

            $(function(){
              $("#msg").html(
              "input元素有"+$(":input").length+"個(取得所有表單元素)<br/>"+
              "text屬性的元素有"+$(":text").length+"個(取得text屬性的元
    素)<br/>"+
              "password屬性元素有"+$(":password").length+"個(取得password屬性的
    元素)<br/>"+
              "radio元素有"+$(":radio").length+"個(取得單選按鈕元素)<br/>"+
                "checkbox元素有"+$(":checkbox").length+"個(取得多選按鈕元
    素)<br/>"+
                    "submit或image屬性元素有"+$(":submit").length+"個(取得submit屬性
    或image屬性的元素)<br/>"+
                "image屬性元素有"+$(":image").length+"個(取得image屬性的元
    素)<br/>"+
                "reset屬性元素有"+$(":reset").length+"個(取得reset屬性的元
    素)<br/>"+
                    "button屬性元素有"+$(":button").length+"個(取得button屬性的元素或
    button標簽)<br/>"+
                "file屬性元素有”+$(":file").length+"個(取得file屬性的元素)<br/>"+
                    "hidden屬性元素有"+$("input:hidden").length+"個(取得hidden屬性的
    表單元素)"
                    );
            });

實現結果如圖5-29所示。

圖5-29 實現結果

5.9 通過過濾器獲取表單元素

通過過濾器可以獲取特定的表單元素，如非輸入項目或者單選按鈕的已選項目等元素。可用的表單過濾器及其說明如表5-4所示。

表5-4 可用的表單過濾器及其說明

部分HTML代碼

            <form>
            <ul>
              <li><label>訂單號碼</label><input  type  =  "text"  name=""
    disabled="disabled"/></li>
            <li><label>訂單所有者</label><input type = "text"/></li>
            <li><input type = "checkbox" name="category" value="紅"/><label>紅</label>
            <input type = “checkbox” name=”category” value=”黃”/><label>黃</label>
            <input type = "checkbox" name="category" value="藍"/><label>藍</label>
            <input type = “checkbox” name=”category” value=”紫”/><label>紫</label>
          <input type = “checkbox” name=”category” value=”白”/><label>
    白</label></li>
            <li><select multiple= "multiple " >
            <option>選項1</option>
            <option>選項2</option>
            <option>選項3</option>
            <option>選項4</option>
            </select/></li>
            </ul>
            </form>
            <div id="msg">
            <p id="category"></p>
            <p id="option"></p>
            </div>

JavaScript代碼

            $(function(){
                $("input:text:enabled").val("能輸入");
                $("input:text:disabled").val("不能輸入");
                (function checkboxclick(){
                    $(":checkbox").unbind("click",checkboxclick);
                    var val='';
                    $(":checkbox:checked").each(function(){
                          val += $(this).val()+',';
                    });
                    $("#category").html("選擇的數據："+val);
                    $(":checkbox").click(checkboxclick);
                    })();
                $("select").change(function(){
                    var txt='';
                    $("select option:selected").each(function(){
                          txt += $(this).text() + ',';
                    });
                    $("#option").html("選擇的選項是："+txt);
                }).trigger("change");
            });

實現結果如圖5-30所示。

圖5-30 實現結果

5.10 從集合元素中通過指定序號獲取元素

可以通過指定序號獲取HTML/xHTML文檔中的某一類型的標簽元素。

5.10.1 語法

            eq(index)

例如，如下的代碼操作序號為2號（序號從0開始）的p元素：

            $('p').eq(2)

5.10.2 應用實例

部分HTML代碼

            <style type="text/css">
            p{
              width:40px;
              border: 1px solid #000;
              margin: 0;
              padding: 0;
            }
            </style>
            <p>0號</p>
            <p>1號</p>
            <p>2號</p>
            <p>3號</p>
            <p>4號</p>
            <p>5號</p>
            <p>6號</p>
            <p>7號</p>

Javascript代碼

            $(function(){
                $("p").eq(2).css("backgroundColor","red");
            });

實現結果如圖5-31所示。

圖5-31 實現結果

5.11 獲取指定條件一致的元素

可以從標簽集合中獲取與指定條件一致的特定標簽元素。

5.11.1 語法

            filter(expr)

下例從p標簽集合元素中獲取類屬性名為center的標簽元素：

            $('p').filter('.center');

5.11.2 應用實例

部分HTML代碼

            <p>0號</p>
            <p class="center">1號</p>
            <p class="center">2號</p>
            <p class="center">3號</p>
            <p class="center">4號</p>
            <p class="center">5號</p>
            <p class="center">6號</p>
            <p>7號</p>

JavaScript代碼

            //所有p標簽的文字顏色變為藍色，同時將類名為“center”的標簽背景色變成黃色
            $(function(){
              $("p").css("color","blue").filter(".center").css("backgroundC
    olor","yellow");
            });

實現結果如圖5-32所示。

圖5-32 實現結果

5.12 獲取指定范圍的元素

5.12.1 語法

            slice(start,[end])

start與end都是數字，end可選，實際為指定數字基礎上減1的元素。

下面的代碼指定4號～6號的元素：

            $('p').slice(4,7);

5.12.2 應用實例

部分HTML代碼

            <p>0號</p>
            <p>1號</p>
            <p>2號</p>
            <p>3號</p>
            <p>4號</p>
            <p>5號</p>
            <p>6號</p>
            <p>7號</p>

JavaScript代碼

            //設置4～6標簽的背景色成黃色
            $(function(){
                $("p").slice(4,7).css("backgroundColor","yellow");
            });

實現結果如圖5-33所示。

圖5-33 實現結果

5.13 獲取與條件表達式一致的元素

可以使用條件表達式來判斷，條件一致時獲取當前元素。

5.13.1 語法

          is(expr)

一般首先循環標簽集合，當條件表達式為真時獲取當前標簽元素，執行相關設置操作。

5.13.2 應用實例

部分HTML代碼

            <p>0號</p>
            <p>1號</p>
            <p class="blue">2號</p>
            <p>3號</p>
            <p>4號</p>
            <p>5號</p>
            <p class="yellow">6號</p>
            <p>7號</p>

JavaScript代碼

            //將類名為“blue”和“yellow”的對象設置為不同的背景色
            $(function(){
              $("p").each(function(){
                    switch(true){
                          case $(this).is(".blue"):
                                $(this).css("backgroundColor","blue");
                                break;
                          case $(this).is(".yellow"):
                                $(this).css("backgroundColor","yellow");
                                break;
                          default:
                                break;
                    }
              })
            });

實現結果如圖5-34所示。

圖5-34 實現結果

5.14 獲取元素的下一個元素

可以在div標簽中指定q標簽，然后獲取下一個q標簽。

5.14.1 語法

            next([expr])

5.14.2 應用實例

部分HTML代碼

            <p class="yes">0號</p>
            <p>1號</p>
            <p class="yes">2號</p>
            <p>3號</p>
            <p>4號</p>
            <p>5號</p>
            <p class="yes">6號</p>
            <p>7號</p>

JavaScript代碼

            $(function(){
            $("p").next('.yes').css('backgroundColor','yellow');
            });

實現結果如圖5-35所示。

圖5-35 實現結果

5.15 獲取元素的前一個元素

5.15.1 語法

            prev([expr])

5.15.2 應用實例

部分HTML代碼

            <p class="yes">0號</p>
            <p>1號</p>
            <p class="yes">2號</p>
            <p>3號</p>
            <p>4號</p>
            <p>5號</p>
            <p>6號</p>
            <p class="yes">7號</p>

JavaScript代碼

            $(function(){
              $("p").prev('.yes').css('backgroundColor','yellow');
            });

實現結果如圖5-36所示。

圖5-36 實現結果

5.16 獲取元素的父元素

可以指定元素的父元素，并將父元素的條件細化以獲取特定的父元素。

5.16.1 語法

            parent([expr])

expr是可選且可進一步細化的條件。

5.16.2 應用實例

部分HTML代碼

            <div id="content">
            <p>0號</p>
            <p>1號</p>
            <p>2號</p>
            <p>3號</p>
            <p>4號</p>
            <p>5號</p>
            <p>6號</p>
            <p>7號</p>
            <div>

JavaScript代碼

            $(function(){
              $("p").parent().css('backgroundColor','yellow');
            });

實現結果如圖5-37所示。

圖5-37 實現結果

5.17 獲取元素的子元素

可以獲取指定元素的子元素，還可以將要獲取子元素條件的細化，以獲取特定的子元素。

5.17.1 語法

            children([expr])

5.17.2 應用實例

部分HTML代碼

            <div id="content">
            <p>0號</p>
            <p>1號</p>
            <p class="yes">2號</p>
            <p>3號</p>
            <p>4號</p>
            <p>5號</p>
            <p>6號</p>
            <p>7號</p>
            <div>

JavaScript代碼

            $(function(){
                $("#content").children(".yes").css('backgroundColor','yellow');
            });

實現結果如圖5-38所示。

圖5-38 實現結果

官术网_书友最值得收藏!

jQuery即學即用

第2部分 jQuery的基礎應用

第5章 獲取元素

5.1 利用標簽名改變格式

5.1.1 語法

5.1.2 應用實例

5.2 通過id獲取元素

5.2.1 語法

5.2.2 應用實例

5.3 通過類名獲取元素

5.3.1 語法

5.3.2 應用實例

5.4 一次性獲取多個元素

5.4.1 語法

5.4.2 應用實例

5.5 通過指定層次關系獲取元素

5.5.1 語法

5.5.2 應用實例

5.6 根據元素的屬性值獲取元素

5.6.1 語法

5.6.2 應用實例

5.7 通過過濾器獲取元素

5.8 獲取表單元素

5.9 通過過濾器獲取表單元素

5.10 從集合元素中通過指定序號獲取元素

5.10.1 語法

5.10.2 應用實例

5.11 獲取指定條件一致的元素

5.11.1 語法

5.11.2 應用實例

5.12 獲取指定范圍的元素

5.12.1 語法

5.12.2 應用實例

5.13 獲取與條件表達式一致的元素

5.13.1 語法

5.13.2 應用實例

5.14 獲取元素的下一個元素

5.14.1 語法

5.14.2 應用實例

5.15 獲取元素的前一個元素

5.15.1 語法

5.15.2 應用實例

5.16 獲取元素的父元素

5.16.1 語法

5.16.2 應用實例

5.17 獲取元素的子元素

5.17.1 語法

5.17.2 應用實例

第5章獲取元素