Posted on | 二月 24, 2010 | No Comments
<script type=”text/javascript”>
$(function(){
$(‘tr.parent’).click(function(){ // 获取所谓的父行
$(this)
.toggleClass(“selected”) // 添加/删除高亮
.siblings(‘.child_’+this.id).toggle(); // 隐藏/显示所谓的子行
});
})
</script>
</head>
<body>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr id=”row_01″><td colspan=”3″>前台设计组</td></tr>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr id=”row_02″><td colspan=”3″>前台开发组</td></tr>
<tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
<tr id=”row_03″><td colspan=”3″>后台开发组</td></tr>
<tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
下个例子：表格展开伸缩
$(function(){
3 $(‘tr.parent’).click(function(){ // 获取所谓的父行
4 $(this)
5 .toggleClass(“selected”) // 添加/删除高亮
6 .siblings(‘.child_’+this.id).toggle(); // 隐藏/显示所谓的子行
7 }).click();
8})
内容过滤
.hide()
.filter(“:contains(李)”)
.show();
其实想想JQ也蛮简单的，多组合才能有新效果
.hide()
.filter(“:contains(‘”+( $(this).val() )+”‘)”)
.show(); //this是一个input，同步过滤很强大
$(function(){
3 $(“#filterName”).keyup(function(){
4 $(“table tbody tr”)
5 .hide()
6 .filter(“:contains(‘”+( $(this).val() )+”‘)”)
7 .show();
8 }).keyup();
9 })
这次用的是contains了，包含的留下。实际在firefox里貌似有问题，感觉没实现作者想要的。keyup才执行
￥￥￥控制字体大小：
$(“span”).click(function(){
4 var thisEle = $(“#para”).css(“font-size”);
5 var textFontSize = parseFloat(thisEle , 10);
6 var unit = thisEle.slice(-2); //获取单位
7 var cName = $(this).attr(“class”);
8 if(cName == “bigger”){
9 textFontSize += 2;
10 }else if(cName == “smaller”){
11 textFontSize -= 2;
12 }
13 $(“#para”).css(“font-size”, textFontSize + unit );
14 });
选项卡实例：
$(function(){
4 var $div_li =$(“div.tab_menu ul li”);
5 $div_li.click(function(){
6 $(this).addClass(“selected”) //当前<li>元素高亮
7 .siblings().removeClass(“selected”); //去掉其它同辈<li>元素的高亮
8 var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
9 $(“div.tab_box > div”) //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
10 .eq(index).show() //显示 <li>元素对应的<div>元素
11 .siblings().hide(); //隐藏其它几个同辈的<div>元素
12 })
13 })
字体颜色改变：
$(function(){
4 var $li =$(“#skin li”);
5 $li.click(function(){
6 $(“#”+this.id).addClass(“selected”) //当前<li>元素选中
7 .siblings().removeClass(“selected”); //去掉其它同辈<li>元素的选中
8 $(“#cssfile”).attr(“href”,”css/”+this.id+”.css”); //设置不同皮肤
9 })
10 })
$(“#”+this.id).这种写法，还有.siblings()，还记得么，再看下面这种
$(function(){
4 var $li =$(“#skin li”);
5 $li.click(function(){
6 switchSkin( this.id );
7 });
8 var cookie_skin = $.cookie( “MyCssSkin”);
9 if (cookie_skin) {
10 switchSkin( cookie_skin );
11 }
12 });
13 function switchSkin(skinName){
14 $(“#”+skinName).addClass(“selected”) //当前<li>元素选中
15 .siblings().removeClass(“selected”); //去掉其它同辈<li>元素的选中
16 $(“#cssfile”).attr(“href”,”css/”+ skinName +”.css”); //设置不同皮肤
17 $.cookie( “MyCssSkin” , skinName , { path: ‘/’, expires: 10 });
18 }
有点编程的感觉了，.COOKIE原来jq还能干这事，document.cookie？不错
相关文章:
- jquery自学笔记1
- jQuery方法大全
- 26JQUERY-SKILLS
- Hosting IFRAMEs using the JQuery UI Tabs plug-in
- 一级域名和二级域名跨域的解决方案
评论|Comments
