.even{background-color: #fff38f;} /*偶数行样式*/.odd{ background-color: #dcdcdc;} /*奇数行样式*/.selected{ background-color:#ff4136; }

    <table>        <thead>        <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>        </thead>        <tbody>        <tr><td><input name="sel" type="checkbox"></td><td>张三</td><td>男</td><td>浙江宁波</td></tr>        <tr><td><input name="sel" type="checkbox" checked></td><td>李四</td><td>女</td><td>浙江杭州</td></tr>        <tr><td><input name="sel" type="checkbox"></td><td>王五</td><td>男</td><td>湖南长沙</td></tr>        <tr><td><input name="sel" type="checkbox"></td><td>赵六</td><td>男</td><td>浙江温州</td></tr>        <tr><td><input name="sel" type="checkbox"></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr>        <tr><td><input name="sel" type="checkbox"></td><td>MAXMAX</td><td>女</td><td>浙江杭州</td></tr>        </tbody>    </table>

$(function(){//    表格隔行变色    $("tbody>tr:odd").addClass("odd");    $("tbody>tr:even").addClass("even");//    控制行高亮显示//    $("tr:contains(‘王五‘)").addClass("selected");//    选择行单选//    初始化默认选中//    $("table :radio:checked").parents("tr").addClass("selected"); //或者//    $("tbody>tr:has(:checked)").addClass("selected");//    $("tbody>tr").click(function(){//        $(this).addClass("selected")//                .siblings().removeClass("selected")//                .end()//                .find(":radio").prop("checked",true);//    });//    选择行多选//      初始化默认选中//    $("table :checkbox:checked").parents("tr").addClass("selected"); //或者    $("tbody>tr:has(:checked)").addClass("selected");    $("tbody>tr").click(function(){        var hasSelected=$(this).hasClass("selected");        $(this)[hasSelected?"removeClass":"addClass"]("selected")  //三元运算，结果为"removeClass"或者"addClass"                .find(":checkbox").prop("checked",!hasSelected);    })})

    <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>MAXMAX</td><td>女</td><td>浙江杭州</td></tr>        </tbody>    </table>

$(function(){    $("tr.parent").click(function(){        $(this).toggleClass("selected")                .siblings(".child_"+this.id).toggle();    }).click();     //页面加载时即触发click事件，默认收缩})

$(function(){    $("#filterName").keyup(function(){        $("table tbody tr").hide()                .filter(":contains(‘"+($(this).val())+"‘)").show();    }).keyup(); //防止刷新表单其值保持不变，因此，需DOM加载完成时即触发keyup事件})

 <div class="msg">       <div class="msg_caption">           <span class="bigger">放大</span>           <span class="smaller">缩小</span>       </div>       <div>           <p id="para">                文字大小文字大小文字大小           </p>       </div>   </div>

$(function(){    $("span").click(function(){        var thisEle=$("#para").css("font-size");        var textFontSize=parseInt(thisEle,10);  //去掉单位获取10进制        var unit=thisEle.slice(-2);  //返回字符串中从指定的字符开始的一个字符串。-2表示倒数第2个字符开始        var cName=$(this).attr("class");        if(cName=="bigger"){            if(textFontSize<=22) {                textFontSize += 2;            }        }else if(cName=="smaller"){            if(textFontSize>=10) {                textFontSize -= 2;            }        }        $("#para").css("font-size",textFontSize+unit);    })})

.tab_menu li{padding: 5px 18px; float: left; border: 1px solid #dcdcdc; margin-right: -1px; cursor: pointer;}.tab_menu li.selected{border-bottom: 1px solid #fff;}.tab_menu li.hover{ color: red;}

    <div class="tab">        <div class="tab_menu">            <ul class="fix">                <li class="selected">时事</li>                <li>娱乐</li>                <li>体育</li>            </ul>        </div>        <div class="tab_box">            <div>时事</div>            <div class="dn">娱乐</div>            <div class="dn">体育</div>        </div>    </div>

$(function(){    var $div_li=$("div.tab_menu ul li");    $div_li.click(function(){        $(this).addClass("selected")                .siblings().removeClass("selected");        var index=$div_li.index(this);        $("div.tab_box>div")                .eq(index).show()                .siblings().hide();    }).hover(function(){         //加强效果添加hover事件        $(this).addClass("hover");    },function(){        $(this).removeClass("hover");    });});

    <ul id="skin" class="fix">        <li id="skin_0" title="灰色" class="selected">灰色</li>        <li id="skin_1" title="紫色">紫色</li>        <li id="skin_2" title="蓝色">蓝色</li>        <li id="skin_3" title="红色">红色</li>    </ul>    <div class="content">        <p>内容颜色</p>    </div>

<script src="http://www.mamicode.com/js/jquery.cookie.js"></script><script>    $(function () {        var $li = $("#skin li");        $li.click(function () {            switchSkin(this.id);        })        var cookie_skin = $.cookie("MyCssSkin");        if (cookie_skin) {            switchSkin(cookie_skin);        }    });    function switchSkin(skinName) {        $("#" + skinName).addClass("selected")                .siblings().removeClass("selected");        $("#cssfile").attr("href", "css/" + skinName + ".css");        $.cookie("MyCssSkin", skinName, {path: ‘/‘, expires: 10});    }</script>