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>
知识点:
删除函数(一个删除标签的内容,一个连标签都删除了)
![6262743-544c4a68b59f1571.png](https://i-blog.csdnimg.cn/blog_migrate/aeb7e77670869bcd358131ff39109df9.png)
JQuery的删除函数
empty():删除匹配的元素集合中所有的子节点。
![6262743-8eed69d3da6819ab.png](https://i-blog.csdnimg.cn/blog_migrate/12bf942dfb9ef9250885ddc0baf142a5.png)
empty函数例子
remove([expr]):从DOM中删除所有匹配的元素。
![6262743-e99dcd9e570d4f50.png](https://i-blog.csdnimg.cn/blog_migrate/68e0a86e83e8eee78275d1fa470ad8ef.png)
remove例子
detach和remove相同
遍历函数
jQuery.each(object, [callback])
![6262743-d602cd6316e386db.png](https://i-blog.csdnimg.cn/blog_migrate/d12078be495ebc83f2d20bea0d9f19f8.png)
image
each(callback)
![6262743-c6c29fb0e20ef4ae.png](https://i-blog.csdnimg.cn/blog_migrate/1287bf5f1a193ab5aa2c6318614bbca6.png)
image
文档处理操作
apend: A.append(B) 将B追加到A的内容的末尾处
appendTo: A.appendTo(B) 将A加到B内容的末尾处
常见事件
![6262743-f653e530c19f209f.png](https://i-blog.csdnimg.cn/blog_migrate/68b5c1a88f63180987a9e360f5db951b.png)
常见事件
例子:
事件绑定:
$(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表单校验
![6262743-a3fa07b0c26e4080.png](https://i-blog.csdnimg.cn/blog_migrate/b3105fb2046f0c5a72a496bb6cc09ab4.png)
image
![6262743-ce7f8cc58356c342.png](https://i-blog.csdnimg.cn/blog_migrate/dff42cd7824eac8b84129924fc8851d1.png)
image
![6262743-1d7d7ea3e2d385d0.png](https://i-blog.csdnimg.cn/blog_migrate/f46f9e69de970c947e0838fbc6c90024.png)
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>