write less,do more--初见jquery

来源：互联网发布：上海图书馆知乎编辑：程序博客网时间：2024/06/06 14:36

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

作为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方法可以将满足条件的节点全部添加到新父节点上;更加简洁;

0 0