jquery基本文档分析和总结.docx

目录

Core 2

DOM 13

CSS 55

Javascript 62

Effects 69

Events 76

Ajax 99

Plugins 114

一：核心部分

三：CSS操作 15

四：JavaScript处理

五：动态效果

六：事件处理

七：Ajax支持

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写

js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！下载地址：Starterkit（http://jquery.bassistance.de/jquery-starterkit.zip）

jQueryDownloads（/src/）下载完成后先加载到文档中，然后我们来看个简单的例子！

scriptlanguage=javascripttype=text/javascript

$(document).ready(function(){

$(a).click(function(){alert(Helloworld!);

});

});

上边的效果是点击文档中所有a标签时将弹出对话框，$(a)是一个jQuery选择器，

$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click()是这个对象的方法，同理

$(document)也是一个jQuery对象，ready(fn)是$(document)的方法，表示当document

全部下载完毕时执行函数。

在进行下面内容之前我还要说明一点$(p)和$(#p)的区别,$(p)表示取所有p标签

(p/p)的元素,$(#p)表示取id为p(span id=p/span)的元素.

我将从以下几个内容来讲解jQuery的使用:1:核心部分

2:DOM操作

3:css操作4:javascript处理5:动态效果6:event事件7:ajax支持

8:插件程序

一：核心部分

$(expr)

说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础

参数：expr：字符串，一个查询表达式或一段html字符串例子：

未执行jQuery前：

pone/p

div

ptwo/p

/div

pthree/p

ahref=#id=testonClick=jq()jQuery/ajQuery代码及功能：

functionjq(){

alert($(divp).html());

}

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容

functionjq(){

$(divpHello/p/div).appendTo(body);

}

运行：当点击id为test的元素时，向body中添加“divpHello/p/div”

$(elem)

说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象参数：elem：通过jQuery对象压缩的DOM元素

例子：

未执行jQuery前：

pone/p

div

ptwo/p

/divpthree/p

ahref=#id=testonClick=jq()jQuery/ajQuery代码及功能：

functionjq(){

alert($(document).find(divp).html());

}

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容

functionjq(){

$(document.body).background(black);

}

运行：当点击id为test的元素时，背景色变成黑色

$(elems)

说明：限制jQuery作用于一组特定的DOM元素

参数：elem：一组通过jQuery对象压缩的DOM元素例子：

未执行jQuery前：

formid=form1

inputtype=textname=textfield

inputtype=submitname=Submitvalue=提交

/form

ahref=#id=testonClick=jq()jQuery/ajQuery代码及功能：

functionjq(){

$(form1.elements).hide();

}

运行：当点击id为test的元素时，隐藏form1表