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

首頁 >

jQuery即學(xué)即用

第2部分 jQuery的基礎(chǔ)應(yīng)用

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

第5章 獲取元素

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

5.1 利用標簽名改變格式

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

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

5.1.1 語法

操作span標簽的語法如下：

            $(‘標簽名’)

5.1.2 應(yīng)用實例

本例將此標簽中的所有文字變?yōu)榧t色。

HTML的部分代碼

            <p><span>span標簽的顏色變?yōu)榧t色</span></p>
            <p><span>這個也變?yōu)榧t色</span></p>
            <p>這個不變色</p>

JavaScript部分代碼

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

實現(xiàn)結(jié)果如圖5-1所示。

圖5-1 實現(xiàn)結(jié)果

5.2 通過id獲取元素

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

5.2.1 語法

            $('#id')

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

            $(‘#id_name’)

5.2.2 應(yīng)用實例

本例將指定ID元素中的顏色變?yōu)榧t色。

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");
            });

實現(xiàn)結(jié)果如圖5-2所示。

圖5-2 實現(xiàn)結(jié)果

5.3 通過類名獲取元素

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

5.3.1 語法

        $('.類名')

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

        $('.className')

5.3.2 應(yīng)用實例

本例將類名為“className”的元素的背景變?yōu)榧t色。

部分HTML代碼

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

JavaScript代碼

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

實現(xiàn)結(jié)果如圖5-3所示。

圖5-3 實現(xiàn)結(jié)果

5.4 一次性獲取多個元素

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

5.4.1 語法

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

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

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

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

            $('*')

5.4.2 應(yīng)用實例

本例將多個元素的背景都變?yōu)榧t色。

部分HTML代碼

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

JavaScript代碼

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

實現(xiàn)結(jié)果如圖5-4所示。

圖5-4 實現(xiàn)結(jié)果

5.5 通過指定層次關(guān)系獲取元素

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

5.5.1 語法

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

可以指定form標簽中的input或label標簽來完成相關(guān)設(shè)置，還可以指定input標簽前的label標簽執(zhí)行操作。

5.5.2 應(yīng)用實例

部分HTML代碼

            <form>
            <label>子節(jié)點</label><input type="text" value="背景變成紅色">
            <fieldset>
            <label>孫節(jié)點</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");
            });

實現(xiàn)結(jié)果如圖5-5所示。

圖5-5 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-6所示。

圖5-6 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-7所示。

圖5-7 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-8所示。

圖5-8 實現(xiàn)結(jié)果

5.6 根據(jù)元素的屬性值獲取元素

5.6.1 語法

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

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

5.6.2 應(yīng)用實例

下面各個實例中除了提示文字不同外，其他結(jié)構(gòu)均相同。

部分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");
            });

實現(xiàn)結(jié)果如圖5-9所示。

圖5-9 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-10所示。

圖5-10 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-11所示。

圖5-11 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-12所示。

圖5-12 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-13所示。

圖5-13 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-14所示。

圖5-14 實現(xiàn)結(jié)果

5.7 通過過濾器獲取元素

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

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

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

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

應(yīng)用實例的部分HTML代碼

            <ul>
            <li>第0個li的文字變?yōu)榧t色</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");
            });

實現(xiàn)結(jié)果如圖5-15所示。

圖5-15 實現(xiàn)結(jié)果

（2）獲取最后一個元素

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

實現(xiàn)結(jié)果如圖5-16所示。

圖5-16 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-17所示。

圖5-17 實現(xiàn)結(jié)果

（4）獲取偶數(shù)序號的元素

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

實現(xiàn)結(jié)果如圖5-18所示。

圖5-18 實現(xiàn)結(jié)果

（5）獲取奇數(shù)序號的元素

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

實現(xiàn)結(jié)果如圖5-19所示。

圖5-19 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-20所示。

圖5-20 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-21所示。

圖5-21 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-22所示。

圖5-22 實現(xiàn)結(jié)果

（9）獲取標題元素

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

實現(xiàn)結(jié)果如圖5-23所示。

圖5-23 實現(xiàn)結(jié)果

（10）獲取動畫元素

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

實現(xiàn)結(jié)果如圖5-24所示。

圖5-24 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-25所示。

圖5-25 實現(xiàn)結(jié)果

（12）獲取空元素

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

