jQuery学习第七课(jquery表单实例)
来源:互联网 发布:matlab遗传算法使用 编辑:程序博客网 时间:2024/05/29 14:00
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>
- jQuery学习第七课(jquery表单实例)
- [JQuery] JQuery第七课
- jQuery 学习第七课 扩展jQuery的功能 插件开发
- jQuery表单操作学习
- jquery表单验证实例 非常好
- jquery表单验证实例【经典】
- jquery阻止表单提交实例
- jquery表单提交简单实例
- jquery ajax提交表单实例
- jquery学习第七番 ajax
- jQuery基础教程第七章学习
- 深入学习jQuery选择器系列第七篇——表单选择器
- jQuery菜鸟学习实例
- Jquery实战学习--表单选择器
- jQuery-Mobile学习(表单)
- JQuery学习笔记-表单选择器
- jQuery学习-表单验证功能
- jquery表单验证新手明了实例
- 1.常用命令
- Grub 很好的介绍文章,记录之
- iOS 图形处理 翻译
- 转载——win7笔记本忘记密码怎么办
- 毕业设计Notes -- 2
- jQuery学习第七课(jquery表单实例)
- hdu 1018 Big Number
- Android dispatchTouchEvent介绍
- ArcGIS For JavaScript API Bookmark Widget(书签组件)————(二十一)
- ios Instruments 内存泄露
- LeetCode Subsets 和 LeetCode Subsets II
- Excel 2010高级应用-柱形图(一)
- LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别
- java时间函数