jQuery的应用

最新推荐文章于 2023-04-07 11:31:46 发布

我可能是个假开发

最新推荐文章于 2023-04-07 11:31:46 发布

阅读量1.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/csdn_gia/article/details/70304179

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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>

我可能是个假开发

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery的应用

jQuery的应用一、使用JQ完成首页的定时广告弹出1.需求分析在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】2.技术分析使用jQuery中的相关技术3.实现步骤第一步：引入jQuery相关的文件第二步：书写页面加载函数第三步：在页面加载函数中，获取显示广告图片的元素。第四步：设置定时操作(显示广告图片的函数
复制链接

扫一扫