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 日期: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
JS框架jQuery 1.3 正式版发布
作者:dangbao 日期:2009-01-15
功能强大的JS框架jQuery 1.3 正式发布了。它有以下更新:
一、更为强大的选择器。
jQuery 1.3 的选择器较之以前的更为强健,更具备可扩展性,并且完全独立(虽然可扩展性会牺牲一些性能)根据jQuery官方的说明文档,这本版本较之上一版本又提高了49%的性能。
二、Live 事件
新版的jQ可以无缝将某一个事件绑定到现在后以后的所有元素上。这个问题其实之前的重复绑定问题,你是否还记得当你append()后的元素无法使用,迫不得已在bind一下或者是在代码上写onclick的尴尬?呵呵,live()出马,一个顶N啊!
一、更为强大的选择器。
jQuery 1.3 的选择器较之以前的更为强健,更具备可扩展性,并且完全独立(虽然可扩展性会牺牲一些性能)根据jQuery官方的说明文档,这本版本较之上一版本又提高了49%的性能。
二、Live 事件
新版的jQ可以无缝将某一个事件绑定到现在后以后的所有元素上。这个问题其实之前的重复绑定问题,你是否还记得当你append()后的元素无法使用,迫不得已在bind一下或者是在代码上写onclick的尴尬?呵呵,live()出马,一个顶N啊!
Tags: JavaScript jQuery

