专注于网页前端研究和Web标准化!Tag: jQuery 预览模式: 普通 | 列表

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");
        })
    })

阅读全文

Tags: jQuery 选项卡

分类:Javascript | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 80

jQuery的隔行变色条纹效果

两种颜色交替的条纹比较常见,用jQuery写比较简单,这也得益于jQuery的两个内置的odd和even的奇偶函数。想想用纯JS要写多少代码,用jQuery才4行而已。
Code
$(document).ready(function() {
  $('li:odd').addClass('odd');
  $('li:even').addClass('even');
});
三色交替条纹:利用索引将3个类指定3个数字,然后求模运算,得出每行的数值和对应的类。
Code
$(document).ready(function() {
  var className = {
      0: 'first',
      1: 'second',
      2: 'third'      
   };
   $('li').each(function(index) {
    $(this).addClass(className[index % 3]);                  
   });
});

阅读全文

Tags: jQuery 隔行变色

分类:Javascript | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 106

jQuery的hover

我们都知道CSS的规范里有:hover的伪类,就是鼠标经过元素时,可以影响元素外观的样式。大家也都知道,在IE6中,只有在链接上才能看到hover的效果。那么今天介绍的jQuery则可以让我们实现鼠标经过元素触发.hover的样式。
Code
$(document).ready(function() {
    $('h1').hover(function(){
      $(this).addClass('hover');
    }, function(){
      $(this).removeClass('hover');
    });
});

阅读全文

Tags: jQuery hover

分类:Javascript | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 100

站在前端看jQuery

目前jQuery比较流行,很多时候甚至已经成了考验前端人员的Javascript水平的一个标准了。jQuery以体积小、代码简洁幽雅而闻名。经过我一段时间的学习,今天站在前端人员的角度来谈谈jQuery的特点。
  • 1.体积小。jQuery的体积小,加载速度快,这是它最吸引前端人员的地方之一。
  • 2.代码简洁。一些用JS写稍微复杂的脚本效果用jQuery仅仅需要几行代码。比如隔行变色。
  • 3.查找页面元素的机制构建于CSS选择符上。查找和锁定元素更简单,取得页面元素很简单。
  • 4.无需更改xhtml和css,就可以修改页面外观,改变页面内容。
  • 5.事件处理的良好兼容性。这个不消多说,jQuery的代码很好的解决了浏览器的不一致性。
  • 6.内置动态效果。如淡入、擦除。
当然,jQuery还有很多的优点,而以上几点足以令每个前端向往jQuery。

Tags: jQuery

分类:Javascript | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 44

JS框架jQuery 1.3 正式版发布

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

阅读全文

Tags: JavaScript jQuery

分类:重构资源 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 122