锋利的Jquery【读书笔记】 -- 第五章 jQuery对表单表格的操作

最新推荐文章于 2024-04-09 07:17:03 发布

CherishLyf

最新推荐文章于 2024-04-09 07:17:03 发布

阅读量666

点赞数

分类专栏：锋利的jQuery【读书笔记】文章标签： jquery 表单

本文链接：https://blog.youkuaiyun.com/CherishLyf/article/details/48520661

版权

锋利的jQuery【读书笔记】专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了jQuery在表单应用、文本框、多行文本框、复选框、下拉框、表格操作及变色等方面的使用方法，包括文本框样式变化、多行文本框高度调整、复选框控制表格行高亮等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

- 锋利的Jquery读书笔记第五章 jQuery对表单表格的操作
  - 表单应用
  - 表格应用
    - 表格变色
      - 普通的隔行变色
      - 单选框控制表格行高亮

锋利的Jquery【读书笔记】 – 第五章 jQuery对表单表格的操作

表单应用

单行文本框应用

当文本框获取焦点，它的颜色需要变化；当失去焦点，要恢复原来的样式。
CSS：

.focus{
    border: 1px solid #f00;
    background: #fcc;
}

为文本框添加获取和失去焦点事件：

$(function(){
    $(":input").focus(function(){
        $(this).addClass("focus");
    }).blur(function(){
        $(this).removeClass("focus");
    })
})

多行文本框应用

首先创建一个表单：

<form action="" method="post">
<div class="msg">
    <div class="msg_caption">
        <span class="bigger" >放大</span>
        <span class="smaller" >缩小</span>
    </div>
    <div>
        <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
    </div>
</div>
</form>

单击放大，如果评论框小于500px，则在原有的基础上增加50px
单击缩小，则在评论大于50px，则在原有的基础上减去50px

$(function(){
    var $comment =$("#comment");       //获取评论框
    $(".bigger").click(function(){
        if($comment.height() <500){
            //重新设置高度
            $comment.height($comment.height() +50);
        }
    });
    $(".smaller").click(function(){
        if( $comment.height() >50){
            //重新设置高度
            $comment.height($comment.height()-50);
        }
    })
})

也可以改为动画效果的：

$(function(){
    var $comment =$("#comment");       //获取评论框
    $(".bigger").click(function(){
        if(!$comment.is(":animated")){         //判断是否处于动画
            if($comment.height()<500){
                $comment.animate({height : "+=50"},400);
            }
        }
    });
    $(".smaller").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height()>50){
                $comment.animate({height : "-=50"},400)
            }
        }
    })
})

还可以设置滚动条的高度：
与控制高度的方法相同，只是需要控制另一个属性，scrollTop

$(function(){
    var $comment = $("#comment");
    $(".up").click(function(){
        if(!comment.is(":animated")){
            $comment.animate({scroll : "-=50"},400)
        }
    });
    $(".down").click(function(){
        if(!comment.is(":animated")){
            $comment.animate({scroll : "+=50"},400)
        }
    })
})

复选框应用

<form method="post" action="">
   你爱好的运动是？
   <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
   <br/>
    <input type="button" id="CheckedAll" value="全　选"/>
    <input type="button" id="CheckedNo" value="全不选"/>
    <input type="button" id="CheckedRev" value="反　选"/> 

    <input type="button" id="send" value="提　交"/> 
</form>

全选操作：

$("#CheckAll").click(function(){
    $("[name=items]:checkbox").attr('checked',true);
})

全部不选：

$("#CheckNo").click(function(){
    $("[name=items]:checkbox").attr('checked',false);
})

反选：

$("#CheckRev").click(function(){
    $('[name=item]:checkbox').each(function(){
        $(this).attr("checked", !$(this).attr("checked"));
    })
})

反选可以使用JavaScript原生的DOM方法。更加简洁：

$("#CheckRev").click(function(){
    $('[name=items]:checkbox').each(function(){
        this.checked=!this.checked;
    })
})

如果全选和全不选用复选框代替：

<form>
   你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
    <input type="button" id="send" value="提　交"/> 
</form>

全选框的判断：

$("#CheckAll").click(function(){
    $('[name=items]:checkbox').attr("checked",this.checked);
})

对其它复选框进行操作：

$("[name=items]:checkbox").click(function(){
    var flag = true;
    $("[name=items]:checkbox").each(function(){
        if(!this.checked){
            flag=false;
        }
    });
    $("#CheckAll").attr("checked",flag);
})

也可以根据数量判断：

$("[name=items]:checkbox").click(function(){
    //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高效率
    var $tmp=$("[name=items]:checkbox");
    //用filter()方法筛选出复选框，并直接给CheckAll赋值
    $('#CheckAll').attr("checked",$tmp.length == $tmp.filter(":checked").length);
});

注意：按照官方说明如果设置disabled和checked这些属性，应使用 prop()方法，而不是使用 attr()方法。所以上例中应该把所有 attr() 改成 prop()方法.
哪些属性应该使用 attr()方法，哪些该使用 prop()方法？

只添加属性名称该属性就能生效英爱使用 prop();
值存在 true/false 的属性应该用 prop()。

