四川盐亭网站制作公司

jQuery表单应用：全选/取消全选，表单验证，网页选项卡切换

应用一：单行文本框应用

创新互联公司专注于企业全网营销推广、网站重做改版、集安网站定制设计、自适应品牌网站建设、成都h5网站建设、购物商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为集安等各大城市提供网站开发制作服务。


需要用到的 API

focus([[data],fn])   --> 当元素获得焦点时，触发 focus 事件

blur([[data],fn])     --> 当元素失去焦点时，触发 blur 事件




    
    
    



    

        个人基本信息
        

            用户姓名：
            
        

        

            手机号码：
            
        

        

            联系地址：
            
        

    

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

应用二：多行文本框应用


1、高度变化

有一些网站的评论框上面有“+”和“-”按钮，它们的功能就是用来控制评论框的高度。例如单击“-”按钮，评论框的高度将会缩小。

需要用到的 API

is(expr|obj|ele|fn)   -->根据选择器、DOM元素或 jQuery对象来检测匹配元素集合，如果其中至少有                                        一个元素符合这个给定的表达式就返回 true

:animated   --> 匹配所有正在执行动画效果的元素

animate(params,[speed],[easing],[fn])     --> 用于创建自定义动画的函数




    
    
    



    
        
            放大
            缩小
        
                              
    

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

2、滚动条高度变化

有一些网站的评论框上面有“+”和“-”按钮，它们的功能就是用来控制评论框的高度。例如单击“-”按钮，评论框的高度将会缩小。

需要用到的 API

scrollTop( [val] )--> 获取匹配元素相对滚动条顶部的偏移，此方法对可见和隐藏元素都有效




    
    
    



    
        
            向上
            向下
        
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus fuga quae soluta vel. Ab accusamus blanditiis dolorum ea eaque libero mollitia numquam officia veniam. Assumenda distinctio molestias necessitatibus sed. Eius.             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cum error esse tempora vel! Accusantium aliquid eveniet impedit nisi numquam odit possimus provident quas reprehenderit ut? Doloremque praesentium quisquam voluptatum!             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aut corporis cupiditate dicta ducimus facere, fugiat, fugit impedit inventore maxime, mollitia nesciunt pariatur praesentium quaerat quidem ratione repudiandae voluptas.                           

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

应用三：复选框应用 


1、用按钮控制 全选/反选/取消全选

需要用到的 API

[attribute = value]   --> 匹配给定的属性是某个特定值的元素




    
    
    



    
你喜欢的运动是：

    
         足球
    
    
         篮球
    
    
         羽毛球
    
    
         乒乓球
    
    
        
        
        
        
    

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

2、用复选框控制 全选/取消全选

需要用到的 API

[attribute = value]   --> 匹配给定的属性是某个特定值的元素




    
    
    



    
你喜欢的运动是：
        
             全选/取消全选
        
    

    
         足球
    
    
         篮球
    
    
         羽毛球
    
    
         乒乓球
    
    
        
    

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

仔细观察一下，其实上面的操作是有 bug的，当选中控制全选的复选框，选项组里面只有部分选中时，这个还是全选吗？显然不是，我们期望只有部分选项组选中时，去掉全选框的钩子。如下图

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

所以还需要一段代码来对复选框组进行操作，以通过它们来控制 id 为“checkAll”的复选框，思路如下：

（1）、对复选框组绑定单击事件

（2）、定义一个 flag 变量，默认为 true

（3）、循环复选框组，当有没被选中的选项时，则把变量 flag 的值设置为 false

（4）、根据变量 flag 的值来设置 id 为“checkAll”复选框是否选中

   >、如果 flag 为 true，说明复选框组都被选中

   >、如果 flag 为 false，说明复选框组至少有一个没有被选中

$('[name=items]:checkbox').click(function(){ //给复选框组点击单击事件
    var flag = true;
    $(this).each(function(){  //遍历每一个复选框按钮
        if(!this.checked){ //如果当前复选框按钮的checked属性为false，也就是没有被选中
            flag = false;
        }
    });
    $('#checkAll').attr('checked', flag); //只要有一个复选框没有被选中，就把 #checked 变为false
});

