jQuery实现的选项卡
作者:dangbao 日期:2010-06-21
早就看开了锋利的jQuery，今天才看到书中讲的jQuery实现的选项卡，之前接触过几个jQuery的选项卡各有不同，不是不能满足多次调用，就是结构不太理想。今天看了一下文章所讲，感觉不错，记录下来以后研究。
核心jQuery代码：
核心jQuery代码：
Code
$(function(){
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
})
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
})
加入收藏的普通版和jQuery版
作者:dangbao 日期:2010-01-25
关于“加入收藏”的代码，很多人都不会重视，一般情况是随便在网上搜一个代码放在页面里得了。前几天群里的一个朋友说要找一个全兼容的收藏代码，说是为了统计加入收藏夹的人数用。这下可是犯了难，都知道google chrome没有这个功能，无奈之下只好祭出弹对话框提示Ctrl+D了。
普通版的加入收藏：
普通版的加入收藏：
Code
<a href="http://www.dangbao.net" onclick="window.external.addFavorite (this.href,this.title);return false;" title='Dangbao's Blog' rel="sidebar">加入收藏</a>
jQuery的隔行变色条纹效果
作者:dangbao 日期:2009-11-25
两种颜色交替的条纹比较常见，用jQuery写比较简单，这也得益于jQuery的两个内置的odd和even的奇偶函数。想想用纯JS要写多少代码，用jQuery才4行而已。三色交替条纹：利用索引将3个类指定3个数字，然后求模运算，得出每行的数值和对应的类。
Code
$(document).ready(function() {
$('li:odd').addClass('odd');
$('li:even').addClass('even');
});
$('li:odd').addClass('odd');
$('li:even').addClass('even');
});
Code
$(document).ready(function() {
var className = {
0: 'first',
1: 'second',
2: 'third'
};
$('li').each(function(index) {
$(this).addClass(className[index % 3]);
});
});
var className = {
0: 'first',
1: 'second',
2: 'third'
};
$('li').each(function(index) {
$(this).addClass(className[index % 3]);
});
});
jQuery的hover
作者:dangbao 日期:2009-11-18
我们都知道CSS的规范里有:hover的伪类，就是鼠标经过元素时，可以影响元素外观的样式。大家也都知道，在IE6中，只有在链接上才能看到hover的效果。那么今天介绍的jQuery则可以让我们实现鼠标经过元素触发.hover的样式。…
Code
$(document).ready(function() {
$('h1').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
});
$('h1').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
});
站在前端看jQuery
作者:dangbao 日期:2009-11-17
目前jQuery比较流行，很多时候甚至已经成了考验前端人员的Javascript水平的一个标准了。jQuery以体积小、代码简洁幽雅而闻名。经过我一段时间的学习，今天站在前端人员的角度来谈谈jQuery的特点。
- 1.体积小。jQuery的体积小，加载速度快，这是它最吸引前端人员的地方之一。
- 2.代码简洁。一些用JS写稍微复杂的脚本效果用jQuery仅仅需要几行代码。比如隔行变色。
- 3.查找页面元素的机制构建于CSS选择符上。查找和锁定元素更简单，取得页面元素很简单。
- 4.无需更改xhtml和css，就可以修改页面外观，改变页面内容。
- 5.事件处理的良好兼容性。这个不消多说，jQuery的代码很好的解决了浏览器的不一致性。
- 6.内置动态效果。如淡入、擦除。
Tags: jQuery