下拉框的应用

    <div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
        </select>
        <div>
            <span id="add" >选中添加到右边&gt;&gt;</span>
            <span id="add_all" >全部添加到右边&gt;&gt;</span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="remove">&lt;&lt;选中删除到左边</span>
            <span id="remove_all">&lt;&lt;全部删除到左边</span>
        </div>
    </div>

这里写图片描述

首先实现第一个功能：
将下拉框被选中的选项添加到对方

$("#add").click(function(){
    var $option = $('#select1 option:selected');    //获取选中选项
    var $remove = $option.remove();               //删除下拉列表中选中的选项
    $remove.appendTo("#select2");                 //追加到对方
})

删除和追加这两个步骤可以用 appendTo()直接完成：

$("#add").click(function(){
    var $option = $('#select1 option:selected');    //获取选中选项
    $remove.appendTo("#select2");                 //追加到对方
})

实现第二个功能：
将全部选项添加到对方：

$("#add_all").click(function(){
    var $option = $("#select1 option");         //获取全部选项
    $opiton.appendTo('#select2');         //追加到对方
})

第三个功能：
双击某个选项将其添加给对方

$("#select1").dbclick(function(){
    var $option = $("option:selected",this);       //获取选中的选项
    $option.appendTo('#select2');              //追加给对方
})

首先创建一个表单：

<form method="post" action="">
    <div class="int">
        <label for="username">用户名:</label>
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    </div>
</form>

这里写图片描述
给表单内必填的加上“required”class属性。
在文本框必填的后面加上红色小星星标识，使用append方法：

$("form :input.required").each(function(){
    var $required = $("<strong> *</strong>");     //创建元素
    $(this).parent().append($required);        //将他追加到文档中
})

这里写图片描述

当用户名文本框填写完信息时，将光标的焦点从“用户名”移出时，需要即时判断用户名是否符合验证规则。需要添加失去焦点事件，即blur。

$("form :input").blur(function(){      //为表单元素添加失去焦点事件
    //...省略代码   
})

验证表单元素的步骤：

判断失去焦点的元素，是“用户名”还是“邮箱”，分别处理
如果是用户名，判断用户名的长度是否小于6，小于 6，用红色字提醒用户输入不正确，反之，用绿色字提醒用户正确
如果是邮箱，判断元素的值是否符合邮箱的格式，如果不符合题型用户输入不正确，反之提醒用户输入正确
将提醒信息追加到当前元素的父元素最后

$("form :input").blur(function(){          // 为表单元素添加失去焦点事件
    var $parent = $(this).parent();
    // 验证用户名
    if($(this).is("#username")){        //判断是否是用户名
        if( this.value=="" ||  this.value.length <6 ){
            var errorMsg = '请输入至少6位的用户名。';
            $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");
        } else {
            var okMsg = "输入正确";
            $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>")
        }
    }
    // 验证邮箱
    if($(this).is("#email")){
        if(this.value == "" || (this.value != "" && !/.+@+\.+\.[a-zA-Z]{2,4}$/.test(this.value))){
            var errorMsg = '请输入正确的E-mail地址';
            $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");
        } else {
            var okMsg = "输入正确";
            $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");
        }
    }
})

连续输入几次错误就会变成这样
这里写图片描述

由于每次元素失去焦点，都会创建一个提醒元素，造成多次提醒。
因此需要在创建提示元素之前，将当前元素以前的提醒元素都清除。可以使用remove()方法：

$('form :input').blur(function(){          //为表单元素添加失去焦点事件
    var $parent = $(this).parent();
    $parent.find(".formtips").remove();  //删除以前的提醒元素
    //  ..省略代码
})

根据class为”onError”元素的长度判断是否可以提交。如果长度为0，即true。长度大于0，即false，说明有错误，需要阻止表单提交。阻止提交可以直接使用”return false”语句。

$('#send').click(function(){
    $("form .required:input").trigger("blur");
    var numError = $("form .onError").length;
    if(numError){
        return false;
    }
    alert("注册成功，密码已发到你的邮箱，请查收");
})

为了可以即时触发，需要给表单元素绑定keyup事件和focus事件。
keyup事件能在用户用户每次松开按键时触发，实现即时提醒。
focus事件能再用户得到焦点时触发，也可以实现即使提醒。

$("form :input").blur(function(){
    //失去焦点处理函数
    //代码shenglue
}).keyup(function(){
    $(this).triggerHandler("blur");
}).focus(function(){
    $(this).triggerHandler("blur");
})

trigger(“blur”)不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。
而triggerHandler(“blur”)只会触发为元素绑定的blur事件，而不是触发浏览器默认的blur事件。

表格应用

表格变色

    <table>
        <thead>
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>

普通的隔行变色

CSS代码：

.even{
    background : #fff38f;          /* 偶数行样式 */
}
.odd{
    background : #ffffee;          /* 奇数行样式 */
}

然后选择表格奇数行和偶数行分别添加样式，

$(function(){
    $("tr:odd").addClass("odd");
    $("tr:even").addClass("even");
})

如果还想某一行高亮显示，可以使用 contains选择器：

$("tr:contains('王五')").addCLass("selected");

单选框控制表格行高亮

单击某一行后，此行被选中高亮显示，而且单选框也被选中。

$("tbody>tr").click(function(){
    $(this)
           .addClass("selected")
})