JavaEE学习日记_JQuery下

最新推荐文章于 2024-04-25 13:56:39 发布

虫儿漫天飞

最新推荐文章于 2024-04-25 13:56:39 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/buglei123/article/details/102425108

版权

layout: post
title: JavaEE学习日记_JQuery下
subtitle: JQuery
date: 2018-01-22
author: ZL
header-img: img/20180122.jpg
catalog: true
tags:
- JQuery
- JavaEE

二级联动的例子

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>省市联动2</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script>
        //1.创建一个二维数组用于存储省份和城市
        var cities = new Array(3);
        cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
        cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
        cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
        cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");


        $(function () {
            $("#province").change(function () {
                //获取到省的value的值
                var value = this.value;

                //将之前添加的option删除
                $("#city option").detach();
                //$("#city option").remove();也可以
                //  $("#city").empty();也可以

                //遍历
                $.each(cities,function (i,n) {
                    if (i == value){
                        $.each(cities[i],function (j, m) {
                            var option = window.document.createElement("option");
                            var optionnode = window.document.createTextNode(m);
                            //option.appendChild(optionnode);
                            $(option).append(optionnode);
                            $("#city").append(option);
                        })
                    }
                })

            });

        })

    </script>
</head>
<body>
<select id="province">
    <option value=0>0</option>
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
</select>

<select id="city">

</select>
</body>
</html>

知识点：

删除函数（一个删除标签的内容，一个连标签都删除了）

JQuery的删除函数

empty():删除匹配的元素集合中所有的子节点。

empty函数例子

remove([expr]):从DOM中删除所有匹配的元素。

remove例子

detach和remove相同

遍历函数

jQuery.each(object, [callback])

image

each(callback)

image

文档处理操作

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

常见事件

例子：
事件绑定：

$(function() {
  $("#panel h5.head").bind("click", function() {
    var $content = $(this).next();
    if($content.is(":visible")) {
      $content.hide();
    } else {
      $content.show();
    }
  })
})

鼠标滑过

$(function() {
  $(".head").mouseover(function() {
    $(this).next().show();
  }).mouseout(function() {
    $(this).next().hide();
  })
})

事件移除

$(function() {
  $('#btn').bind("click", function() {
    $('#test').append("<p>我的绑定函数1</p>");
  });
  $('#delAll').click(function() {
    $('#btn').unbind("click");
  });
})

事件合成

$(function() {
  $(".head").hover(function() {
    $(this).next().show();
  }, function() {
    $(this).next().hide();
  })
})

$(function() {
  $(".head").toggle(function() {
    $(this).next().hide();
  }, function() {
    $(this).next().show();
  })
})


hover把鼠标放上去就行，toggle需要点击才行

Jquery validation表单校验

image

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>validate入门案例</title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
        <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
        <!--引入国际化js文件-->
        <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>
        
    </head>
    <body>
        <form action="#" id="checkForm">
            用户名：<input type="text" name="username" /><br />
            密码：<input type="password" name="password"/><br />
            <input type="submit"/>
        </form>
    </body>
</html>

虫儿漫天飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaEE学习日记_JQuery下

layout: posttitle: JavaEE学习日记_JQuery下subtitle: JQuerydate: 2018-01-22author: ZLheader-img: img/20180122.jpgcatalog: truetags:- JQuery- JavaEE二级联动的例子代码：&l...
复制链接

扫一扫