jQuery学习第七课(jquery表单实例)
2014-04-09 21:48
218 查看
1.复选框的全选，全部选，反选
2.表中记录的搜索
3.textarea有固定的字符数
---------------------------------------------------------1------------------------------------------------------------
<body>
<div id="checkbox">
<input type="checkbox" name="" id="" checked="checked" />吃
<input type="checkbox" name="" id="" />喝
<input type="checkbox" name="" id="" />玩
<input type="checkbox" name="" id="" />乐
</div>
<div id="btn">
<input type="button" id="chkAll" value="全选" />
<input type="button" id="chkNone" value="全不选" />
<input type="button" id="chkReverse" value="反选" />
</div>
<script>
var chkAll = $('#chkAll');
var chkNone = $('#chkNone');
var chkReverse = $('#chkReverse');
var checkbox = $('#checkbox>:checkbox');
chkAll.click(function(){
// checkbox.attr('checked','checked');
checkbox.attr('checked',true);
});
chkNone.click(function(){
// checkbox.removeAttr('checked');
checkbox.attr('checked',false);
});
chkReverse.click(function(){
checkbox.each(function(){
$(this).attr('checked',!$(this).attr('checked'));
});
});
</script>
</body>
-------------------------------------------------------2--------------------------------------------------------------
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo2</title>
<style>
table{
width: 700px;
border: 1px solid #abcdef;
border-collapse: collapse;
}
tr{
height: 30px;
}
th,td{
border: 1px solid #abcdef;
text-align: center;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<table>
<tr id="thead">
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13911911911</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>18620561170</td>
</tr>
<tr>
<td>移动客服</td>
<td>女</td>
<td>10086</td>
</tr>
<tr>
<td>移动充值</td>
<td>女</td>
<td>13800138000</td>
</tr>
</table>
<input type="text" name="" id="" />
<input type="button" value="搜索" />
<script>
$('input[type=button]').click(function(){
var text = $('input[type=text]').val();
$('table tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
});
</script>
</body>
</html>
---------------------------------------------------------3-------------------------------------------------------------------
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<span>你还可以输入<strong style="color:red">140</strong>个字</span>
<script>
var maxLength = 140;
$('textarea').keyup(function(){
var l = $(this).val().length;
$('strong').text(maxLength-l);
if(parseInt($('strong').text())<0){
$('strong').text('0');
//alert($(this).val());
var val = $(this).val().substring(0,140);
// substr(不推荐使用，ECMAScript没有标准化substr()方法)
$(this).val(val);
}
});
</script>
</body>
2.表中记录的搜索
3.textarea有固定的字符数
---------------------------------------------------------1------------------------------------------------------------
<body>
<div id="checkbox">
<input type="checkbox" name="" id="" checked="checked" />吃
<input type="checkbox" name="" id="" />喝
<input type="checkbox" name="" id="" />玩
<input type="checkbox" name="" id="" />乐
</div>
<div id="btn">
<input type="button" id="chkAll" value="全选" />
<input type="button" id="chkNone" value="全不选" />
<input type="button" id="chkReverse" value="反选" />
</div>
<script>
var chkAll = $('#chkAll');
var chkNone = $('#chkNone');
var chkReverse = $('#chkReverse');
var checkbox = $('#checkbox>:checkbox');
chkAll.click(function(){
// checkbox.attr('checked','checked');
checkbox.attr('checked',true);
});
chkNone.click(function(){
// checkbox.removeAttr('checked');
checkbox.attr('checked',false);
});
chkReverse.click(function(){
checkbox.each(function(){
$(this).attr('checked',!$(this).attr('checked'));
});
});
</script>
</body>
-------------------------------------------------------2--------------------------------------------------------------
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo2</title>
<style>
table{
width: 700px;
border: 1px solid #abcdef;
border-collapse: collapse;
}
tr{
height: 30px;
}
th,td{
border: 1px solid #abcdef;
text-align: center;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<table>
<tr id="thead">
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>13911911911</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>18620561170</td>
</tr>
<tr>
<td>移动客服</td>
<td>女</td>
<td>10086</td>
</tr>
<tr>
<td>移动充值</td>
<td>女</td>
<td>13800138000</td>
</tr>
</table>
<input type="text" name="" id="" />
<input type="button" value="搜索" />
<script>
$('input[type=button]').click(function(){
var text = $('input[type=text]').val();
$('table tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
});
</script>
</body>
</html>
---------------------------------------------------------3-------------------------------------------------------------------
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<span>你还可以输入<strong style="color:red">140</strong>个字</span>
<script>
var maxLength = 140;
$('textarea').keyup(function(){
var l = $(this).val().length;
$('strong').text(maxLength-l);
if(parseInt($('strong').text())<0){
$('strong').text('0');
//alert($(this).val());
var val = $(this).val().substring(0,140);
// substr(不推荐使用，ECMAScript没有标准化substr()方法)
$(this).val(val);
}
});
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery中dom操作和事件的实例学习-表单验证
- jquery中dom操作和事件的实例学习-表单验证
- 静态方法与实例方法共享设计-jquery学习笔记
- JQuery应用实例学习(强烈推荐)
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
- 深入学习jQuery Validate表单验证（二）
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- （转）jQuery插件编写学习+实例——无限滚动
- 基于jQuery的表单填充实例
- 一个简单的jQuery插件制作，学习过程及实例
- 值得 Web 开发人员学习的20个 jQuery 实例教程
- 【jQuery学习----表单验证】简单的EasyValidator验证框架
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 【转】
- jQuery基本选择器 （实例及表单域 value 的获取）
- jquery验证表单中的单选与多选实例
- jquery学习笔记-购物车表单简单实现
- Jquery 插件学习实例1-插件制作说明与tableUI优化
- jQuery学习10---属性过滤选择器，表单选择器，遍历复选框