jQuery 定时弹窗 & 表格隔行换色 & 复选框全选 & 省市联动 & 下拉列表左右选择-CSDN博客

一:使用JQuery完成页面定时弹出广告

1  $(function(){
2         $("#myImg").show(3000,function(){
3             $("#myImg").hidden();
4         });
5     });

View Code

二:使用JQuery完成表格的隔行换色

 1 <style type="text/css">
 2         .even{
 3             background-color: red;
 4         }
 5     </style>
 6     <script>
 7         $(function(){
 8             $("table tr:odd").css("color","yellow");
 9             $("table tr:even").addClass("even");
10         });
11     </script>

View Code

三:使用JQuery完成复选框的全选和全不选效果

//普通写法
    $("#selectAll").click(function(){
        if($("#selectAll").prop("checked") == true){
            $(":checkbox[name = 'ids']").prop("checked",true);
        }else{
            $(":checkbox[name = 'ids']").prop("checked",false);
        }
    });
    简化写法:
    $("#selectAll").click(function(){
        $(":checkbox[name = 'ids']").prop("checked",this.checked);
    });

View Code

四:使用JQuery完成省市联动效果

$("#sheng").change(function(){
        $("#shi").get(0).options.length = 1;
        var temp = this.value;//这里的this代表sheng列表
        $.each(arrys,function(i,j){
            if(i == temp){//如果this写这里代表某个一维数组
                $(j).each(function(x,y){
                    $("#shi").append("<option>"+y+"</option>");
                });
            }
        });
    });

View Code

五:使用JQuery完成下列列表左右选择

//选中左边列表中某个元素到右边列表
    $("#justRight").click(function(){
        $("#selectLeft option:selected").appendTo("#selectRight")
    });
    //左边列表所有元素到右边列表
    $("#justAllRight").click(function(){
        $("#selectLeft option").appendTo("#selectRight");
    });
    //双击左边列表中某个元素这个元素到右边列表
    $("#selectLeft").dblclick(function(){
        $("option:selected",this).appendTo("#selectRight");
    });