5.1 《锋利的jQuery》jQuery对表单的操作
2024-08-31 16:02:09
tip1：
注意使用<label>的for标签，对应input的id。（for 属性规定 label 与哪个表单元素绑定。）
tip2:
注意：jquery从1.6版本开始，哪些属性应该用attr()访问，哪些应该用prop()访问。
第一个原则：只添加属性名称该属性就会生效应该使用prop();
第二个原则：只存在true/false的属性应该使用prop();
按照官方说明，如果是设置disabled和checked这些属性，应使用prop()方法，而不是attr()方法。
1、获取焦点和失去焦点改变样式
input:focus,textarea:focus{
border: 1px solid #ff3300;
background-color: #fcc;
}
/*IE6并不支持除超链接元素之外的:hover伪类选择符。*/
so，
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
// :input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素。
2、改变文本框/滚动条高度
var $comment=$("#commnet");
$(".bigger").click(function(){
if($comment.is(":animated")){
// if($comment.height()<500){
// $comment.animate({height:"+=50"},400);
// } //高度变大
$comment.animate({scrollTop:"-=50"},400); //向上滚动
}
});
$(".smaller").click(function(){
if($comment.is(":animated")){
// if($comment.height()>50){
// $comment.animate({height:"-=50"},400);
// } //高度变小
$comment.animate({scrollTop:"+=50"},400); //向下滚动
}
})
3、复选框应用
<form action="#" method="post" id="regForm">
你爱好的运动是？
<input type="checkbox" id="CheckAll">全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"> 足球
<input type="checkbox" name="items" value="篮球"> 篮球
<input type="checkbox" name="items" value="羽毛球"> 羽毛球
<input type="checkbox" name="items" value="乒乓球"> 乒乓球<br/>
<input type="button" id="CheckRev" value="反选">
<input type="button" id="send" value="提交">
</form>
$(function () {
// 全选/全不选
$("#CheckAll").click(function () {
$("[name=items]:checkbox").prop("checked", this.checked);
});
// 反选
$("#CheckRev").click(function () {
$("[name=items]:checkbox").each(function () {
this.checked = !this.checked;
})
});
// 提交
$("#send").click(function () {
var str = "你选择中的是:";
$("[name=items]:checkbox:checked").each(function () {
str += $(this).val() + "/";
})
alert(str);
})
// 跟全选联动
$("[name=items]:checkbox,#CheckRev").click(function(){ //#CheckRev添加了反选的联动
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#CheckAll").prop("checked",flag);
})
});
4、下拉框应用
<div class="fz">
<div class="content l">
<select multiple id="select1" style="width: 100px; height: 160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
<option value="8">选项8</option>
</select>
<div>
<span id="add">选中添加到右边>></span><br/>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="content l">
<select multiple id="select2" style="width: 100px; height: 160px;"></select>
<div>
<span id="remove"><<选中删除到左边</span><br/>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</div>
$(function () {
// 选中添加到右边
$("#add").click(function(){
var $option=$("#select1 option:selected");
// var $remove=$option.remove();
// $remove.appendTo("#select2");
// 删除和追加可以用appendTo()方法直接完成
$option.appendTo("#select2");
});
// 全部添加到右边
$("#add_all").click(function(){
var $option=$("#select1 option");
$option.appendTo("#select2");
});
// 双击添加到右边
$("#select1").dblclick(function(){
var $option=$("option:selected",this);
$option.appendTo("#select2");
})
});
5、表单验证：
<form method="post" action="">
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required">
</div>
<div class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required">
</div>
<div class="int">
<label for="personinfo">个人资料：</label>
<input type="text" id="personinfo">
</div>
<div class="sub">
<input type="submit" value="提交" id="send"> <input type="reset" id="res">
</div>
</form>
$(function () {
$("form :input.required").each(function(){
var $required=$("<strong class='red'>*</strong>");
$(this).parent().append($required);
});
$("form :input").blur(function(){
$parent=$(this).parent();
$parent.find(".formtips").remove();
// 验证用户名
if($(this).is("#username")){
if(this.value==""||this.value.length<6){
var errorMsg="请输入至少6位数的用户名";
$parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
}else{
var okMsg="输入正确";
$parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
}
}
// 验证邮箱
if($(this).is("#email")){
if(this.value==""||this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)){
var errorMsg="请输入正确的email";
$parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
}else{
var okMsg="输入正确";
$parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
}
}
}).keyup(function(){ //新增，keyup()用户每次松开按键的时候触发
$(this).triggerHandler("blur"); //trigger()不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，
// 即不能将光标定位到文本框上。而triggerHander("blur")只会触发为元素绑定的blur，而不触发浏览器默认的blur事件
}).focus(function(){ //新增，focus()元素得到焦点的时候触发
$(this).triggerHandler("blur");
});
// 表单提交
$("#send").click(function(){
$("form .required:input").trigger("blur");
var numError=$("form .onError").length;
if(numError){
return false;
}else{
alert("注册成功！");
}
})
});
最新文章
- Web APi之认证（Authentication）及授权（Authorization）【一】（十二）
- 【转】窗口之间的主从关系与Z-Order
- [Unity] 精灵动画制作中需要注意的一些问题
- model的封装+MJExtension 方便后续处理
- 利用ITextSharp导出PDF文件
- 一个通用onReady函数的实现
- echarts中，y轴文本倾斜
- 关于input在li列表中居中显示
- 浅析如何在Nancy中生成API文档
- js实用方法记录-js动态加载css、js脚本文件
- 时分秒计时器 js
- POJ 3667 Hotel(算竞进阶习题)
- Linux脚本程序
- Spring整合Redis&JSON序列化&Spring/Web项目部署相关
- android 退出程序解决内存释放so的问题
- MVC 、JDBC、SQL、DBMS、RDBMS、DDL、DML、DCL
- 【正则表达式】java应用正则表达式
- 【系统】supervisor支持多进程
- Java clone() 浅克隆与深度克隆
- java的多线程和并发库