`

jquery指南

阅读更多
这个指南是对jquery库的一个总的介绍,当然你也被要求具备javascript和DOM(文档对象模型)的相

关知识。该指南试图解释一些必须的细节。它涵盖了一个简单的”hello world”实例,选择器和事件

基础,AJAX,FX以及官方插件。

这个指南并没有”click me”,而是依靠”copy me”(复制/粘贴代码)来测试例子,拷贝一个例子

,看它是怎么做的,然后根据你自己的想法修改它。

目录:
1.    安装
2.    Hello jQuery (look like hello world)
3.    用选择器(selector)和事件(events)
4.    用ajax
5.    用FX(各种效果)
6.    用tablesorter 插件
7.    书写你自己的插件
8.    下一步(展望)


1.安装
开始之前,我们需要一个jquery库的拷贝(js文件)。最新的版本你能在这里下载。这个指南也提供了

一个基本的“开始工具包”,你可以在下面地址下载到。

Jquery starterkit

下载该文件并且解压缩。用你喜欢的编辑器(比如:记事本)打开starterkit.htm和custom.js,并在

浏览器(IE,firefox, netscape)打开starterkit.htm
现在我们可以开始类似于“hello world”的例子了。

2.Hello ,jQuery
作为我们要做的每一件事情,需要确定只要用到了dom,那么你就应该为当前文档注册一个ready 事件

(关于ready和onload的区别,大家可以参考<小蛀翻译的"jQuery简单指南"部分>,在这里就不解释

了)


$(document).ready(function() {
  // do stuff when DOM is ready
});


在函数块里边放一个alert并没多少意义,因为一个alert并不需要DOM被加载。所以你可以做一些更复

杂的事情来用到dom,比如下面当你click一个<a>的时候显示一个alert

$(document).ready(function() {
    $("a").click(function() {
        alert("Hello world!");
    });
});


所以只要你点<a>标签,alert就会显示出来。
让我们看一看都做了些什么吧。$(“a”)是一个jquery的选择器(selector),它能选择所有的元素(

dom对象)。$是一个jquery里对于类的别名,因此$()构造了一个新的jquery对象。Click()函数是对

象里的有个方法。它绑定了对所有元素的click事件并且当事件发生时执行提供的函数。
类似于下面的代码:
<a href="#" onclick="alert('Hello world')">Link</a>
这个区别是显而易见的:我们不需要为单一的对象写click事件了。我们把html(结构)和js(行为)分

开了就象用CSS分开一样。
现在,我们已经对选择器和事件有了一定的认识了。

3.选择器(selector)和事件(events)
Jquery提供了2个方法来选择DOM元素。第一个方法是用CSS和XPATH(比如:$(“div > ul a”))。第

二种方法是用jQuery对象的各种方法。当然两种方法也可以结合。
我们在starterkit里选择和修改第一个order list来测试这些选择器。
开始之前,我们需要选择列表本身。这个列表有一个ID=” orderedlist”,在经典javascript里,你

必须这样用:document.getElementById("orderedlist"),但是在jQuery里,我们只需要做这些:

$(document).ready(function() {
    $("#orderedlist").addClass("red");
});


这个starterkit提供了一个如何加CSS样式  class.red。因此,当你刷新starterkit.htm的时候,你

会发现第一个list背景变成红色,而第二个list没有被改变。
现在让我们加更多的classes到list的子元素:

$(document).ready(function() {
    $("#orderedlist > li").addClass("blue");
});


上面的例子选择了id为orderedlist的所有子标签li,并且在他们上面加了一个class.blue的样式。
现在来点更复杂的。当鼠标移到li元素的时候,增加和删除一个Class样式:

$(document).ready(function() {
    $("#orderedlist li:last").hover(function() {
        $(this).addClass("green");
    }, function() {
        $(this).removeClass("green");
    });


你在这里可以找到很多CSS和XPATH的语法。
更多的例子和表达式你也可以在这里找到。
对于每个onxxx事件,象onclick,onchange,onsubmit等,都有一个和jquery同意义的对应的事件,而

其他事件,象ready,hover等,都是为某个方法提供。
你能在visual jquery里发现一个完整的事件列表。

还有种写法是jquery特有的(chain),就是把一个选择器的所有的事件并排列出来,中间用”.”隔

开:

$(document).ready(function() {
    $("#orderedlist").find("li").each(function(i) {
        $(this).html( $(this).html() + " BAM! " + i );
    });
});


一个你经常面对的任务是在事件里边执行函数。比如这样

$(document).ready(function() {
    // use this to reset a single form
    $("#reset").click(function() {
        $("#form")[0].reset();
    });
});


这个代码只是ID为form的表单执行reset()方法。但是万一你有很多个表单需要执行呢?那么你可以这

样写:

$(document).ready(function() {
    // use this to reset several forms at once
    $("#reset").click(function() {
        $("form").each(function() {
            this.reset();
        });
    });
});


另外一个你必须面对的问题是选择某个或某几个元素。Jquery提供了filter()和not()方法。当

filter()是过滤一些适合filter()表达式元素,而not()是删除和not()表达式相反的元素。当你想选

择所有的li元素,并且不包含ul子元素呢?你可以这样写:

$(document).ready(function() {
    $("li").not("[ul]").css("border", "1px solid black");
});


结果是除了包含ul子元素的li,其他所有的li都得到了一个border.可能你也想选择有name属性的

anchor(<a>):

$(document).ready(function() {
    $("a[@name]").background("#eee");
});


要匹配属性的值(value),我们可以用”*=”来代替”=”

$(document).ready(function() {
    $("a[@href*=/content/gallery]").click(function() {
        // do something with all links that point somewhere to /content/gallery
    });
});


直到现在,我们已经学到了很多选择器的使用。这里还有种情况你需要选择前一个或后一个元素。想

一想starterkit.htm里的FAQ,当你click问题的时候,它是怎么实现隐藏和显示的呢?代码是这样的



$(document).ready(function() {
    $('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});


因为上面只有唯一一个选择器(#faq),我们用chain来减少代码的长度和提高代码的易读性和表现性.

这里要说明一下,如果按原文翻译过来我想很多人都看不懂,感觉他自己也没怎么说明白。我说说我

自己的理解:
‘dd’和‘dt’都是#faq的子元素,find()的作用就是找到它的子元素。End()应该和next()搭配的,

end()实质上是把 ‘dd’过滤了,也就是next()的时候实质上是参考的’dt’。这样每个’dt’的

next就是‘dd’,挺容易实现的。要是还不明白你可以边参考边照着做一遍。

除了同属元素外,我们也可以选择父元素:

$(document).ready(function() {
    $("a").hover(function() {
        $(this).parents("p").addClass("highlight");
    }, function() {
        $(this).parents("p").removeClass("highlight");
    });
});

很容易看懂,p就是a的父元素。

让我们回顾一下前面所学的,jquery有很多地方能使代码更简洁因此容易读和保持。下面的就是对

$(document).ready(callback)符号的一个简单描述

$(function() {
    // code to execute when the DOM is ready
});



好吧,让我们来写个hello , world ,来结束第一天的课程,相信你一定会写了吧

$(function() {
    $("a").click(function() {
        alert("Hello world!");
    });
});


现在,基础已经掌握了,下次我们将探索一下Jquery的其他方面(ajax)

4.Rateing:使用AJAX
在这部分我们写了一个简单的ajax应用,它的目的是允许用户rate(评估)一些事情,就象

youtube.com一样.
我们需要写一些代码.例子中用到了一个php文件来读取"rating"的参数和返回rating个数(count

)和平均rating(array_sum/count).你可以看一看starterkit里边的rate.php代码.
我们需要这个例子工作在ajax上,因此我们用jquery写一个必要的标签并且把它追加到一个ID名为

”rating”的div容器里边.代码如下:

$(document).ready(function() {
    // generate markup
    var ratingMarkup = ["Please rate: "];
    for(var i=1; i <= 5; i++) {
        ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
    }
    // add markup to container and applier click handlers to anchors
    $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
        e.preventDefault();
        // send requests
        $.post("rate.php", {rating: $(this).html()}, function(xml) {
            // format result
            var result = [
                "Thanks for rating, current average: ",
                $("average", xml).text(),
                ", number of votes: ",
                $("count", xml).text()
            ];
            // output result
            $("#rating").html(result.join(''));
        } );
    });
});

上面的代码片断产生了5个<a>元素并且把它们追加到了id为”rating”的div容器里.第一次加载页

面后,所有的<a>元素都包含在div容器里,然后再加上个click事件。当<a>被click的时候,一个post

请求被发送到rate.php文件里,并且通过rating: $(this).html()传递参数,经过处理PHP文件处

理后把结果作为xml写进div容器

如果你电脑上没装php的运行环境。你可以在这里看到这个例子的效果。

对与一个不用javascript也能工作的rating例子,你可以访问softonic.de

你也能在这里或者在visual jquery里边发现更多的关于ajax的帮助文档。

当靠AJAX加载内容的时候,一个非常普遍的问题是:当加载事件句柄到你文档的时候也需要将该

事件应用与你加载的内容里,所以你不得不在内容加载之后提供这些事件句柄。为了防止代码重复,

你应该委派一个函数。例如:

// lets use the shortcut
$(function() {
    var addClickHandlers = function() {
        $("a.clickMeToLoadContent").click(function() {
            $("#target").load(this.href, addClickHandlers);
        });
    };
    addClickHandlers();
});


上面当DOM准备好后addClickHandlers只应用了一次,并且每次用户点一个样式为class.

clickMeToLoadContent的时候内容已经完成加载了。
请主义函数addClickHandlers被定义成了一个局部变量,而非全局函数(function

addClickHandlers() {...}).。请坚持这种写法,因为它可以避免全局变量定义过多引起的冲突。

另外一个非常普遍的AJAX回调问题是参数。假设你需要传递一个额外的参数,那么把回调封装到

一个函数里能够实现,如下:

// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
  ...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); });


5.各种动态效果的实现:用FX
Jquery能实现简单的动态效果,比如显示(show)和隐藏(hide)

// $(document).ready(function() {
    $("a").toggle(function() {
        $(".stuff").hide('slow');
    }, function() {
        $(".stuff").show('fast');
    });
});


发挥你的想像,你能用aninate()创建任意的组合:

// $(document).ready(function() {
    $("a").toggle(function() {
        $(".stuff").animate({
            height: 'hide',
            opacity: 'hide'
        }, 'slow');
    }, function() {
        $(".stuff").animate({
            height: 'show',
            opacity: 'show'
        }, 'slow');
    });
});


在interface 插件收集里,你能发现很多奇特的效果。这个站点也提供一些演示。

6.分类:用表格分类插件
该插件是运行在客户端的,所以你只要在你文件里包含jquery和插件的文件并且写出你想如何分类。

试试下面的例子。在starterkit.htm里添加下面一行代码:

<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>

把插件包含进去后,你还需要在custom.js里写

$(document).ready(function() {
    $("#large").tableSorter();
});


点击表格的头部看看它是怎么工作的。
这个表格也能够用高亮隔行显示来实现斑马线效果。代码如下:

$(document).ready(function() {
    $("#large").tableSorter({
        stripingRowClass: ['odd','even'],    // Class names for striping supplyed as a

array.
        stripRowsOnStartUp: true        // Strip rows on tableSorter init.
    });
});


这里有更多的例子和演示在tablesorter homepage
当你用jquery久了之后会发现把你的代码(功能模块)作为插件封装在一个包是多么有用,不仅你自

己或你的公司能重用这些代码(功能模块),也能在一些社区里共享。下面我们将来看看如何构造一

个插件!

7.插件:写你自己的jquery插件
其实为jquery写插件是很简单的。如果你按照下面的规则,整合你的插件将非常容易。
1.给你的插件命名。让我们叫它”foobar”
2.创建一个文件名为:jquery.[你的插件名].js 比如:jquery.foobar.js
3.扩展jquery的内部对象,创建一个或多个插件的方法,比如:

jQuery.fn.foobar = function() {
    // do something
});

4.用帮助函数创建一个对象(可选)

jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};

然后你能在你的插件里边调用这些帮助函数

jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};

5.创建一个用户能修改的默认的设置(可选)

jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};

然后你能用下面的默认调用该插件(有选项)

$("...").foobar({
    value: 123,
    bar: 9
});


如果你要发布你的插件,你应该提供一些例子和演示。
现在你有一个基本的认识了吧,让我们运用自己的知识和创造力来写我们自己的插件
有很多朋友操作表单这样来结束代码:

$("input[@type='checkbox']").each(function() {
    this.checked = true;
    // or, to uncheck
    this.checked = false;
    // or, to toggle
    this.checked = !this.checked;
});

请注意,无论什么时候,当你的代码出现each时,你应该重写上面的代码来构造一个插件如下:

$.fn.check = function() {
    return this.each(function() {
        this.checked = true;
    });
};

于是插件可以这样用:

$("input[@type='checkbox']").check();


现在你也能写一些插件为uncheck()和togglecheck().但是我们可以扩展插件来接收一些选项.

$.fn.check = function(mode) {
    var mode = mode || 'on'; // if mode is undefined, use 'on' as default
    return this.each(function() {
        switch(mode) {
        case 'on':
            this.checked = true;
            break;
        case 'off':
            this.checked = false;
            break;
        case 'toggle':
            this.checked = !this.checked;
            break;
        }
    });
};

然后用户能够这么使用:

$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');


8.下一步(展望)
如果你计划学习更多的javascript,你应该考虑用firefox的firebug插件来调试你的代码.它为

javascript的调试提供了一个控制台,一个调试器和其他有用的东西.
分享到:
评论

相关推荐

    jQuery指南

    jQuery指南,jQuery学习的好帮手

    JQUERY指南

    内容全面,系统地讲解了jquery的方方面面么。实战性强,全书包含118个示例和2个综合案例

    jquery 指南/入门基础

    ### jQuery 指南/入门基础 #### 一、简介 jQuery 是一款快速、小巧且功能丰富的库。它极大地简化了 JavaScript 编程,并通过一个干净、统一的 API 提供了丰富的功能集,使得 DOM 操作、事件处理、动画以及 Ajax ...

    原生JS+JQ仿写苹果手机指南针(带水平仪、位置、经纬度)

    在本项目中,开发者使用了原生JavaScript(JS)和jQuery(JQ)技术来创建一个功能丰富的模拟苹果手机指南针应用。这个应用不仅显示指南针方向,还提供了水平仪功能,以及实时的位置和经纬度信息。以下是关于这些知识...

    jQueryEasyUI开发指南(含代码)+jQuery权威指南(含代码)

    jQueryEasyUI开发指南(含代码)+jQuery权威指南(含代码) 。jQueryEasyUI开发指南王波著.pdf(含代码)+jQuery权威指南(含代码)jQueryEasyUI jQuery。

    jquery 权威指南 pdf

    JQUERY权威指南(完整版).pdf

    JQUERY应用开发实践指南示例代码

    **jQuery应用开发实践指南示例代码** 在编程领域,jQuery是一个非常重要的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。《jQuery应用开发实践指南》是一本深入浅出介绍jQuery使用的书籍...

    jQuery权威指南(第2版)1

    《jQuery权威指南(第2版)》是一本深入解析jQuery技术的专业书籍,旨在帮助开发者全面理解和掌握jQuery的核心特性和最新发展。此书的第2版相比第1版,可能包含了更多关于jQuery 1.8的新功能和特性,适应了jQuery框架...

    JQuery权威指南源代码

    《JQuery权威指南源代码》是一本深入解析jQuery库的参考书籍,其源代码提供了丰富的实例和示例,帮助读者更好地理解和应用jQuery。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    jQuery权威指南-源代码

    书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 书号:978-7-111-32543-7 定价:59.00元 出版社:机械工业出版社华章公司 出版时间:2011年1月 编辑推荐:...

    jQuery权威指南(第2版).pdf 清晰中文完整版

    《jQuery权威指南(第2版)》是一本深入解析jQuery框架的专业书籍,旨在为开发者提供全面、详尽的jQuery知识。此清晰中文完整版确保读者能够无障碍地理解内容,掌握现代网页开发中的jQuery核心技术。 jQuery是一款...

    jquery文档快速查找

    《jQuery文档快速查找》 jQuery,作为一款广泛使用的JavaScript库...jQuery指南.CHM文件则为你提供了一个详尽的参考资源,涵盖了所有这些知识点及更多内容,助你在开发过程中快速解决问题,让jQuery成为你的得力工具。

    jQuery(权威指南)

    《jQuery权威指南》是针对JavaScript库jQuery的一本详尽教程,旨在帮助读者深入理解并熟练掌握jQuery的核心概念和实用技巧。jQuery是一个广泛使用的JavaScript库,它简化了网页的DOM操作、事件处理、动画制作以及...

    jQuery技术内幕

    《jQuery技术内幕》一书深入剖析了jQuery这一广泛使用的JavaScript库,旨在帮助开发者更好地理解...书中不仅涵盖了上述知识点,还可能涉及性能优化、调试技巧以及与其他技术的集成等方面,是一本全面深入的jQuery指南。

    jquery插件编写指南

    ### jQuery 插件编写指南详解 #### 一、引言 在前端开发中,jQuery 是一个非常流行的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画等操作,同时也支持丰富的插件机制。本文将详细介绍如何编写 ...

Global site tag (gtag.js) - Google Analytics