《锋利的jQuery》的读书笔记 -- jQuery应用实例

最新推荐文章于 2022-05-08 13:55:27 发布

xxc1605629895

最新推荐文章于 2022-05-08 13:55:27 发布

阅读量1k

点赞数

分类专栏： web前端 jquery 文章标签： jquery 应用

本文链接：https://blog.csdn.net/johnf_nash/article/details/78510127

版权

web前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

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函数 - 左右抖动效果，用于提示