jQuery的表单操作
1.表单选择框
运行效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单操作</title>
</head>
<body>
<div id="checkbox">
<input type="checkbox" />吃
<input type="checkbox" />喝
<input type="checkbox" />玩
<input type="checkbox" />乐
</div>
<div id="btn">
<input type="button" id="checkall" value="全选" />
<input type="button" id="checknone" value="全不选" />
<input type="button" id="checkinverse" value="反选" />
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
<script>
//获取id为checkbox的元素下查找input的type=checkbox的子元素
var Checkbox = $('#checkbox>:checkbox');
$('#checkall').click(function(){
//Checkbox.attr('checked','checked');
Checkbox.attr('checked',true);
})
$('#checknone').click(function(){
//两种方法移除checked属性，常用第二种，因为checked是一个boolean值
//Checkbox.removeAttr('checked');
Checkbox.attr('checked',false);
})
$('#checkinverse').click(function(){
//加上！是的true变false，false变true
Checkbox.each(function(){
this.checked = !this.checked;
})
</script>
</html>
2.页面搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面搜索实例</title>
</head>
<link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<style>
#form{
width: 200px;
}
</style>
<body>
<table class="table table-bordered">
<tr class="head">
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<th>张三</th>
<th>男</th>
<th>123456</th>
</tr>
<tr>
<th>李四</th>
<th>男</th>
<th>654321</th>
</tr>
<tr>
<th>王五</th>
<th>女</th>
<th>612345</th>
</tr>
</table>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</body>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
<script>
$('button').click(function(){
//:contains 选择器选取包含指定字符串的元素。
var text = $('input[type=text]').val();
$('table tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
//输入搜索内容后清空搜索框的值
$('input[type=text]').val("");
})
</script>
</html>
3.仿微博发布框，主要是限制文本域中的字符数，用到了substring()截取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿微博发布框</title>
</head>
<link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css" />
<body>
<textarea class="form-control" rows="3"></textarea>
<span>你还可以输入<strong style="color: red;">140</strong>个字</span>
</body>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
<script>
var maxLength = 140;
$('textarea').keyup(function(){
var l = $(this).val().length;//获取当前文本域内文字的长度
$('strong').text(maxLength-l);
if(parseInt($('strong').text())<0){
$('strong').text('0');
//截取0-140个字符
var val = $(this).val().substring(0,140);
//截取到的字符放到textarea中
$(this).val(val);
}
});
</script>
</html>
浙公网安备 33010602011771号