效果：

应用三：复选框应用 

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

需要用到的 API

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

    
    
    



    
你喜欢的运动是：
    
         足球
    
    
         篮球
    
    
         羽毛球
    
    
         乒乓球
    
    
        
        
        
        
    

效果：

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

需要用到的 API

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

    
    
    



    
你喜欢的运动是：
        
             全选/取消全选
        
    
    
         足球
    
    
         篮球
    
    
         羽毛球
    
    
         乒乓球
    
    
        
    

效果：

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

所以还需要一段代码来对复选框组进行操作，以通过它们来控制 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);
});

效果：

应用四：下拉框应用 

需要用到的 API

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

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

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

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

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

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

    
    
    



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

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



    
        选项8
    
    

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

效果：

应用五：表单验证

需要用到的 API

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

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

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

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

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

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

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

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

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

验证表单元素步骤如下：

（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+'');
        }
    }
});

代码总览

    
    
    



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

应用六：切换选项卡

需要用到的 API

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

    
    
    



    
        

            时事
            
体育
            
娱乐
        
    
    
        
时事
        体育
        娱乐
    

效果：

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流