jquery核心函数.docx

资源描述

jquery核心函数.docx

《jquery核心函数.docx》由会员分享，可在线阅读，更多相关《jquery核心函数.docx（14页珍藏版）》请在冰豆网上搜索。

jquery核心函数.docx

jquery核心函数

JQuery核心

Onload使用

我们有些时候需要在页面初始化完成的时候调用一些JavaScript预处理操作，例如设置某些

Button不可用等，这个时候我们通常有两种选择。

第一：

第二：

window.onload=someFunction;

上述代码意义相同，都会在页面初始化完成之后执行someFunction这个预先定义的JavaScript

函数。

但是，页面初始化完成到底是什么含义呢？

页面初始化完成意味着页面全部被浏览器显

示，也就是说所有的image都加载完成。

有些时候这个过程非常的常，有些时候我们可以看到有些

网站的button先是可用，后来等所有页面显示之后又不可用了就是这个原因。

那么我们到底在什么时候执行someFunction是比较合适的呢？

我们倾向于页面的全部document

内容被加载，而不是所有内容正确显示之后别调用。

以img为例说明上述的区别，例如

//hostname:

port/webapp/xxx.jpg”/>

当上述字面内容被浏览器下载完成时，我们可以说img被加载了，当

http:

//hostname:

port/webapp/xxx.jpg指向的内容被下载并且被正确显示之后，可以说img

被正确显示了。

如何使用JQuery来达到页面内容别加载就执行someFunction？

$（document）.ready（someFunction）;

$（）是什么？

$（）是JQuery的核心方法，$（）方法有几种不同的调用方式，但是这几种方式都有一个共通的特

点，就是通过$（）方法，可以将一个普通的HTMLDOM对象（p,div,body,doucment等）封装

成为一个特殊的，增强了JQuery功能的JQuery对象。

说道这里大家可能会知道了JQuery其实相当于一个对象，一个封装了不同HTMLDOM对象的对象。

$（string）

凭空创建一个JQuery包装起来的HTMLDOM对象，例如：

$（"

Hello

"）.appendTo（"body"）

上述代码建立了一个Hello段，Hello段在一个div内部，之后将这个div追加到了doby内部。

$（elems）

讲一个已经存在的HTMLDOM对象包装为JQuery对象，例如：

$（document.body）.css（"background","black"）;

上述代码把body的background设置为black

$（myForm.elements）.hide（）

隐藏myForm中所有的对象

$（function）

$（document）.ready（function）的简写，总共有三种方法让一个function在dom初始化完成之

后被调用：

$（document）.ready（function）

$（function）

JQuery（function）

$（expr,context）

在上下文（）中查找表达式（）所只是的对象，context不存在的情况下在document上下文中查

找，例如：

DOM对象：

one

two

three

调用：

$（"div>p"）

结果：

two

$（"input:

radio",document.forms[0]）

查找第一个form中的所有redio类型的输入框。

$（"div",xml.responseXML）

查找xml.responseXML指示的XML文件内容中所有的div项。

扩展JQuery的功能

可以使用$.fn.extend（prop）来扩展JQuery提供的功能，例如，JQuery并没有提供check和

uncheck方法，但是我们可以通过如下的代码扩展JQquery，使JQuery增加check和uncheck功

能：

jQuery.fn.extend（{

check:

function（）{

returnthis.each（function（）{this.checked=true;}）;

uncheck:

function（）{

returnthis.each（function（）{this.checked=false;}）;

}

}）;

之后我们可以选择一个对象来使用扩展的check和uncheck方法，例如：

$（"input[@type=checkbox]"）.check（）;

$（"input[@type=radio]"）.uncheck（）;

解决和其他框架的冲突

$在JQuery中有着特殊的含义，但是有些时候我们的项目已经集成了其他的框架）（例如

Prototype），在其他框架中$已经被使用了，那么我们怎么消除JQuery对$指定的特殊含义呢？

我们可以使用jQuery.noConflict（）方法，在调用这个方法之后，$已经不在具有我们前面说的

JQuery赋予的功能，所以所有的后续代码必须使用JQuery调用，例如：

jQuery.noConflict（）;

//调用JQuery的方法

jQuery（"divp"）.hide（）;

//调用其他框架的$（）方法

$（"content"）.style.display='none';

我们也可以指定自己喜欢的名字来替换$，例如：

varj=jQuery.noConflict（）;

//调用jQuery的方法

j（"divp"）.hide（）;

//调用其他框架的$（）方法

$（"content"）.style.display='none';

其他常用方法

each（fn）

这对数组中的每一个对象调用fn方法。

例如：

HTMLDOM代码：

调用方法：

$（"img"）.each（function（i）{

this.src="test"+i

+".jpg";

}）;

结果：

src="test1.jpg"/>

eq（pos）

定位具体的HTMLDOM对象

HTMLDOM代码：

Thisisjustatest.

Soisthis

调用方法：

$（"p"）.eq

（1）

结果：

Soisthis

get（pos）

定位具体的HTMLDOM对象（脱掉了JQuery的包装，原始的DOM对象）

HTMLDOM代码：

调用方法：

$（"img"）.get（num）

结果：

get（）

针对所有的对象，脱掉了JQuery的包装，获取原始的DOM对象

HTMLDOM代码：

调用方法：

$（"img"）.get（）

结果：

src="test2.jpg"/>

gt（pos）

取出pos之后的所有对象

HTMLDOM代码：

调用方法：

$（"img"）.gt（0）

结果：

index（subject）

找到subject在数组中对应的index，不存在时返回-1

HTMLDOM代码：

调用方法：

$（"*"）.index（$（'#foobar'）[0]）

结果：

Length

返回对象数组的长度。

HTMLDOM代码：

调用方法：

$（"img"）.length

结果：

lt（pos）

与gt相反

HTMLDOM代码：

Thisisjustatest.

Soisthis

调用方法：

$（"p"）.lt

（1）

结果：

Thisisjustatest.

size（）

与length相同

JQueryHTMLDOM遍历和选择器

JQuery的功能很强大，可以包装任何一个HTMLDOM元素添加强大的功能，那么如何找到需要的

元素呢？

这就需要JQuerySelector来帮慢，原理上讲，JQuerySelector可以超找到HTML

DOM里的任何元素

JQuerySelector主要包含三个方面的实现：

CSS方式，XPath方式，和JQuery自定义的方式。

为了逐个讲解这些Selector，首先给大家一些基本的例子：

隐藏所有包含链接（a）的段（p）：

$（"p[a]"）.hide（）;

显示一个页面的第一个段（p）：

$（"p:

eq（0）"）.show（）;

将所有显示（visible=true）的div隐藏：

$（"div:

visible"）.hide（）;

所有无须列表（ul）的项目（li）：

$（"ul/li"）

或者$（"ul>li"）*/

获得所有class类型为foo，并且包含链接（a）的段：

$（"p.foo[a]"）;

获得所有字符内容包含Register的项目（li）

$（"li[a:

contains（'Register'）]"）;

