上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第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 实现结果

第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章获取元素