七 基于JQuery的几个案例

      目录

1. 使用JQuery完成页面定时弹出广告
2. 使用JQuery完成隔行换色，复选框的全选效果
3. 使用JQuery完成省市联动
4. 使用JQuery完成下拉列表左右选择

 

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

    步骤分析
        1.导入JQ的文件
        2.编写JQ的文档加载事件
        3.启动定时器  setTImeOut("",3000);
        4.编写显示广告的函数
        5.在显示广告函数里面再启动一个定时器，开启隐藏广告的定时器
        6.编写隐藏广告的函数   

 

        <script type="text/javascript">
            $(function(){
                //进入页面等待三秒之后显示广告
                setTimeout("showAd()",3000);
            });
            function showAd(){
                $("#img2").slideDown(1000);
                //等待3秒之后启动关闭广告定时器
                setTimeout("closeAd()",3000);
            }
            function closeAd(){
                $("#img2").slideUp(2000);
            }
        </script>

 

 

2 使用JQuery完成隔行换色，复选框的全选效果
        步骤分析：
        导包
        确定事件:文档加载完成事件，页面初始化
          获得所有的行: 表格行（拿到table,里面有rows[]、cells[],有bgColor属性）
        根据行号修改颜色
        
        全选和全不选：
        获取当前选中状态
        获取所有分类项的checkbox

        <script type="text/javascript">
            //隔行换色
            $(function(){
                //获得所有行，元素选择器
                //偶数行去掉首行
                $("tr:even:gt(0)").css("background-color","cyan");
                //奇数行另一种颜色
                $("tr:odd").css("background-color","fuchsia")
            });
            
            //全选全不选
            $(function(){
                $("#checkAll").click(function(){
                    //获取当前选中状态
//                    alert(this.checked);
                    //获取所有分类项的checkbox,属性选择器实现
//                    $("input[type='checkbox']:gt(0)").prop("checked",this.checked);
                    //层级选择器实现，子元素tbody>tr>td>input
                    //右键，检查-->copy selector:#tab > tbody > tr:nth-child(5) > td:nth-child(1) > input[type="checkbox"]
//                    $("tbody>tr>td>input").prop("checked",this.checked);
                    $("input").prop("checked",this.checked);
                })
            })
        </script>

 

3 使用JQuery完成省市联动

技术分析：
        1.准备工作：城市的数据
        3.添加结点：appendChild(JS)
                   (JS)append(content) content:String、Element\JQuery
                   (JS)$(A).appendTo(B) 将A加到B中
                   (JS)$(A).prepend(B) 将B加到A的前面
                   (JS)$(A).after(B) 将B加到A的后面
        
        4：JQ中遍历：
                    $().each函数    
                    $.each(cities,function(i,n){
                        
                    })
                    
        步骤分析：
        1.导入JQ的文件
        2.文档加载事件：页面初始化
        3.进一步确定事件：change事件
        4.函数：得到当前选中的省份
        5.得到城市
        6.遍历城市数据
        7.将遍历出来的城市添加到城市的select中

 

<script type="text/javascript">
        /*
         * 准备数据
         */
        var provinces = [
        ["深圳市","惠州市","东莞市","广东市"],
        ["长沙市","岳阳市","株洲市","湘潭市"],
        ["厦门市","漳州市","泉州市","福州市"]
        ];
            
            
        //页面初始化
        $(function(){
            //id和事件
            $("#province").change(function(){
                //得到城市信息
                var cities = provinces[this.value];
                //清空城市select中的option
                $("#city").empty();
                //遍历城市数据
                $(cities).each(function(i,n){
                    $("#city").append("<option>"+n+"</option>")
                });
           });
        });
                
        //JQ对象调用遍历
    /*    $(cities).each(function(i,n){
            console.log(i+"==="+n)
            /*0===深圳市,惠州市,东莞市,广东市
            1===长沙市,岳阳市,株洲市,湘潭市
             2===厦门市,漳州市,泉州市,福州市
    })*/
        //JQ函数遍历
/*        $.each(cities,function(i,n){
            console.log(i+"===="+n);
        })*/
            
    </script>

 

 

 

4 使用JQuery完成下拉列表左右选择

            步骤:
                1. 导入JQ的文件
                2. 文档加载函数 :页面初始化
                3.确定事件 :　点击事件　onclick
                4. 事件触发函数：移动被选中的那一项到右边

 

        <script>
            //当页面加载时
            $(function(){
                //当id选择器触发时
                //找到被选中的
                $("#l1").click(function(){
                //移到右边
                    $("#selectRight").append($("#selectLeft option:selected"));
                });
                //将所有移到右边
                $("#l2").click(function(){
                    $("#selectRight").append($("#selectLeft option"));
                });
                
                //找到被选中的，移到左边
                $("#r1").click(function(){
                    $("#selectLeft").append($("#selectRight option:selected"));
                });
                //将所有移到左边
                $("#r2").click(function(){
                    $("#selectLeft").append($("#selectRight option"));
                });
            });
        </script>

 

转载于:https://www.cnblogs.com/ltfxy/p/10142563.html