《锋利的jQuery》的读书笔记 -- jQuery应用实例
2017-11-12 10:45
274 查看
1. 列表精简显示与完全显示
点击按钮进行简化显示与完全显示，简化显示时部分内容高亮显示<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.showmore a {cursor: pointer;}
.prompt {font-weight: bold;}
.SubCategoryBox, .showmore {width: 370px; }
.SubCategoryBox ul {padding: 0;}
.SubCategoryBox li {display: inline-block; width: 100px; margin-right: 20px;}
.SubCategoryBox li {color: #04D; }
.SubCategoryBox li a:hover {color: #f60;}
.showmore {text-align: center;}
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 默认精简显示，显示前面6个选项和最后一个
var $category = $('.SubCategoryBox li:gt(5):not(:last)');
$category.hide();
// 含有指定内容的高亮显示
$('ul li').filter(':contains("佳能"),:contains("索尼"),:contains("三星")').addClass('prompt');
var $btn = $('div.showmore > a');
$btn.click(function(){
if($category.is(':hidden')) {
$category.show();
$btn.find('span').text('精简显示品牌');
$('ul li').filter(':contains("佳能"),:contains("索尼"),:contains("三星")').removeClass('prompt');
} else {
$category.hide();
$btn.find('span').text('全部显示品牌');
$('ul li').filter(':contains("佳能"),:contains("索尼"),:contains("三星")').addClass('prompt');
}
return false; //事件不向上传递
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a></li>
<li><a href="#">索尼</a></li>
<li><a href="#">三星</a></li>
<li><a href="#">尼康</a></li>
<li><a href="#">松下</a></li>
<li><a href="#">卡西欧</a></li>
<li><a href="#">富士</a></li>
<li><a href="#">柯达</a></li>
<li><a href="#">宾得</a></li>
<li><a href="#">理光</a></li>
<li><a href="#">奥林巴斯</a></li>
<li><a href="#">明基</a></li>
<li><a href="#">爱国者</a></li>
<li><a href="#">其他品牌相机</a></li>
</ul>
</div>
<div class="showmore">
<a ><span>显示全部品牌</span></a>
</div>
</body>
</html>2. 自定义tooltip
html自带的tooltip显示比较慢，而且无法实现复杂的tooltip。可以自己实现类似功能<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font: 80% Arial, Helvetica, sans-serif;
}
#tooltip {
position: fixed;
border: 1px solid #cccccc;
border-radius: 3px;
font-size: 12px;
padding: 5px;
background-color: #ffffff; //chrome 60上测试不设置背景颜色时，默认为透明背景，会与下面的内容重叠。因此设置背景色为白色
z-index: 9999;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var x = 10;
var y = 20;
$('a.tooltip').mouseover(function(e) {
var $self = $(this);
// 将title属性的值保存到另外的自定义属性，然后移除title属性（避免自定义tootlip与原有的tooltip同时出现）
$self.attr('mytitle', $self.attr('title'))
.removeAttr('title');
// 添加自定义tooltip（这里只是简单的文本显示，可以根据实际情况换成图片或者其它内容）
var $div = $('<div id="tooltip"></div>');
$div.text($self.attr('mytitle'));
$('body').append($div);
// 将自定义tooltip放置到光标附近
$div.css({ "left": e.pageX + x, "top": e.pageY + y })
.show('fast');
}).mouseout(function() {
// 鼠标移出时，移除自定义tooltip，将内容重新设置到titlte属性
var $self = $(this);
$self.attr('title', $self.attr('mytitle'))
.removeAttr('mytitle');
$('#tooltip').remove();
}).mousemove(function(e){
// 自定义tootltip跟随鼠标移动
$('#tooltip').css({ "left": e.pageX + x, "top": e.pageY + y });
});
});
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2</a></p>
<p><a href="#" title="这是自带提示1">自带提示1</a></p>
<p><a href="#" title="这是自带提示2">自带提示2</a></p>
</body>
</html>3. 层级结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 22px;
font-family: "\5b8b\4f53", "Arial Narrow";
background: #fff;
}
.box {
width: 160px;
margin: 0 auto;
overflow: hidden;
}
ul,
li {
list-style-type: none;
}
.menu {
overflow: hidden;
border: 1px solid #C4D5DF;
padding: 0;
}
.menu li.level1 {
color: #5893B7；
}
.menu li a {
text-decoration: none;
}
.menu li.level1>a {
display: block;
height: 28px;
line-height: 28px;
text-indent: 14px;
background: #EBF3F8;
border-top: 1px solid #C4D5DF;
font-weight: 700;
}
.menu ul.level2 {
display: none;
}
.menu ul.level2 a {
display: block;
height: 28px;
line-height: 28px;
background: #ffffff;
text-indent: 18px;
font-weight: 400;
}
.menu li.level1 a.current {
background: #B1D7EF;
}
.menu ul.level2 a:hover {
color: #f60;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.menu li.level1 > a').click(function() {
if ($(this).next().is(':hidden')) {
$(this).addClass('current') // 给当前元素添加'current'样式
.next().show() // 下一个元素显示
.parent().siblings().children('a').removeClass('current') // 父元素的兄弟元素的子元素<a>移除current样式
.next().hide(); // //它们的下一个元素隐藏
}
return false;
});
$('.menu li.level1 > a:eq(0)').click(); //默认显示第一个
});
</script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#">衬衫</a>
<ul class="level2">
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">短袖T恤</a></li>
<li><a href="#">长袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#">卫衣</a>
<ul class="level2">
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">短袖T恤</a></li>
<li><a href="#">长袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#">裤子</a>
<ul class="level2">
<li><a href="#">短裤</a></li>
<li><a href="#">休闲裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
</body>4. 内容分屏显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var num = 12; // 内容数目
var numVisible = 4;// 一屏显示的·内容的数目
var maxIndex = Math.ceil(num / numVisible); //屏数
var curIndex = 0; //当前第几屏，从0开始计数
var widthVisible = parseInt($('div.v_content').width());//一屏的宽度
// 上一屏
$('.change_btn span.prev').click(function() {
var $v_content_list = $('div.v_content_list');
if (!$v_content_list.is(':animated')) {
if (curIndex == 0) {
// 当前已经是第一页，点击后回到最后一页
curIndex = maxIndex;
} else {
curIndex -= 1;
}
$v_content_list.animate({
'left': -1 * (curIndex * widthVisible)
}, 'slow');
$(this).parent().prev().find('span:eq(' + curIndex + ')').addClass('current')
.siblings().removeClass('current');
}
});
$('.change_btn span.next').click(function() {
var $v_content_list = $('div.v_content_list');
if (!$v_content_list.is(':animated')) {
if (curIndex == maxIndex) {
// 当前已经是最后一页，点击后回到第一页
curIndex = 0;
} else {
curIndex += 1;
}
$v_content_list.animate({
'left': -1 * (curIndex * widthVisible)
}, 'slow');
$(this).parent().prev().find('span:eq(' + curIndex + ')').addClass('current')
.siblings().removeClass('current');
}
});
});
</script>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通动画">卡通动画</h2>
<div class="highlight_tip">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="change_btn">
<span class="prev">上一页</span>
<span class="next">下一页</span>
</div>
<em>
<a href="#">更多</a>
</em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="img/01.jpg" alt="海贼王"></a>
<h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王"></a>
<h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王"></a>
<h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王"></a>
<h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦"></a>
<h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦"></a>
<h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦"></a>
<h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦"></a>
<h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者"></a>
<h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者"></a>
<h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者"></a>
<h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者"></a>
<h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠"></a>
<h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠"></a>
<h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠"></a>
<h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠"></a>
<h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
</ul>
</div>
</div>
</div>
</body>其中style.css如下
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#2B93D2; text-decoration:none; }
a:hover { color:#E31E1C; text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
/* v_show style */
.v_show { width:595px; margin:20px 0 1px 60px; }
.v_caption { height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; }
.v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }
.v_caption .cartoon { background-position: 0 -100px; }
.v_caption .variety { background-position:-100px -100px; }
.highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }
.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }
.highlight_tip .current { background-position:0 -220px; }
.change_btn { float:left; margin:7px 0 0 10px; }
.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; }
.change_btn .prev { background-position:0 -400px; }
.change_btn .next { width:31px; background-position:-30px -400px; }
.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }
.v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }
.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }
.v_content ul {float:left;}
.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }
.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }
.v_content ul li img { width:128px; height:96px; }
.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }
.v_content ul li h4 a { display:inline !important; height:auto !important; }
.v_content ul li span { color:#666; }
.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }5. 复选框全选/全不选
<!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 charset="utf-8">
<title>复选框全选/反选</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#CheckedAll').click(function(){
$('[name=items]:checkbox').prop('checked', $(this).prop('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 method="post" action="">
你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球<br/>
<input type="button" id="send" value="提 交" />
</form>
</body>6. select实例
<!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 charset="utf-8">
<title>下拉框左右选择</title>
<style type="text/css">
div.content select {
width:100px;
height:160px;
}
* { margin:0; padding:0; }
div.content {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
$('#select > option:selected').appendTo($('#select2'));
return false;
});
$('#remove').click(function(){
$('#select2 > option:selected').appendTo($('#select'));
return false;
});
$('#add_all').click(function(){
$('#select > option').appendTo($('#select2'));
return false;
});
$('#remove_all').click(function(){
$('#select2 > option').appendTo($('#select'));
return false;
});
});
</script>
</head>
<body>
<div class="content">
<select multiple="multiple" id="select">
<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>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="content">
<select multiple="multiple" id="select2">
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>7. 表单验证
<!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 charset="utf-8">
<title>表单验证</title>
<style type="text/css">
body {
font: 12px/19px Arial, Helvetica, sans-serif;
color: #666;
}
form div {
margin: 5px 0;
}
.int label {
float: left;
width: 100px;
text-align: right;
}
.sub {
padding-left: 100px;
}
.sub input {
margin-right: 10px;
}
.formtips {
width: 200px;
margin: 2px;
padding: 2px;
}
.onError {
background: #FFE0E9 url(./img/reg3.gif) no-repeat 0 center;
padding-left: 25px;
}
.onSuccess {
background: #E9FBEB url(./img/reg4.gif) no-repeat 0 center;
padding-left: 25px;
}
.high {
color: red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('div.int :text').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>');
}
} else if ($(this).is('#email')) {
if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">' + errorMsg + '</span>');
} else {
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
}
}
}).keyup(function() {
$(this).triggerHandler('blur'); //不能使用trigger('blur'),这样会导致失去焦点
}).focus(function() {
$(this).triggerHandler('blur'); //不能使用trigger('blur'),这样会导致失去焦点
});
// 提交，最终验证
$('#send').click(function() {
$('form input.required').trigger('blur');
var numError = $('form .onError').length;
if (numError) {
$('form .onError').each(function() {
var $input = $(this).prev();
if (!$input.is(':animated')) {
//$input.css({'border-color': '#FF0000'});
// 抖动效果
for (var i = 1; 4 >= i; i++) {
$input.animate({ 'margin-left': -(10 - 5 * i) }, 50)
.animate({ 'margin-left': (10 - 5 * i) }, 50)
.animate({ 'margin-left': 0 }, 50);
}
//$input.css({'border-color': 'initial'});
}
});
return false;
}
alert('注册成功，密码已发送到你的邮箱，请查收.');
});
// 重置
$('#res').click(function() {
$('.formtips').remove();
});
});
</script>
</head>
<body>
<form method="post" action="">
<div class="int">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮箱:</label>
<input type="text" name="email" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">个人资料:</label>
<input type="text" name="personinfo" id="personinfo" class="required" />
</div>
<div class="sub">
<input type="submit" id="send" value="提交" />
<input type="reset" id="res">
</div>
</form>
</body>8. 表格基本操作
<!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 charset="utf-8">
<title>表格</title>
<style type="text/css">
.even {
background: #FFF38F;
}
.odd {
background: #FFFFFF;
}
td {
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
th {
font: bold 12px/17px Arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
}
.selected {
background: #FF6500;
color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 隔行换色
$('tbody>tr:even').addClass('even');
$('tbody>tr:odd').addClass('odd');
$('tbody>tr').click(function() {
$(this).toggleClass('selected')
.find(':checkbox').prop('checked', $(this).hasClass('selected'));
});
// 如果复选框默认情况下是选择的，则高亮
$('tbody>tr:has(:checked)').addClass('selected');
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="choice" value="" />
</td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>
<input type="checkbox" name="choice" value="" />
</td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>
<input type="checkbox" name="choice" value="" checked='checked' />
</td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>
<input type="checkbox" name="choice" value="" />
</td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>
<input type="checkbox" name="choice" value="" />
</td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>
<input type="checkbox" name="choice" value="" />
</td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>9. 表格内容筛选
<!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 charset="utf-8">
<title>表格筛选</title>
<style type="text/css">
td {
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
th {
font: bold 12px/17px Arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
}
table {
border: 0;
border-collapse: collapse;
min-width: 312px;
}
td {
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#filterName').keyup(function() {
$('tbody>tr').hide()
.filter(':contains("' + $(this).val() + '")').show();
}).keyup(); //初始过滤
});
</script>
</head>
<body>
<div>
<br/> 筛选：
<input id="filterName" value="男" />
<br/>
</div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王六</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>李字</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
</tbody>
</table>
</body>10. 表格层次结构
<!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 charset="utf-8">
<title>层次表格</title>
<style type="text/css">
td {
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
th {
font: bold 12px/17px Arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
}
.parent {
background: #FFF38F;
cursor: pointer;
}
/* 此样式需放在.parent后面，不然会被覆盖 */
.selected {
background:#FF6500;
color:#fff;
}
table { border:0;border-collapse:collapse; min-width: 312px;}
td {
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('tr.parent').click(function() {
$(this).toggleClass('selected') //添加/删除高亮
.siblings('.child_'+this.id).toggle(); //展开/隐藏子行
}).click(); //初始隐藏
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<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>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_01">
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr class="parent" id="row_02">
<td colspan="3">前台开发组</td>
</tr>
<tr class="child_row_02">
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr class="child_row_02">
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr class="parent" id="row_03">
<td colspan="3">前台开发组</td>
</tr>
<tr class="child_row_03">
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr class="child_row_03">
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>11. 选项卡
<!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 charset="utf-8">
<title>选项卡</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 12px/19px Arial, Helvetica, sans-serif; color: #666; }
.tab { width: 240px; margin: 50px; } .tab_menu { clear: both; }
.tab_menu li { float: left; text-align: center; cursor: pointer; list-style: none; padding: 1px 6px; margin-right: 4px; background: #F1F1F1; border: 1px solid #898989; border-bottom: none; }
.tab_menu li.hover { background: #DFDFDF; }
.tab_menu li.selected { color: #FFF; background: #6D84B4; }
.tab_box { clear: both; border: 1px solid #898989; height: 100px; }
.hide { display: none }
</style>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $div_li = $("div.tab_menu ul li");
$('div.tab_menu li').click(function() {
$(this).addClass("selected")
.siblings().removeClass('selected');
var index = $div_li.index(this); //获取当前点击的<li>元素 在 全部li元素中的索引。
$('div.tab_box > div')
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}).hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
$('div.tab_menu li').eq(0).click(); //初始选中
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div>体育</div>
<div>娱乐</div>
</div>
</div>
</body>本文参考：
1. 《锋利的jQuery》
2. jQuery函数 - 左右抖动效果，用于提示
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《锋利的jQuery》读书笔记 第5章 jQuery对表单、表格的操作及更多应用
- 《锋利的jQuery》读书笔记 第6章 jQuery与Ajax的应用
- 35个Jquery应用实例
- 学习jQuery之旅--jQuery的经典实例应用
- jQuery笔记——jQuery选择器实例应用
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
- 50多个强大的jQuery插件应用实例
- Jquery之Ajax实例应用
- JQuery应用实例——体育馆预约系统的预约功能实现
- jQuery插件autocomplete应用详解及实例
- 《锋利的jQuery》读书笔记 第3章 jQuery中的DOM操作
- jQuery，ajax'map传值'与后端'接收map'应用实例(SSM框架)
- jQuery应用之jQuery链用法实例
- 《锋利的jQuery》要点归纳（四）jQuery对表单、表格的操作及更多应用（下：其他应用）
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
- jquery中dom操作和事件的实例学习 下拉框应用
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
- jquery 添加和移除节点 jquery 的简单实例应用
- 35个Jquery应用实例
- jQuery验证框架（八）应用实例 (jQuery validation)