JQuery基础以及5个小案例

Posted 2020-09-18

1.JQ完成定时弹出广告

　　步骤分析

1. 创建html文档
2. 在页面中创建一个广告部分的div,设置div隐藏
3. 设置定时操作,1秒执行一个显示的方法
4. 设置定时操作.1秒执行一个隐藏方法

//引入JQ
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
        //定义一个时间的全局变量
        var time;
        //设置加载时的函数
        $(function(){
            //设置时间绑定显示的函数
            time = setInterval("showAd()",1000);
        });
        //显示的函数
        function showAd(){
            //获取广告div对象
            $("#adDiv").show(5000,hideAd);
            //清空时间
            clearInterval(time);
            //调用隐藏函数
            time = setInterval("hideAd()",1000);
        }
        //隐藏函数
        function hideAd() {
            //获取对象
            $("#adDiv").hide(5000);
            //清空时间
            clearInterval(time);
        }
    </script>

2.表格的隔行换色

　　步骤分析

1. 引入JQ的js
2. 在页面加载的函数中,选择奇数行,添加样式
3. 在页面加载的函数中,选择偶数行,添加样式

//引入JQ的js
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
        //绑定页面加载的函数
        $(function(){
            //为奇数行添加样式
            $("table tr:odd").css("background","#0000FF");
            //为偶数行添加样式
            $("table tr:even").css("background","#E9FBEB");
        });
    </script>

3.复选框的全选和全不选

　　步骤分析

1. 引入jq的js
2. 编写页面加载的函数
3. 点击上面的复选框,获取下面的复选框
4. 修改下面的复选框的值

//引入jq的js
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
        //编写页面加载的函数
        $(function(){
            //得打最上面的复选框,添加点击函数
            $("#selectAll").click(function(){
                //得打下面的复选框,让上下checked保持一致
                $(":checkbox").prop("checked",this.checked);
            });
        });
    </script>

 

4.二级联动

　　步骤分析

1. 引入jq的js
2. 获得第一个下拉列表的change事件
3. 获得被选中的下拉列表的值
4. 去数组中进行对比
5. 获取数组中的值
6. 创建元素,创建文本,将文本添加到元素,将元素添加到第二个列表中

    //引入jq的js
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
        //绑定页面加载的函数
        $(function(){
            //创建数组
            var arrs = [["a","b"]["c","d"]];
            /*添加change函数*/
            $("#province").change(function(){
                //清空列表
                $("#city").get(0).options.length=1;
                //得到被选中的value
                var val = this.value;
                //遍历数组
                $.each(arrs, function(i,n) {
                    if(i == value) {
                        $.each(n, function(j,m) {
                            //添加元素和文本
                            $("#city").append("<option>"+m+"</option>");
                        });
                    }
                });
            });
        });
    </script>

5.下拉列表的左右选择

　　

//引入jq的js
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
    //绑定页面加载函数
        $(function(){
            //向右边添加的div添加双击事件
            $("#selectLeft").dbclick(function(){
                //获得左边的被选中的option元素添加到右边
                $("#selectLeft option:selected").appendTo("#selectRight");
            });
            //向左边添加的div添加双击事件
            $("#selectLeft").dbclick(function(){
                //获得右边的被选中的option元素添加到左边
                $("#selectRight option:selected").appendTo("#selectLeft");
            });
        });
    </script>