jQuery学习第七课(jquery表单实例)

webdev2014

浏览: 680624 次

最近访客更多访客>>

u012363178

仙丹灵药

hellodota

WIN2333

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1653)

社区版块

存档分类

2014-04 ( 64)
2014-03 ( 97)
2014-02 ( 113)
更多存档...

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>

分享到：