jQuery的应用

来源:互联网 发布:威锋认证的淘宝店 编辑:程序博客网 时间:2024/03/29 20:04

jQuery的应用

一、使用JQ完成首页的定时广告弹出

1.需求分析

在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】

2.技术分析

使用jQuery中的相关技术

3.实现步骤
  • 第一步:引入jQuery相关的文件
  • 第二步:书写页面加载函数
  • 第三步:在页面加载函数中,获取显示广告图片的元素。
  • 第四步:设置定时操作(显示广告图片的函数)
  • 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())
  • 第六步:清除显示广告图片的定时操作
  • 第七步:设置定时操作(隐藏广告图片的函数)
  • 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())
  • 第九步:清除隐藏广告图片的定时操作
4.代码实现
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>    <script>        $(function(){            //1.书写显示广告图片的定时操作            time = setInterval("showAd()",3000);        });        //2.书写显示广告图片的函数        function showAd(){            //3.获取广告图片,并让其显示            //$("#img2").show(1000);            //$("#img2").slideDown(5000);            $("#img2").fadeIn(4000);            //4.清除显示图片定时操作            clearInterval(time);            //5.设置隐藏图片的定时操作            time = setInterval("hiddenAd()",3000);        }        function hiddenAd(){            //6.获取广告图片,并让其隐藏            //$("#img2").hide();            //$("#img2").slideUp(5000);            $("#img2").fadeOut(6000);            //7.清除隐藏图片的定时操作            clearInterval(time);        }    </script>
5.补充内容

toggle的使用:显示图片和隐藏图片

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>toggle的使用</title>        <style>            div{                border: 1px solid white;                width: 500px;                               height: 350px;                margin: auto;                text-align: center;            }        </style>        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>        <script>            $(function(){                $("#btn").click(function(){                    $("#img1").toggle();                });            });        </script>    </head>    <body>        <div>            <input type="button" value="显示/隐藏" id="btn" /><br />|            <img src="../img/飞机05.gif" width="100%" height="100%" id="img1"/>        </div>    </body></html>

二、使用JQ完成隔行变色

1.需求分析

在页面加载的时候让显示用户的表格进行隔行换色显示,效果如下:使用JQ实现!

隔行变色.png

2.技术分析

需要使用jquery的选择器(基本选择器、基本过滤选择器)

还需要使用jquery的CSS的方法(css(name,value))

如果CSS样式已经由美工写好,此时可以使用jquery的CSS类操作
addClass(class | fn)

3.步骤分析
  • 第一步:引入jquery的类库
  • 第二步:直接写页面加载函数
  • 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
  • 第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
4.代码实现
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>使用jQuery完成表格隔行换色</title>        <link rel="stylesheet" href="../css/style.css" />        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>        <script>            //1.页面加载            $(function(){                //方式一:使用内部样式                /*//2.获取tbody下面的偶数行并设置背景颜色                $("tbody tr:even").css("background-color","yellow");                //3.获取tbody下面的奇数行并设置背景颜色                $("tbody tr:odd").css("background-color","green");*/                //方式二:使用外部样式,记得引入外部CSS样式文件                //2.获取tbody下面的偶数行并设置背景颜色                $("tbody tr:even").addClass("even");                $("tbody tr:even").removeClass("even");                //3.获取tbody下面的奇数行并设置背景颜色                $("tbody tr:odd").addClass("odd");            });        </script>    </head>    <body>        <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">            <thead>                <tr>                    <th>编号</th>                    <th>姓名</th>                    <th>年龄</th>                </tr>            </thead>            <tbody>                <tr >                    <td>1</td>                    <td>张三</td>                    <td>22</td>                </tr>                <tr >                    <td>2</td>                    <td>李四</td>                    <td>25</td>                </tr>                <tr >                    <td>3</td>                    <td>王五</td>                    <td>27</td>                </tr>                <tr >                    <td>4</td>                    <td>赵六</td>                    <td>29</td>                </tr>                <tr >                    <td>5</td>                    <td>田七</td>                    <td>30</td>                </tr>                <tr >                    <td>6</td>                    <td>汾九</td>                    <td>20</td>                </tr>            </tbody>        </table>    </body></html>

三、使用JQ完成全选全不选

1.需求分析

在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选

全选全不选.png

2.技术分析
  • 需要使用jquery的选择器(id选择器、类选择器)
  • 需要使用jquery的属性操作方法 prop()
3.步骤分析
  • 第一步:引入jquery文件
  • 第二步:书写页面加载函数
  • 第三步:为上面的复选框绑定单击事件
  • 第四步:将下面所有的复选框的选中状态设置成跟上面的一致!
4.代码实现
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>使用jQuery完成复选框的全选和全不选</title>        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>        <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->        <script>            $(function(){                $("#select").click(function(){                    //获取下面所有的 复选框并将其选中状态设置跟编号的前面 复选框保持一致。                    //attr方法与JQ的版本有关,在1.8.3及以下有效。                    //$("tbody input").attr("checked",this.checked);                    $("tbody input").prop("checked",this.checked);                });            });        </script>    </head>    <body>        <table border="1" width="500" height="50" align="center" id="tbl" >            <thead>                <tr>                    <td colspan="4">                        <input type="button" value="添加" />                        <input type="button" value="删除" />                    </td>                </tr>                <tr>                    <th><input type="checkbox" id="select"></th>                    <th>编号</th>                    <th>姓名</th>                    <th>年龄</th>                </tr>            </thead>            <tbody>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>1</td>                    <td>张三</td>                    <td>22</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>2</td>                    <td>李四</td>                    <td>25</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>3</td>                    <td>王五</td>                    <td>27</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>4</td>                    <td>赵六</td>                    <td>29</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>5</td>                    <td>田七</td>                    <td>30</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>6</td>                    <td>汾九</td>                    <td>20</td>                </tr>            </tbody>        </table>    </body></html>

注意:attr在jquery1.11版本不适用,采用prop()来替代(在各个版本都适用)。

在jquery中如何调用方法?

元素.方法()

四、使用JQ完成省市二级联动

1.需求分析

省市二级联动.png

2.技术分析
2.1数组的遍历操作

方式一:each(callback)

$(function(){    // 全选/ 全不选    $("#checkallbox").click(function(){        var isChecked = this.checked;        //使用对象访问的方式进行遍历,语法:$().each(function(){})        $("input[name='hobby']").each(function(){            this.checked = isChecked;        });    });});

方式二:$.each(object,[callback])

$.each( [0,1,2], function(i, n){  alert( "Item #" + i + ": " + n );});
2.2文档处理操作

追加内容

apend:  A.append(B)  将B追加到A的内容的末尾处appendTo: A.appendTo(B)  将A加到B内容的末尾处
3.步骤分析
  • 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份
  • 第二步:创建二维数组来存储省份和城市
  • 第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
  • 第四步:接着遍历数组中的城市
  • 第五步:创建一个城市文本节点
  • 第六步:创建option元素节点
  • 第七步:将文本节点添加到元素节点中【使用JQ的文档操作方法】
  • 第八步:获取第二个下拉列表并将option元素节点添加进去
  • 第九步:清除第二个下拉列表的option内容
4.代码实现

JQ代码:

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>    <script>        $(function(){            //2.创建二维数组用于存储省份和城市            var cities = new Array(3);            cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");            cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");            cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");            cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");            $("#province").change(function(){                //10.清除第二个下拉列表的内容                $("#city").empty();                //1.获取用户选择的省份                var val = this.value;                //alert(val);                //3.遍历二维数组中的省份                $.each(cities,function(i,n){                    //alert(i+":"+n);                    //4.判断用户选择的省份和遍历的省份                    if(val==i){                        //5.遍历该省份下的所有城市                        $.each(cities[i], function(j,m) {                            //alert(m);                            //6.创建城市文本节点                            var textNode = document.createTextNode(m);                            //7.创建option元素节点                            var opEle = document.createElement("option");                            //8.将城市文本节点添加到option元素节点中去                            $(opEle).append(textNode);                            //9.将option元素节点追加到第二个下拉列表中去                            $(opEle).appendTo($("#city"));                        });                    }                });            });        });    </script>

HTML代码:

<td>    <!--2.确定事件,通过函数传参的方式拿到改变后的城市-->    <select id="province">        <option>--请选择--</option>        <option value="0">湖北</option>        <option value="1">湖南</option>        <option value="2">河北</option>        <option value="3">河南</option>    </select>    <select id="city">    </select></td>

五、使用JQ完成下拉列表左右选择

1.需求分析

下拉列表左右选择.png

2.分析
  • 第一步:确定事件(鼠标单击事件click)
  • 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
  • 第三步:将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
3.代码实现

JQ代码:

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script>    $(function(){        /*1.选中单击去右边*/        $("#selectOneToRight").click(function(){            $("#left option:selected").appendTo($("#right"));        });        /*2.单击全部去右边*/        $("#selectAllToRight").click(function(){            $("#left option").appendTo($("#right"));        });        /*3.选中双击去右边*/        $("#left option").dblclick(function(){            $("#left option:selected").appendTo($("#right"));        });    });</script>

HTML代码:

<td>    <span style="float: left;">        <font color="green" face="宋体">已有商品</font><br/>        <select multiple="multiple" style="width: 100px;height: 200px;" id="left">            <option>IPhone6s</option>            <option>小米4</option>            <option>锤子T2</option>        </select>        <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>        <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>    </span>    <span style="float: right;">        <font color="red" face="宋体">未有商品</font><br/>        <select multiple="multiple" style="width: 100px;height: 200px;" id="right">            <option>三星Note3</option>            <option>华为6s</option>        </select>        <p><a href="#" ><<</a></p>        <p><a href="#" ><<<</a></p>    </span></td>

六、使用JQ完成表单校验

表单校验.PNG

注意:使用validate校验,导入插件

JS代码:

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><!--引入validate插件js文件--><script type="text/javascript" src="../js/jquery.validate.min.js" ></script><!--引入国际化js文件--><script type="text/javascript" src="../js/messages_zh.js" ></script><script>    $(function(){        $("#registForm").validate({            rules:{                user:{                    required:true,                    minlength:3                },                password:{                    required:true,                    digits:true,                    minlength:6                },                repassword:{                    required:true,                    equalTo:"[name='password']"                },                email:{                    required:true,                    email:true                },                username:{                    required:true,                    maxlength:5                },                sex:{                    required:true                }            },            messages:{                user:{                    required:"用户名不能为空!",                    minlength:"用户名不得少于3位!"                },                password:{                    required:"密码不能为空!",                    digits:"密码必须是整数!",                    minlength:"密码不得少于6位!"                },                repassword:{                    required:"确认密码不能为空!",                    equalTo:"两次输入密码不一致!"                },                email:{                    required:"邮箱不能为空!",                    email:"邮箱格式不正确!"                },                username:{                    required:"姓名不能为空!",                    maxlength:"姓名不得多于5位!"                },                sex:{                    required:"性别必须勾选!"                }            },            errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label            success: function(label) { //验证成功后的执行的回调函数                //label指向上面那个错误提示信息标签label                label.text(" ") //清空错误提示消息                    .addClass("success"); //加上自定义的success类            }        });    });</script>

HTML代码:

<form action="#" method="get" id="registForm">    <div id="father">        <div id="form2">            <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">                <tr>                    <td colspan="2" >                                                          <font size="5">会员注册</font>   USER REGISTER                     </td>                </tr>                <tr>                    <td width="180px">                                                                                                               <label for="user" >用户名</label>                    </td>                    <td>                        <em style="color: red;">*</em>   <input type="text" name="user" size="35px" id="user"/>                    </td>                </tr>                <tr>                    <td>                                                                                                               密码                    </td>                    <td>                        <em style="color: red;">*</em>   <input type="password"  name="password" size="35px" id="password" />                    </td>                </tr>                <tr>                    <td>                                                                                                               确认密码                    </td>                    <td>                        <em style="color: red;">*</em>   <input type="password" name="repassword" size="35px"/>                    </td>                </tr>                <tr>                    <td>                                                                                                               Email                    </td>                    <td>                        <em style="color: red;">*</em>   <input type="text" name="email" size="35px" id="email"/>                    </td>                </tr>                <tr>                    <td>                                                                                                               姓名                    </td>                    <td>                        <em style="color: red;">*</em>   <input type="text" name="username" size="35px"/>                    </td>                </tr>                <tr>                    <td>                                                                                                               性别                    </td>                    <td>                        <span style="margin-right: 155px;">                            <em style="color: red;">*</em>   <input type="radio" name="sex" value="男"/>男                            <input type="radio" name="sex" value="女"/>女<em></em>                            <label for="sex" class="error" style="display: none;"></label>                        </span>                    </td>                </tr>                <tr>                    <td>                                                                                                               出生日期                    </td>                    <td>                        <em style="color: red;">*</em>   <input type="text" name="birthday"  size="35px"/>                    </td>                </tr>                <tr>                    <td>                                                                                                               验证码                    </td>                    <td>                        <em style="color: red;">*</em>   <input type="text" name="yanzhengma" />                        <img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>                    </td>                </tr>                <tr>                    <td colspan="2">                                                                                                                                                                                                            <input type="submit" value="注      册" height="50px"/>                    </td>                </tr>            </table>        </div>    </div></form>
0 0
原创粉丝点击