實現(xiàn)結(jié)果如圖5-26所示。

圖5-26 實現(xiàn)結(jié)果

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

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

實現(xiàn)結(jié)果如圖5-27所示。

圖5-27 實現(xiàn)結(jié)果

（14）獲取非空元素

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

實現(xiàn)結(jié)果如圖5-28所示。

圖5-28 實現(xiàn)結(jié)果

5.8 獲取表單元素

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

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

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

提示

使用“:hidden”時可以獲取HTML/xHTML文檔中的所有隱藏元素，要獲取表單中hidden屬性的元素，應(yīng)使用“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屬性的
    表單元素)"
                    );
            });

實現(xiàn)結(jié)果如圖5-29所示。

圖5-29 實現(xiàn)結(jié)果

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("選擇的數(shù)據(jù)："+val);
                    $(":checkbox").click(checkboxclick);
                    })();
                $("select").change(function(){
                    var txt='';
                    $("select option:selected").each(function(){
                          txt += $(this).text() + ',';
                    });
                    $("#option").html("選擇的選項是："+txt);
                }).trigger("change");
            });

實現(xiàn)結(jié)果如圖5-30所示。

圖5-30 實現(xiàn)結(jié)果

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

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

5.10.1 語法

            eq(index)

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

            $('p').eq(2)

5.10.2 應(yīng)用實例

部分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");
            });

實現(xiàn)結(jié)果如圖5-31所示。

圖5-31 實現(xiàn)結(jié)果

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

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

5.11.1 語法

            filter(expr)

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

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

5.11.2 應(yīng)用實例

部分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標簽的文字顏色變?yōu)樗{色，同時將類名為“center”的標簽背景色變成黃色
            $(function(){
              $("p").css("color","blue").filter(".center").css("backgroundC
    olor","yellow");
            });

實現(xiàn)結(jié)果如圖5-32所示。

圖5-32 實現(xiàn)結(jié)果

5.12 獲取指定范圍的元素

5.12.1 語法

            slice(start,[end])

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

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

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

5.12.2 應(yīng)用實例

部分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代碼

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

實現(xiàn)結(jié)果如圖5-33所示。

圖5-33 實現(xiàn)結(jié)果

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

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

5.13.1 語法

          is(expr)

一般首先循環(huán)標簽集合，當條件表達式為真時獲取當前標簽元素，執(zhí)行相關(guān)設(shè)置操作。

5.13.2 應(yīng)用實例

部分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”的對象設(shè)置為不同的背景色
            $(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;
                    }
              })
            });

實現(xiàn)結(jié)果如圖5-34所示。

圖5-34 實現(xiàn)結(jié)果

5.14 獲取元素的下一個元素

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

5.14.1 語法

            next([expr])

5.14.2 應(yīng)用實例

部分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');
            });

實現(xiàn)結(jié)果如圖5-35所示。

圖5-35 實現(xiàn)結(jié)果

5.15 獲取元素的前一個元素

5.15.1 語法

            prev([expr])

5.15.2 應(yīng)用實例

部分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');
            });

實現(xiàn)結(jié)果如圖5-36所示。

圖5-36 實現(xiàn)結(jié)果

5.16 獲取元素的父元素

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

5.16.1 語法

            parent([expr])

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

5.16.2 應(yīng)用實例

部分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');
            });

實現(xiàn)結(jié)果如圖5-37所示。

圖5-37 實現(xiàn)結(jié)果

5.17 獲取元素的子元素

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

5.17.1 語法

            children([expr])

5.17.2 應(yīng)用實例

部分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');
            });

實現(xiàn)結(jié)果如圖5-38所示。

圖5-38 實現(xiàn)結(jié)果

主站蜘蛛池模板： 天柱县| 新蔡县| 宜宾市| 浮山县| 抚宁县| 清原| 离岛区| 安泽县| 唐山市| 通海县| 阳春市| 金门县| 榆中县| 蕉岭县| 星子县| 溧水县| 刚察县| 保山市| 阳泉市| 肇庆市| 洪泽县| 东乡族自治县| 金门县| 司法| 洪雅县| 伊通| 齐齐哈尔市| 六枝特区| 阜宁县| 平江县| 区。| 通榆县| 东安县| 平遥县| 成武县| 望谟县| 宜兰县| 南陵县| 乌鲁木齐市| 吴江市| 罗源县|