JQuery应用

最新推荐文章于 2022-09-22 11:00:00 发布

waectr

最新推荐文章于 2022-09-22 11:00:00 发布

阅读量764

点赞数

分类专栏： JavaWeb 文章标签： JQuery

本文链接：https://blog.csdn.net/waectr/article/details/81407128

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

案例一：创建省市二级联动

1.首先要确定事件，所选的事件应该是change事件，并绑定

2.通过JQ的选择器获取这个对象

3.创建二维数组来存储对应省份所涉及的城市

4.通过一层遍历寻找对应的城市，再通过遍历得到该城市的所有节点

5.每次遍历出一个节点就要创建一个城市文本节点，创建一个option元素，并将这个文本节点添加到对应的元素节点中

6.每次在遍历出所有城市之前还要清除之前所加入的所有城市的标签

这里涉及了：数组的创建城市的遍历 JQuery的DOM操作

对于数组创建：

var A=new Array();

A[0]=" ";

A[1]=" ";

或var A=new Array("A","B","C");

对于所有JQ遍历：

$(传入的数组,function(i,n){

alert(i+" "+n);

}); //i就是索引值，n就是所遍历出来的值

JQ的DOM操作：详见实例

实例：

$(function (){
   $("#province").change(function(){
       //获取用户所选择的值
       var val=this.value;
       //创建二维数组用于存储省份和城市
       var cities=new Array(3);
       cities[0]=new Array("A","B","C");
                 cities[1]=new Array("AA","BB","CC");
                 cities[2]=new Array("AAAA","BBBB","CCCC");
                 cities[3]=new Array("AAAAA","BBBBB","CCCCC");
                 $("#city").empty();
      //遍历二维数组中的省份
      $.each(cities,function (i,n){
         //判断用户选择的省份与遍历的省份
         if(val==i){
             //遍历该省份下的所有城市
            $.each(cities[i],function(i,m){
               //创建城市文本节点
               var textNode=document.createTextNode(m);
               //创建元素节点
               var opEle=document.createElement("option");
               //将文本节点添加到option元素节点中
               $(opEle).append(textNode);
               //将元素节点追加到下拉列表中
               $(opEle).appendTo($("#city"));
                         });
         }
                 });
             });
         });

此处只列举出了JS部分代码，HTML部分代码已经在上边列出

案例二：使用JQ来完成下拉列表的左右选择

实现步骤：

1，获取事件，鼠标单击事件click

2，获取所选择的下拉框的元素，将它添加到右边下拉框的元素（可以使用appendTo来操作）

实例：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>下拉列表左右选择</title>
      <script src="../JS/jquery-1.8.3.js" type="text/javascript"></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>

案例三：注册页面表单验证

这里要使用到插件validate

validate是一个插件，用来验证提交表单信息的插件，它是基于JQuery开发的，所以在使用时要先导入JQuery，导入它后，还需要导入它的中文版插件

确保他是中文版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <script type="text/javascript" src="../JS/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../JS/jquery.validate.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:8
                  }
                },
                messages:{
                    username:{
                        required:"用户名不能为空",
                        minlength:"用户名不得少于6位"
                    },
                    password:{
                        required:"密码不得为空",
                        digits:"密码必须是整数",
                        minlength:"密码不得少于六位",
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form action="#" id="checkForm">
        用户名：<input type="text" name="username"><br />
        密码：<input type="password" name="password"><br />
        <input type="submit">
    </form>
</body>
</html>

通过JQ的获取表单属性，再调用函数进行验证，在函数内部书写验证规则，

rules下写的是要求的规则，而messages下写的是出现错误时需要提示的信息

waectr

关注

0
点赞
踩
0

收藏

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

案例一：创建省市二级联动1.首先要确定事件，所选的事件应该是change事件，并绑定2.通过JQ的选择器获取这个对象3.创建二维数组来存储对应省份所涉及的城市4.通过一层遍历寻找对应的城市，再通过遍历得到该城市的所有节点5.每次遍历出一个节点就要创建一个城市文本节点，创建一个option元素，并将这个文本节点添加到对应的元素节点中6.每次在遍历出所有城市之前还要清除之前...
复制链接

扫一扫