jQuery 学习（三）

最新推荐文章于 2025-11-28 04:56:28 发布

最新推荐文章于 2025-11-28 04:56:28 发布 · 122 阅读

文章标签：

#javascript #java #ViewUI

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用jQuery操作网页表单元素及类数组对象的方法，包括获取与设置表单值、选择器应用、元素过滤等实用技巧。

一、jQuery 对于表单元素的获取与操作：

先看页面：

 <input id="user" type="text"  />      <br/>
    <input id="pass" type="password"  />  <br/>
    <textarea id="intro"></textarea> <br/>
    <select id="gender">
       <option value="male" selected="selected">男</option>
       <option value="female" >女</option>
    </select><br/>
    <span style="display:none">疯狂java讲义</span>
    <input id="paee" type="checkbox" checked="checked" value="xx"/><br/>

接着看js如何控制

$(function (){
            //获取所有的input,textarea,button,select元素
            $(":input").val("test");
            //获取所有指定了selected="selected"的元素
            $(":selected").css("border","2px dashed black");
            //获取所有指定了 checked="checked" 的元素
            $(":checked").width(40).css("border","2px dotted black");
         });

二、jQuery操作类数组的具体工具方法

先看页面：

<div>
       <div id="java">java</div>
       <div id="javaee" class="test">javaee</div>
       <div id="ajax">ajax</div>
       <div id="xml">xml</div>
       <div id="ejb">ejb</div>
       <div id="workflow">workfolw</div>
    </div>

接着看相关的js与注释：

//获取div之内所有的div元素，并迭代处理每一个元素
             $("div>div").each(function (i){
                 this.innerHTML+="闫振伟条件内容"+i;
             });
             //获取div之内的所有div元素的个数
             alert($("div>div").length);
             //获取div之内的第四个div元素包装称的jQuery,下面将输出”xml.....“
             alert($("div>div").eq(3).html());
             //获取div之内的第二个div元素，下面将输出”javaee....“
             alert($("div>div").get(1).innerHTML);
             //获取id为java的div元素，注意：$("#java").get()返回一个数组
             alert($("#java").get()[0].innerHTML);
             //所有div元素之内id为ejb的div的索引，下面将输出4
             alert($("div>div").index($("#ejb").get(0)));

其中get(index),和get() 非常有用，大家都知道jQuery是将DOM对象变成jQuery对象，然后操作。这两个方法可以获得DOM数组，将jQuery变成DOM对象。

过滤的相关方法：

页面和上面相同

看看都有哪些常用的js方法：

//过滤相关方法
         //对div之内的div元素进行过滤，必须满足id为ajax
             $("div>div").filter("#ajax").css("background-color","#aaaaaa");
             //对div之内的div元素进行过滤，要求字符串长度大于5
             $("div>div").filter(function (){
                return this.innerHTML.length>5;
             }).css("border","1px solid black");
             //对div之内的div元素进行过滤，必须满足id不为ajax
             $("div>div").not("#ajax").css("font-weight","bold");
             //对div之内的div元素进行过滤，取出索引从3到5的元素
         $("div>div").slice(3,5).height(40);
             //将div之内的div元素映射成另一个数组，t的值是【0,1,2,3,4,5】
         var t=$("div>div").map(function (i){
                return i;
             });
             alert(t[2]);

这些都是经过本人实践出来的方法。