【JAVAWEB学习笔记】06_jQuery基础

接05的学习笔记。

四、使用JQ完成省市二级联动

1.需求分析

使用jquery完成省市二级联动

2.技术分析

2.1数组的遍历操作

方式一：

$(function(){

// 全选/ 全不选

$("#checkallbox").click(function(){

var isChecked = this.checked;

//使用对象访问的方式进行遍历，语法：$().each(function(){})

$("input[name='hobby']")[ThinkPad1] .each(function(){

this.checked = isChecked;

});

});

});

---

被遍历的对象(是一个集合)

方式二：

$.each( [0,1,2][ThinkPad1] , function(i[ThinkPad2] , n[ThinkPad3] ){

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.代码实现

<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)[h1] .append(textNode);

//9.将option元素节点追加到第二个下拉列表中去

$(opEle).appendTo($("#city"));

});

}

});

});

});

</script>

---

[h1]注意DOM无法使用JQ的方法 所以要进行$()来转换

五、使用JQ完成下拉列表左右选择

1.需求分析

见图片文字部分内容。

2.分析

第一步：确定事件(鼠标单击事件click)

第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]

第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

3.代码实现

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

六、使用JQ完成表单校验

1.需求分析

使用插件进行校验。

2.技术分析

这里使用validation插件完成对表单数据的校验

一款优秀的表单验证插件——validation插件

特点：

l  内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则

l  自定义验证规则：可以很方便的自定义验证规则

l  简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能

l  实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

下载：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

快速入门：

第一步：引入jquery库和validation插件

案例：

<script type="text/javascript" src="../../js/jquery-1.11.0.min.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(){

$("#registForm").validate({

rules:{

user:{

required:true,

minlength:2

},

password:{

required:true,

digits:true,

minlength:6

},

repassword:{

required:true,

digits:true,

minlength:6,

equalTo:"[name='password']"

},

email:{

required:true,

email:true

},

username:{

required:true,

minlength:2

},

sex:{

required:true

}

},

messages:{

user:{

required:"用户名不能为空!",

minlength:"用户名不得少于2个字符!"

},

password:{

required:"密码不能为空!",

digits:"密码必须是数字!",

minlength:"密码长度不得低于6位!"

},

repassword:{

required:"确认密码不能为空!",

digits:"密码必须是数字!",

minlength:"密码长度不得低于6位!",

equalTo:"两次密码不一致!"

},

email:{

required:"邮箱不能为空!",

email:"邮箱格式不正确!"

},

username:{

required:"姓名不能为空!",

minlength:"姓名不得少于2个字符!"

},

sex:{

required:"性别必须勾选!"

}

},

errorElement: "label", //用来创建错误提示信息标签

success: function(label) { //验证成功后的执行的回调函数

//label指向上面那个错误提示信息标签label

label.text(" ") //清空错误提示消息

.addClass("success"); //加上自定义的success类

}

});

})

</script>