write less,do more--初见jquery

最新推荐文章于 2021-08-11 15:02:40 发布

hr963171814

最新推荐文章于 2021-08-11 15:02:40 发布

阅读量369

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/hr963171814/article/details/53328983

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

总结:一会懵逼一会清晰,思绪就像过山车

作为js 的函数库,感觉像一个被封装的js框架;调用更快捷简单的方法去做以前相同的事情
相对于用js书写代码,同样的任务jquery的代码量成倍的减少

1.用jquery完成广告弹出后隐藏

/*
             1. 确定事件 : onload
             2. 文档加载完成,三秒之后弹出广告(先得找到要显示的广告元素)
             3. 广告显示三秒钟
             4. 隐藏广告
             * */
            $(function(){
                function showAD(){
                    $("#ad").show();
                    setTimeout(hideAD,3000);
                }
                function hideAD(){
                    $("#ad").hide();
                }
                setTimeout(showAD,1000);
            });

用show()和hide()方法取代之前的display的none和block;

需要注意的是:显示图片时,必须明确指出图片的宽度;

2.使用JQ完成表格的隔行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>商品分类</title>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            function init(){
                /*
                    var table = document.getElementById("id_table");
                    var rows = table.tBodies[0].rows;
                    //遍历表格
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        if(i%2 == 0){
                            row.style.background="red";
                        }else{
                            row.style.background = "yellow";
                        }
                    }
                */
            }

            $(function(){
                //1.找到要筛选出来的行
                $("tbody > tr:even").css("background-color","red");
                $("tbody > tr:odd").css("background-color","yellow");

            });
        </script>
    </head>
    <body onload="init()">
        <table border="1" width="600px" style="margin: 0 auto;" id="id_table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>分类ID</td>
                    <td>分类名称</td>
                    <td>分类商品</td>
                    <td>分类描述</td>
                    <td>
                        操作
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>1</td>
                    <td>手机数码</td>
                    <td>肾7,肾8,肾9,锤子</td>
                    <td>这里面都是肾,购买需谨慎</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>2</td>
                    <td>冰箱彩电</td>
                    <td>海尔,TCL,康佳</td>
                    <td>支持国货,从你我做起</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>3</td>
                    <td>鞋靴箱包</td>
                    <td>耐克,阿迪,乔丹</td>
                    <td>买鞋还是耐克的好啊!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>4</td>
                    <td>香烟酒水</td>
                    <td>黄鹤楼,芙蓉王,红塔山</td>
                    <td>饭后一根烟,肾做活神仙!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  />
                    </td>
                    <td>5</td>
                    <td>超市</td>
                    <td>JAVA,PHP,JAVAEE</td>
                    <td>棒棒哒!</td>
                    <td>
                        <a href="#">修改</a>|<a href="#">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

总结:通过简单的子类选择器和过滤器即可选出行和列,然后通过jquery方法之间获取设置css样式;书写效率极大的提高;

3.使用JQuery完成表单的全选全不选功能

$(function(){
                /*
                 1. 确定事件 onclick
                 2. 要操作的元素: 顶部全选按钮
                 3. 实现点击事件
                    * 获取当前选中的状态
                    * 使用过滤器,过滤出所有的checkbox
                    * 改变他们的状态
                 */
                $("#ckall").click(function(){
//                  var checked = $("#ckall").prop("checked");
                    var checked = this.checked;
//                  alert(checked);
                    $("tbody input[type='checkbox']").prop("checked",checked);
                })
            });

总结:prop()方法一个参数时可获取参数的值,两个参数时可设置参数的值;其实jquery大部分方法都是这样,比较灵活;

4.使用JQ完成省市联动效果

var provinces = [
                ["武汉市","黄石市","随州市","荆门市"],
                ["长沙市","株洲市","邵阳市"],
                ["广州市","深圳市","东莞市","惠州市"]
            ];

$(function(){
    $("#selectProvince").change(function(){
    //alert(this.value);
    var cities = provinces[this.value];
    //                  $("#selectCity").empty();
    $("#selectCity")[0].options.length = 0;
    $(cities).each(function(i,n){
      $("#selectCity").append("<option>"+n+"</option>")
      });
    });
});

总结:jquery中遍历的方法1. $(数组).each(function(i,n){});//i是索引,n是索引对应的值;2.$ .each(数组,function(i,n)});

注意:this代表的对象是当前的js对象,可用$(this)转为jquery对象.

5.使用JQ完成下拉列表左右选择

            $(function(){
                $("#clickOne").click(function(){
//                  var value = $("#selectLeft>option:selected").val();
                    $("#selectRight").append($("#selectLeft>option:selected"));
//                  $("#selectLeft>option:selected").appendTo("#selectRight");
                });

                $("#clickAll").click(function(){
                    $("#selectRight").append($("#selectLeft>option"));
                });
            });

总结:append/appendTo方法可以将满足条件的节点全部添加到新父节点上;更加简洁;

hr963171814

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
write less,do more--初见jquery

总结:一会懵逼一会清晰,思绪就像过山车作为js 的函数库,感觉像一个被封装的js框架;调用更快捷简单的方法去做以前相同的事情相对于用js书写代码,同样的任务jquery的代码量成倍的减少1.用jquery完成广告弹出后隐藏/* 1. 确定事件 : onload 2. 文档加载完成,三秒之后弹出广告(先得找到要显示的广告元素)
复制链接

扫一扫