JQuery学习（三）
2019-06-03 本文已影响0人
nzdnllm
1.使用jQuery完成下拉列表左右选择
<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">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></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="#" ><<</a></p>
<p><a href="#" ><<<</a></p>
</span>
</td>
</tr>
（1）步骤
<1>确定事件（鼠标单击click）
<2>获取左侧下拉列表选中的option，[设置select 的id属性为left]
<3>将获取到的option添加到右侧的下拉列表中[设置select的id的属性为right]（append和appendTo的使用）
(2)重点
<1>选择器“：selected” 匹配所有选中的option元素；
链接：http://jquery.cuishifeng.cn/selected_1.html
代码示例：
<script>
$(function () {
//1.向右移动按钮绑定click事件
$("#selectOneToRight").click(function () {
$("#left option:selected").appendTo($("#right"));
});
//2.向左移动按钮绑定click事件
$("#selectAllToRight").click(function () {
$("#left option").appendTo($("#right"));
})
//3.向左移动按钮绑定click事件
$("#selectOneToLeft").click(function () {
$("#right option:selected").appendTo($("#left"));
});
//4.向左移动按钮绑定click事件
$("#selectAllToLeft").click(function () {
$("#right option").appendTo($("#left"));
})
})
</script>
2.使用JQ完成表单校验
示例图：
image.png
（1）插件validate.js是建立在JQuery之上的，所以需要先导入JQuery。
<!DOCTYPE html>
<html lang="en">
<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>
<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
}
}
})
})
</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>
（2）代码示例
<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,
minlength:3
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空",
minLength:"用户名不得少于三位"
},
password:{
required:"密码不能为空",
digits:"密码必须为数字",
minlength:"密码不得少于六位"
},
repassword:{
required:"确认密码不能为空",
equalTo:"两次输入密码不一致"
},
email:{
required:"邮箱输入不能为空",
email:"邮箱格式不正确"
},
username:{
required:"姓名不能为空",
minLength:"姓名不得少于三位"
},
sex:{
required:"性别必须勾选"
}
},
errorElement: "label", //用来创建错误提示标签
success:function (label) { //验证成功后执行的回掉函数
//label指向上面那个错误提示信息标签label
label.text("") //清空错误提示消息
.addClass("success");
}
});
});
</script>
3.总结
（1）定义对象（默认遵循规则）
var opEle -普通对象
var $opEle -定义JQuery对象