除了上述思路以外，还可以用下面的方法：

（1）、对复选框组绑定单击事件

（2）、判断复选框的总数是否与选中的复选框数量相等

（3）、如果相等，则说明全部选中了，id 为“checkAll”复选框应当处于选中状态，否则处于不选中

$('[name=items]:checkbox').click(function(){
    //$(this) 复选框组
    //$(this).length   复选框的个数
    //$(this).filter(':checked')  被选中的复选框
    $('#checkAll').attr('checked', $(this).length==$(this).filter(':checked').length);
});

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

应用四：下拉框应用 

需要用到的 API

$(A).append(B)   --> 把A追加到B中

dblclick([[data],fn])  --> 当双击元素时，会发生 dblclick 事件


jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

如上图，需要实现的功能如下：

（1）、将选中的选项添加给对方

（2）、将全部选项添加给对方

（3）、双击某个选项将其添加给对方




    
    
    



    
        选项1
        选项2
        选项3
        选项4
        选项5
        选项6
        选项7
    
    

        选中添加到右边>>
        全部添加到右边>>
    




    
        选项8
    
    

        <<选中删除到左边
        <<全部删除到左边
    

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

应用五：表单验证

需要用到的 API

trigger(type,[data])   --> 在每一个匹配的元素上触发某类事件

triggerHandler(type,[data])  --> 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

这个方法的行为表现与trigger类似，但有以下三个主要区别： 

* 第一，他不会触发浏览器默认事件。

* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。

* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

有这样一个简单的表单页面：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

class为required 的文本框是必须填写的，加一个 *用以区别

// class为required 的文本框是必须填写的，加一个 *用以区别
$('form :input.required').each(function(){
    //创建元素
    var required = $(' *');
    //将它追加到文档中
    $(this).parent().append( required );
});

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

验证表单元素步骤如下：

（1）、判断当前失去焦点的元素是“用户名”还是“邮箱”，然后分别处理

（2）、如果是“用户名”，判断元素值的长度是否小于6，如果小于6，则用红色提醒用户输入不正确；反之，则用绿色提醒用户输入正确

（3）、如果是“邮箱”，判断元素的值是否符合邮箱的格式，如果不符合，则用红色提醒用户输入不正确；反之，则用绿色提醒用户输入不正确

（4）、将提醒信息追加到当前元素的父元素之后

//文本框失去焦点后
$('form :input').blur(function(){ //为表单元素添加失去焦点事件
    var parent = $(this).parent();
    //去掉先前的提醒,否则提示消息会一直叠加
    parent.find(".formtips").remove(); 
    //验证用户名
    if($(this).is('#username')){
        if(this.value == '' || this.value.length<6){
            var errorMsg = '请输入至少6位的用户名';
            parent.append(''+errorMsg+'');
        }else{
            var okMsg = '输入正确';
            parent.append(''+okMsg+'');
        }
    }
    //验证邮箱
    if($(this).is('#email')){
        if(this.value=='' || ( this.value!='' && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
            var errorMsg = '请输入正确的E-Mail地址';
            parent.append(''+errorMsg+'');
        }else{
            var okMsg = '输入正确';
            parent.append(''+okMsg+'');
        }
    }
});

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

代码总览




    
    
    



    
        用户名:
        
    
    
        邮箱:
        
    
    
        个人资料:
        
    
    
        
    

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

应用六：切换选项卡

需要用到的 API

eq(index|-index)   --> 获取第N个元素 （index从0开始）




    
    
    



    
        
    
            时事
            
  • 体育
    • 
            
  • 娱乐
    • 
        

    
    
        
时事

        体育
        娱乐
    

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换


名称栏目：jQuery表单应用：全选/取消全选，表单验证，网页选项卡切换
转载注明：http://scyanting.com/article/gcgcsj.html

其他资讯