JQuery入门（二）

最新推荐文章于 2018-01-17 22:02:13 发布

jiangtea

最新推荐文章于 2018-01-17 22:02:13 发布

阅读量417

点赞数

分类专栏： javaee 文章标签： jquery

本文链接：https://blog.csdn.net/jiangtea/article/details/76736444

版权

javaee 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、使用JQ完成省市二级联动
1.1、第一种遍历方式：
使用对象访问的方式进行遍历，语法：$().each(function(){})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                // 全选/ 全不选
                $("#checkallbox").click(function(){
                    var isChecked = this.checked;
                    //使用对象访问的方式进行遍历，语法：$().each(function(){})
                    $("input[name='hobby']").each(function(){
                        this.checked = isChecked;
                    });
                });
            });
        </script>
    </head>
        请选择您的爱好<br />
        <input type="checkbox" id="checkallbox" />全选/全部选<br />
        <input type="checkbox" name="hobby" value="足球"/> 足球
        <input type="checkbox" name="hobby" value="篮球"/> 篮球
        <input type="checkbox" name="hobby" value="游泳"/> 游泳
        <input type="checkbox" name="hobby" value="唱歌"/> 唱歌<br />
    <body>
    </body>
</html>

这里写图片描述

1.2、第二种遍历方式：
这里写图片描述

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

1.3、文档处理操作
追加内容：

apend:  A.append(B)  将B追加到A的内容的末尾处
appendTo: A.appendTo(B)  将A加到B内容的末尾处

删除元素中子节点：.empty()
从DOM中删除所用匹配的元素：remove()

1.4、
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                var cities = new Array(3);
                cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
                cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
                cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
                cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

                $("#province").change(function(){
                    //清除第二个下拉列表的内容
                    $("#city").empty();

                    var val = this.value;

                    $.each(cities,function(i,n){

                        if(val==i){
                            //遍历该省份下的所有城市
                            $.each(cities[i], function(j,m) {
                                //创建城市文本节点
                                var textNode = document.createTextNode(m);
                                //创建option元素节点
                                var opEle = document.createElement("option");
                                //将城市文本节点添加到option元素节点中去
                                $(opEle).append(textNode);
                                //将option元素节点追加到第二个下拉列表中去
                                $(opEle).appendTo($("#city"));
                            });
                        }
                    });

                });
            });
        </script>
    </head>
    <body>
        <tr>
            <td>籍贯</td>
            <td>
                <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>
        </tr>
    </body>
</html>

2、JQ实现下拉列表左右选择
这里写图片描述


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉列表左右选择</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                /*选中单击去右边*/
                $("#selectOneToRight").click(function(){
                    $("#left option:selected").appendTo($("#right"));
                });

                /*单击全部去右边*/
                $("#selectAllToRight").click(function(){
                    $("#left option").appendTo($("#right"));
                });

                /*选中双击去右边*/
                $("#left option").dblclick(function(){
                    $("#left option:selected").appendTo($("#right"));
                });
            });
        </script>
    </head>
    <body>
        <table border="1" width="600" align="center">
            <tr>
                <td>
                    分类名称
                </td>
                <td>
                    <input type="text" name="cname" value="手机数码"/>
                </td>
            </tr>
            <tr>
                <td>
                    分类描述
                </td>
                <td>
                    <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
                </td>
            </tr>
            <tr>
                <td>
                    分类商品
                </td>
                <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">&gt;&gt;</a></p>
                        <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</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="#" >&lt;&lt;</a></p>
                        <p><a href="#" >&lt;&lt;&lt;</a></p>
                    </span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type='submit' value="修改"/>
                </td>
            </tr>
        </table>
    </body>
</html>

3、小结
3.1、页面未加载执行失败

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>页面未加载执行失败</title>
        <script type="text/javascript">
            document.getElementById("panel").onclick = function() {
                alert("元素已经加载完毕 !");
            }
        </script>
    </head>
    <body>
        <div id="panel">click me.</div>
    </body>

</html>

原因：因为dom还未加载完毕。
解决：
方法一：将Js代码移到需要操作的html代码后面，一般建议放到body的外面
方法二：将Js代码放到一个页面加载函数中去：

window.onload = function(){};

3.2、事件绑定，点击展开
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>点击展开</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function() {
                $("#panel h5.head").bind("click", function() {//事件绑定bind，单击
                    var $content = $(this).next();//next：查找下一个，（div）
                    if($content.is(":visible")) {//is：如果。如果div显示就隐藏
                        $content.hide();
                    } else {
                        $content.show();
                    }
                })
            })
        </script>
    </head>

    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>
</html>

3.3、事件绑定，鼠标滑过
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>鼠标滑过</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function() {
                $(".head").mouseover(function() {
                    $(this).next().show();
                }).mouseout(function() {
                    $(this).next().hide();
                })
            })
        </script>
    </head>
    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>
</html>

3.4、事件的移除
这里写代码片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>事件移除</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 13px;
                line-height: 130%;
                padding: 60px;
            }

            p {
                width: 200px;
                background: #888;
                color: white;
                height: 16px;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function() {
                $('#btn').bind("click", function() {
                    $('#test').append("<p>我的绑定函数1</p>");
                });
                $('#delAll').click(function() {
                    $('#btn').unbind("click");
                });
            })
        </script>
    </head>

    <body>
        <button id="btn">点击我</button>
        <div id="test"></div>
        <button id="delAll">删除所有事件</button>
    </body>
</html>

3.5、事件合成
hover：实现鼠标移动显示和隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>合成事件hover</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function() {
                $(".head").hover(function() {
                    $(this).next().show();
                }, function() {
                    $(this).next().hide();
                })
            })
        </script>
    </head>

    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>
</html>

toggle：实现点击显示和隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>合成事件toggle</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function() {
                $(".head").toggle(function() {
                    $(this).next().hide();
                }, function() {
                    $(this).next().show();
                })
            })
        </script>
    </head>

    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>

</html>

4、JQ完成表单校验
4.1、使用validation插件完成对表单数据的校验
官网：

https://jqueryvalidation.org/

4.2、：

required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script type="text/javascript" src="js/jquery.validate.min.js" ></script>
    <script type="text/javascript" src="js/messages_zh.js" ></script>
    <script>
        $(function(){
            $("#checkForm").validate({
                rules:{
                    username:{
                        required:true,
                        minlength:6
                    },
                    password:{
                        required:true,
                        digits:true,
                        minlength:6
                    }
                },
                messages:{
                    username:{
                        required:"用户名不能为空！！",
                        minlength:"用户名不得少于6位！！"
                    },
                    password:{
                        required:"密码不能为空！！",
                        digits:"密码必须为整数！！",
                        minlength:"密码不得少于6位！！"
                    }
                }
            });
        });
    </script>
    <body>
        <form action="#" id="checkForm">
            用户名:<input type="text" name="username"/><br />
            密码：<input type="password" name="password"/><br />
            <input type="submit"/>
        </form>
    </body>
</html>

<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>