Jquery——表单控制
对checkbox的控制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="file:///F|/javascript/jquery-1.3.2.min.js"></script>
<title>无标题文档</title>
<script>
$(document).ready(function(){
$("#checkedAll").click(function(){
$('[name=items]:checkbox').attr('checked',true);
});
$("#checkedNo").click(function(){
$('[name=items]:checkbox').attr('checked',false);
});
$("#checkRev").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked=!this.checked;
});
});
$("#send").click(function(){
var str="你选中的是:\r\n";
$('[name=items]:checkbox:checked').each(function(){
str +=$(this).val()+"\r\n";
});
alert(str);
});
});
</script>
</head>
<body>
<form>
你爱好的运动时?<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="button" id="checkedAll" value="全选" />
<input type="button" id="checkedNo" value="全不选" />
<input type="button" id="checkRev" value="反选" />
<input type="button" id="send" value="提交" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="file:///F|/javascript/jquery-1.3.2.min.js"></script>
<title>无标题文档</title>
<script>
$(document).ready(function(){
$("#checkedAll").click(function(){
$('[name=items]:checkbox').attr('checked',this.checked);
});
$('[name=items]:checkbox').click(function(){
var flag=true;
$('[name=items]:checkbox').each(function(){
if(!this.checked){
flag=false;
}
});
$("#checkedAll").attr('checked',flag);
});
});
</script>
</head>
<body>
<form>
<input type="checkbox" id="checkedAll"/>全选/全不选
你爱好的运动时?<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
</form>
</body>
</html>
option的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="file:///F|/javascript/jquery-1.3.2.min.js"></script>
<title>无标题文档</title>
<script>
$(document).ready(function(){
//选中的移到右边
$("#add").click(function(){
var $options=$('#select1 option:selected');
$options.appendTo("#select2");
});
//全部移到右边
$("#add_all").click(function(){
var $options=$('#select1 option');
$options.appendTo("#select2");
});
//选中的移到左边
$("#remove").click(function(){
var $options=$('#select2 option:selected');
$options.appendTo("#select1");
});
//全部移到左边
$("#remove_all").click(function(){
var $options=$('#select2 option');
$options.appendTo("#select1");
});
//双击某个option移到右边
$("#select1").dblclick(function(){
var $options=$("option:selected",this);
$options.appendTo("#select2");
});
//移到左边
$("#select2").dblclick(function(){
var $options=$("option:selected",this);
$options.appendTo("#select1");
});
});
</script>
</head>
<body>
<div class="centent" style="float:left">
<select multiple="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>
</select>
<div>
<span id="add">选中添加到右边</span><br/>
<span id="add_all">全部添加到右边</span>
</div>
</div>
<div class="centent" >
<select multiple="multiple" id="select2" style="width:100px;height:160px;"></select>
<div>
<span id="remove">选中删除到左边</span><br/>
<span id="remove_all">全部选中删除到左边</span>
</div>
</div>
</body>
</html>
对表单：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("form :input.request").each(function(){
var $required=$("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
$('form :input').blur(function(){
var $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>');
}
}
});
$('#send').click(function(){
$("form .required:input").trigger('blur');
var numError=$('form .onError').length;
if(numError){
alert("请重新填写");
return false;
}
alert("注册成功，密码已经发送到你的邮箱");
});
});
</script>
</head>
<body>
<form method="post" action="">
<div class="int">
<label for="username">用户名:</label>
<input type="text" id="username" class="request"/>
</div>
<div class="int">
<label for="email">邮箱:</label>
<input type="text" id="email" class="request"/>
</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" value="重置" id="res"/>
</div>
</form>
</body>
</html>
表格控制：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
$(this).addClass('selected')
.siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});
});
</script>
<style type="text/css">
.even{background-color:#fff39c;}
.odd{background-color:#ffff33;}
.selected{
background-color:#ffeecc;
}
td{
cursor:pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
$(this).addClass('selected')
.siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});
//实现隐藏
$('tr.parent').click(function(){
$(this).toggleClass("selected")
.siblings('.child_'+this.id).toggle();
});
});
</script>
<style type="text/css">
.even{background-color:#fff39c;}
.odd{background-color:#ffff33;}
.selected{
background-color:#ffeecc;
}
td{
cursor:pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计</td></tr>
<tr class="child_row_01">
<td><input type="radio"/></td><td>李四</td><td>男</td><td>浙江</td>
</tr>
<tr class="child_row_01">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr class="child_row_01">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr class="parent" id="row_02"><td colspan="3">开发组</td></tr>
<tr class="child_row_02">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr class="child_row_02">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr class="child_row_02">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
</tbody>
</table>
</body>
</html>
实现表格内容筛选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
$(this).addClass('selected')
.siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});
$("#filter").keyup(function(){
$("table tbody tr").hide()
.filter(":contains('"+($(this).val())+"')").show();
});
});
</script>
<style type="text/css">
.even{background-color:#fff39c;}
.odd{background-color:#ffff33;}
.selected{
background-color:#ffeecc;
}
td{
cursor:pointer;
}
</style>
</head>
<body>
<input type="text" id="filter"/>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计</td></tr>
<tr class="child_row_01">
<td><input type="radio"/></td><td>李四</td><td>男</td><td>浙江</td>
</tr>
<tr class="child_row_01">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr class="child_row_01">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr class="parent" id="row_02"><td colspan="3">开发组</td></tr>
<tr class="child_row_02">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr class="child_row_02">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
<tr class="child_row_02">
<td><input type="radio"/></td><td>张三</td><td>男</td><td>浙江</td>
</tr>
</tbody>
</table>
</body>
</html>
字体变大变小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("span").click(function(){
//返回的是xxpx
var thisEle=$("#para").css("font-size");
//把xxpx变为xx，第二个参数表示是10进制
var textFontSize = parseFloat(thisEle,10);
//获取xxpx中的px
var unit=thisEle.slice(-2);
var cName=$(this).attr("class");
if(cName=="bigger"){
textFontSize +=2;
}else if(cName =="smaller"){
textFontSize -=2;
}
//进行字符串拼接
$("#para").css("font-size",textFontSize+unit);
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="msg">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<p id="para">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</p>
</body>
</html>
