五：Jquery-demo

一:多选框的全选与全不选
1.遍历:使用each();

    $("#checkallbox").click(function(){
        var isChecked = this.checked;
        //使用对象访问的方式进行遍历，语法：$().each(function(){})
        $("input[name='hobby']").each(function(){
            this.checked = isChecked;
        });
    });

2.遍历:使用$.each()

    $("#checkallbox").click(function(){
        var isChecked = this.checked;
        //使用工具类遍历方式，语法：$.each(array，function(i,j){})  
        //其中array代表被遍历的对象，i代表角标，j代表遍历后的dom对象。
        $.each($("input[name='hobby']"), function(i,j) {
            j.checked = isChecked;
        });
    });

3.添加属性:prop()

    $("#checkallbox").click(function(){
        //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
        $("input[name='hobby']").prop("checked",this.checked);
    });

二:二级联动问题

$(function(){
    //2.创建二维数组用于存储省份和城市
    var cities = new Array();
    cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
    
    $("#province").change(function(){
        //10.清除第二个下拉列表的内容
        $("#city").empty();
        //$("#city option").remove();
        //1.获取用户选择的省份
        var val = this.value;
        //3.遍历二维数组中省份
        $.each(cities,function(i,obj){
            //4.判断用户选择的省份和遍历的省份
            if(val==i){
                //5.遍历该省份下的所有城市
                $.each(cities[i],function(j,obj2){
                    //6.创建城市文本节点
                    //var textNode = document.createTextNode(obj2);
                    //7.创建option元素节点
                    var op = document.createElement("option");
                    //8.将城市文本节点添加到option元素节点中
                    //$(op).append(textNode);
                    //$(op).append(obj2);   向option元素末尾追加内容
                    $(op).html(obj2);   设置option元素内部的html文本内容
                    $(op).val(obj2);    //设置option元素的value值
                    //9.将option元素节点追加到第二个下拉列表中取
                    $(op).appendTo($("#city"));
                    
                    //原生js写法  ------------------------------------ 
                    //创建节点
                    var opt = document.createElement("option");
                    //为节点设置HTML内容
                    opt.innerHTML = pcities[i];
                    //在sel2中末尾追加指定的节点
                    sel2.appendChild(opt);
                });
            }
        });
    });
});
//-------------------------------------------------
<select id="province">
    <option>--请选择--</option>
    <option value="0">湖北</option>
    <option value="1">湖南</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
</select>
<select id="city"></select>

三:下拉列表左右选择

/*1.选中单击去右边*/
$("#selectOneToRight").click(function(){
    $("#left option:selected").appendTo($("#right"));
});
/*2.单击全部去右边*/
$("#selectAllToRight").click(function(){
    $("#left option").appendTo($("#right"));
});
/*3.选中双击去右边*/
$("#left").dblclick(function(){     //这里是下拉选被双击时触发,不是后代元素#left option被双击时触发
    $("#left option:selected").appendTo($("#right"));
});
/*1.选中单击去左边*/
$("#selectOneToLeft").click(function(){
    $("#right option:selected").appendTo($("#left"));
});
/*2.单击全部去左边*/
$("#selectAllToLeft").click(function(){
    $("#right option").appendTo($("#left"));
});
/*3.选中双击去左边*/       
$("#right").dblclick(function(){    //这里是下拉选被双击时触发,不是后代元素#left option被双击时触发
    $("#right option:selected").appendTo($("#left"));
});
//------------------------------------------------------------------
<select multiple="multiple" id="left">
    <option>IPhone6s</option>
    <option>小米4</option>
    <option>锤子T2</option>
</select>
<a href="#" id="selectOneToRight">&gt;&gt;</a> <a href="#" id="selectAllToRight">&gt;&gt;&gt;</a>
----------------------------------------
<select multiple="multiple" id="right">
    <option>三星Note3</option>
    <option>华为6s</option>
</select>
<a href="#" id="selectOneToLeft">&lt;&lt;</a> <a href="#" id="selectAllToLeft">&lt;&lt;&lt;</a>