得到name=bar的输入项目的值：

$（"input[@name=bar]"）.val（）;

获得所有被选中的button：

$（"input[@type=radio][@checked]"）

CSS方式

JQuery的CSS方式的Selector支持CSS1-CSS3标准。

与CSS中的实现完全一致的：

任何的元素

任何类型为E的元素

nth-child（n）

E元素的第n个子元素

first-child

E的第一个子元素

last-child

E的最后一个元素

only-child

E的唯一的子元素

empty

E没有子元素，也不能包含text内容

enabled

E类型的UI元素，并且不是disabled的

disabled

E类型的UI元素，并且是disabled的

checked

E类型的UI元素（radio或者checkbox），并且是checked的

selected

E类型的UI元素（option），并且是选中的（虽然CSS中没有支持，JQuery支持）

E.warning

Class=warning的元素（dot（.）表示class）

E#myid

Id=myid的元素，最多有一个元素被选中。

not（s）

E类型的元素，但是与简单selectors不匹配

E类型的F类型的后代元素

E>F

E类型的F类型的子元素（F在E之内）

E+F

F类型紧跟着E类型（F在E之后，并且紧挨着）

E~F

F类型前面连着E类型（F在E之后，不一定紧挨着）

E,F,G

E，F，G所有类型的元素

与CSS中实现稍有不同的：

E[@foo]

包含属性foo的E类型的元素

E[@foo=bar]

包含属性foo，并且属性foo的值为bar的E类型的元素

E[@foo^=bar]

包含属性foo，并且foo的值以bar开始的E类型的元素

E[@foo$=bar]

包含属性foo，并且foo的值以bar结尾的E类型的元素

E[@foo*=bar]

包含属性foo，并且foo的值包含bar的E类型的元素

E[@foo=bar][@baz=bop]

属性foo值为bar，属性baz值为bop的E类型的元素。

XPath方式

位置路径

在HTMLDOM中查找：

$（"/html/body//p"）

$（"body//p"）

$（"p/../div"）

在当前上下文中查找：

$（"p/*",this）

$（"/p//a",this）

坐标位置

子孙节点有一个子孙节点：

$（"//div//p"）

子孙节点有一个子节点：

$（"//div/p"）

$（"//div~form"）

$（"//div/../p"）

预言

$（"//input[@checked]"）

$（"//a[@ref='nofollow']"）

$（"//div[p]"）

$（"//div[p/a]"）

[last（）]or[position（）=last（）]becomes:

last

$（"p:

last"）

[0]or[position（）=0]becomes:

eq（0）or:

first

$（"p:

first"）

$（"p:

eq（0）"）

[position（）<5]becomes:

lt（5）

$（"p:

lt（5）"）

[position（）>2]becomes:

（2）

$（"p:

（2）"）

JQuery自定义的Selector

even

偶数节点选择

odd

奇数节点选择

eq（n）and:

nth（n）

第n个元素

gt（N）

排序比N大的元素

lt（N）

排序比N小的元素

first

与:

eq（0）相同

last

最后一个元素

parent

包含子元素（文本内容也算）的节点

contains（'test'）

包含test文本内容的节点

visible

所有显示的元素

hidden

所有隐藏的内容

例如：

$（"p:

first"）.css（"fontWeight","bold"）;

$（"div:

hidden"）.show（）;

$（"/div:

contains（'test'）",this）.hide（）;