【表格】
1、表格变色
1.1 隔行变色
<tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>css代码：
.even {background: #f83;}
.odd {background: #ffe;}$("tr:odd").addClass("odd");
$("tr:even").addClass("even");注意这样会把表头也算进去，需要排除表头中的tr，所以可以使用
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");设置某一行高亮显示状态，可用通过contians选择器实现
$("tr:contains('val')").addClass("selected");1.2 单选框控制表格行变亮
为表格行添加单击事件
给单击行添加选中高亮样式，然后将其兄弟行的高亮样式移除，最后将当前行里的单选框设置选中
<tr>
<td class="radio"><input type="radio" name="choice" value=""></td>
<td>张三</td><td>男</td><td>浙江宁波</td>
</tr>$("tbody>tr").click(function(){
$(this)
.addClass("selected") //当前对象$(this)
.siblings().removeClass("selected") //当前对象变为$(this).siblings()
.end() //重新返回$(this)对象
.find(":radio").attr("checked",true);
})end()方法返回先前对象
如果有单选框被默认选中，也需要处理
$("table :radio:checked").parent().parent().addClass("selected");可简化为
$("tbody>tr:has(:checked)").addClass("selected");1.3 复选框控制表格行高亮
$("tbody>tr").click(function(){
if($(this).hasClass("selected")){
$(this)
.removeClass("selected")
.find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected")
.find(":checkbox").attr("checked",true);
}
})
$("#tbody2>tr:has(:checked)").addClass("selected"); //默认选中$("#tbody2>tr").click(function(){
var hasSelected = $(this).hasClass("selected");
$(this)[hasSelected?"removeClass":"addClass"]("selected")
.find(":checkbox").attr("checked",!hasSelected);
})2、表格展开关闭
$("#tb>tr.parent").click(function(){
$(this).toggleClass("selected")
.siblings(".child_"+this.id).toggle();
})HTML代码
<tbody id="tb">
<tr class="parent" id="row_1"><td colspan="3">前台</td></tr>
<tr class="child_row_1"><td>张三</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_1"><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_1"><td>赵柳</td><td>女</td><td>福建福州</td></tr>
<tr class="parent" id="row_2"><td colspan="3">技术开发</td></tr>
<tr class="child_row_2"><td>王二</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_2"><td>翠花</td><td>女</td><td>辽宁沈阳</td></tr>
<tr class="child_row_2"><td>狗蛋</td><td>男</td><td>吉林长春</td></tr>
</tbody>如果要求进入页面时，表格是默认收缩的，只要出发click()事件就好
$("#tb>tr.parent").click(function(){
$(this).toggleClass("selected")
.siblings(".child_"+this.id).toggle();
}).click();3、表格内容筛选
前面使用contains选择器实现的
$("tr:contains('val')").addClass("selected");可以利用该选择器再结合jQuery中的filter()筛选方法，可以实现表格内容的过滤
$("#tb tr").hide()
.filter(":contains('二')").show();表格上方添加文本框，用于根据用户输入的内容来筛选内容
$("#filterName").keyup(function(){
$("#tb tr").hide()
.filter(":contains('"+$(this).val()+"')").show();
})要解决这个问题，只需要在DOM刚加载完时，为表单元素绑定事件并且立即触发该事件即可。
$("#filterName").keyup(function(){
$("#tb tr").hide()
.filter(":contains('"+$(this).val()+"')").show();
}).keyup(); //DOM加载完时，绑定事件完成后立即触发【其他应用】
1、网页字体大小
控制文本的放大与缩小
HTML代码：
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<p id="para">This is a text.This is a text.</p>
</div>
</div>jQuery代码：
$("span").click(function(){
var thisEle = $("#para").css("font-size"); //获得字体大小
var textFontSize = parseInt(thisEle,10); //获得当前字体大小的数值
var unit = thisEle.slice(-2);
var cName = $(this).attr("class");
if (cName == "bigger") {
if (textFontSize <= 22) { //设置最大字体
textFontSize += 2;
}
} else if (cName == "smaller") {
if (textFontSize >= 12) { //色织最小字体
textFontSize -= 2;
}
}
$("#para").css("font-size",textFontSize+unit);
})2、网页选项卡
通过隐藏或显示来切换不同的内容
HTML代码：
<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 class="hide">娱乐</div>
<div class="hide">体育</div>
</div>
</div>jQuery代码：
var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //单击的li元素高亮
.siblings().removeClass("selected"); //其他同辈元素移除高亮
var index = $div_li.index(this); //获取单击的li元素在全部li元素中的索引
$("div.tab_box>div").eq(index).show() //显示li对应的div内容
.siblings().hide(); //隐藏其他同辈div元素
})注意$("div.tab_box>div")与$("div.tab_box div")的区别
如果使用$("div.tab_box div")选择器，当子节点包含div元素时，就会引起程序混乱。这里需要获取当前选项卡下的子节点。
若要加强效果，如光标滑入滑出的效果，可以添加hover事件
var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //单击的li元素高亮
.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");
})3、网页换肤
原理：就是通过不同的样式表文件来实现不同皮肤的切换，并且需要将换好的皮肤记入cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebPageDemo</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var $li = $("#skin li");
$li.click(function(){
$("#"+this.id).addClass("selected") //当前选中的li元素
.siblings().removeClass("selected"); //去掉其他同辈li元素的选中
$("#cssfile").attr("href","css/"+this.id+".css"); //设置不同皮肤
})
})
</script>
</head>
<body>
<ul id="skin">
<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>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul>
<div id="div_side_0">
<div id="news">
<h1 class="title">时事新闻</h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title">娱乐新闻</h1>
</div>
</div>
</body>
</html>但是当用户刷新网页或关闭浏览器后，皮肤又会被初始化，因此需要将当前选择的皮肤进行保存。
这种可以通过jQuery中的cookie插件实现。引入jQuery中的cookie插件
<script src="jquery.cookie.js" type="text/javascript"></script>var $li = $("#skin li");
$li.click(function(){
$("#"+this.id).addClass("selected")
.siblings().removeClass("selected");
$("#cssfile").attr("href","css/"+this.id+".css");
$.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 });
})var cookie_skin = $.cookie( "MyCssSkin");
if (cookie_skin) {
$("#"+cookie_skin).addClass("selected") //当前<li>元素选中
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ cookie_skin +".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 });
}$(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") //当前<li>元素选中
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
}
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
