推荐一些必记的jQuery常用函数及使用技巧

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
代码如下:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


3、如何获取jQuery集合的某一项

对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
代码如下:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


4、同一函数实现set和get

Jquery中的很多方法都是如此,主要包括如下几个:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


6、扩展我们需要的功能

HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

使用扩展的方法(通过“$.方法名”调用):
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


7、支持方法的连写

所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


8、操作元素的样式

主要包括以下几种方式:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


9、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

等价于:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

也可以处理json数据,如
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

结果为:
引用内容 引用内容
Name:name, Value:John
Name:lang, Value:JS

$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

可以有多个参数(合并多项并返回)
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

$.trim(str):删除字符串两端的空白字符。
如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。
如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


jQuery大家都在使用,你有没有记住一些常用,一定要记住的应用函数呢?因为jQuery提供的函数非常多,不可能我们都能记住,本文就整理一些必记的jQuery常用函数及使用技巧。

-----------------------------------------------------------------------------------------------------------------------

高级选择器(selector)

在jQuery中,我们可以使用各种各样的选择器,这使得选择器的使用变得非常精确。下面我们来一步一步地讲解这些选择器并看看在其他语境中如何使用这些选择器。

基于属性的选择器

在HTML中,几乎所有元素都具有属性,比如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

上面两个HMTL元素中包含了九个属性。利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

在官方文档中,我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的,属性和属性值。

多重选择器

如果你开放的是一个较为大型的网站,选择器的使用会变得困难。有时为了让代码变得更为简单,最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识,不过非常有用,我们应该把这些知识熟记于心。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


Widget组件选择器

除了插件的选择器之前,还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

如上例所示,可供使用的选择器是多种多样的,并且它们之前不是互相独立的,所以我们可以将这些选择器组合起来进行使用,如上例中的选择器。

理解网站的结构

网络的结构可能看起来非常复杂,但事实上并非如此,如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树,树根在顶部,而其他元素从根部延伸出来。查看下面的代码,试着想象一棵树,树根是body标签。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

以上示例代码的树形图如下:

很简单,是不是?从现在开始我们可以将html或xhtml看做一棵树,不过我们想做的是程序员,这些植物学的理论有什么用处?答案就在下一个要点之中。

对树进行选择和转换

选择


就想树一样,网站结构中叶存在子与父。在jQuery中,我们可以利用这一结构。假设我们拥有相同的html,但是现在我们想要选择名为“main”的div中的p元素,但是不想对任何有关p元素的东西造成变化。

我们有三种可能的方案,如下:
$("#wrapper").children('#main').children('p').css("color","orange");  
$("#wrapper").children().children('p').css("color","orange");  
$("#main").children('p').css("color","orange");
利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器,该方法将仅选择我们需要的元素,如果不是这样,父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。
唯一的不同之处在于:第二个选择器中我们什么也没有指定,所有每一个子元素都会被选中。此处的关键在于:在上图中wrapper这个div元素下除main之外并没有其他子元素,所以我们得到的结果是一样的。

添加元素

现在我们在树中添加元素。这个元素可以是段落、div元素、表格等等,假设我们想要添加一个列表,如下:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

只是一些字符串,所以我们可以在Javascript代码中这样写:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

现在我们要在html中某个地方添加字符串。比如,在之前我们选择的p元素之后。

最后我们可以输入完整的代码,如下所示:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

字面上我们将字符串附加到HTML中的</p>,结果是这个列表显示在p元素之后。

移除元素

移除元素并不难,当我们谈到对树进行转换时,在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落(注意我们可以再次使用选择器)。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

在这一代码中,位于选中元素之中的所有元素都将被移除,所以必须十分小心。如果div下有一个列表,当我们移除该div时,div和列表都会被移除。

表面之下

jQuery类似只露出一角的冰山,在水面之下还有更多内容。这一小结中,我们将向你展示某些表面之下的内容。

绑定(Bind)

绑定是一种方法,利用它,我们可以将一个事件(鼠标点击、悬置等等)与一个方法连接起来。这有点类似:当用户单击此处时,调用该方法。听起来很熟悉,对吗?没错,我们经常这样做。看看以下示例:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

上文中click()方法在以下代码相对于wrapper:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

此外,使用unbind()方法可以解除事件与元素的连接。

定义你自己的jQuery方法

目前我们看到了一些方法,如click、bind、hover等等,但是我们如何定义自己的方法?如何使用$(’selector’).mymethod()这样的语句调用这些方法?以下代码提供了这些问题的解决方案。定义一个方法,显示一个元素的值。
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


回调(callback)是常用的解决方案

使用回调,我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说:但你做完时,给我电话,因为我要做我的那份工作。不过现在的问题是:如何使用回调?
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

注意:如果该函数包含参数,我们必须使用以下方式:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


结论

本文只是介绍一些技巧,能够让你更好的理解有关jQuery的知识。
[本日志由 parno 于 2011-09-08 02:43 PM 更新]
上一篇: MOTO MB525(摩托罗拉 ME525) Defy 不能通过蓝牙接收文件?
下一篇: 活动 地图(在应用程序地图中)没有响应?100% CPU 占用率(Android)
文章来自: 51cto.com
引用通告: 查看所有引用 | 我要引用此文章
Tags: jQuery javascri&#112;t
相关日志:
评论: 0 | 引用: 0 | 查看次数: 266370
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 关闭 | [img]标签 关闭