学步园

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！
   下载地址：Starterkit （
http://jquery.bassistance.de/jquery-starterkit.zip


）
                       jQuery Downloads （
http://jquery.com/src/


）

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

     上边的效果是点击文档中所有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前：

jQuery代码及功能：

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

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

$(elem)


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

jQuery代码及功能：

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

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


$(elems)


说明：限制jQuery作用于一组特定的DOM元素
参数： elem：一组通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：

jQuery代码及功能：

运行：当点击id为test的元素时，隐藏form1表单中的所有元素。

$(fn)


说明：$(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！
参数：fn (Function):当文档载入时执行的函数！
例子：

运行：当文档载入时背景变成黑色，相当于onLoad。

$(obj)


说明：复制一个jQuery对象，
参数：obj (jQuery): 要复制的jQuery对象
例子：
未执行jQuery前：

jQuery代码及功能：

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

each(fn)


说明：将函数作用于所有匹配的对象上
参数：fn (Function): 需要执行的函数
例子：
未执行jQuery前：

jQuery代码及功能：

运行：当点击id为test的元素时，img标签的src都变成了2.jpg。

eq(pos)


说明：减少匹配对象到一个单独得dom元素
参数：pos (Number): 期望限制的索引，从0 开始
例子：
未执行jQuery前：

jQuery代码及功能：

运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容


get() get(num)



说明：获取匹配元素，get(num)返回匹配元素中的某一个元素
参数：get (Number): 期望限制的索引，从0 开始
例子：
未执行jQuery前：

jQuery代码及功能：

运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容

注意get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML



index(obj)



说明：返回对象索引
参数：obj (Object): 要查找的对象
例子：
未执行jQuery前：

jQuery代码及功能：

运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1


size()   Length



说明：当前匹配对象的数量，两者等价
例子：
未执行jQuery前：

jQuery代码及功能：

运行：当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象














 

                                                   二：DOM操作



属性


我
们以<img id="a" scr="5.jpg"/>为例，在原始的javascript里面可以用var
o=document.getElementById('a')取的id为a的节点对象，在用o.src来取得或修改该节点的scr属性，在jQuery
里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/>
]，然后可以用jQuery提供的很多方法来进行操作，如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对
象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作
herf()   herf(val)

说明：对jQuery对象属性herf的操作。
例子：
未执行jQuery前

jQuery代码及功能：

运行：先弹出对话框显示id为test的连接url，在将其url改为2.html，当弹出对话框后会看到转向到2.html
同理，jQuery还提供类似的其他方法，大家可以分别试验一下：
herf()  herf(val)   html()  html(val)   id()  id (val)  name()  name (val)   rel()  rel (val)
src()    src (val)   title()  title (val)   val()  val(val)



操作


after(html)  在匹配元素后插入一段html

jQuery代码及功能：

执行后相当于：

after(elem)  after(elems)  将指定对象elem或对象组elems插入到在匹配元素后

jQuery代码及功能

执行后相当于

append(html)在匹配元素内部，且末尾插入指定html

jQuery代码及功能：

执行后相当于

同理还有append(elem)  append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解！

ap
pendTo(expr)  与append(elem)相反

jQuery代码及功能

执行后相当于

clone() 复制一个jQuery对象

jQuery代码及功能：

复制$("#test")然后插入到<a>后,执行后相当于

empty() 删除匹配对象的所有子节点

jQuery代码及功能：

执行后相当于

insertAfter(expr)   insertBefore(expr)


     按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)

prepend (html)  prepend (elem)  prepend (elems)   在匹配元素的内部且开始出插入


通过下面例子区分append(elem)  appendTo(expr)  prepend (elem)

执行
$("#a").append($("div"))
后相当于

执行
$("#a").appendTo($("div")) 
后 相当于

执行
$("#a").prepend ($("div"))
 后 相当于

remove()  删除匹配对象

注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象

wrap(htm) 将匹配对象包含在给出的html代码内

jQuery代码及功能：

执行后相当于

wrap(elem) 将匹配对象包含在给出的对象内

jQuery代码及功能：

执行后相当于

遍历、组合


add(expr)  在原对象的基础上在附加符合指定表达式的jquery对象

jQuery代码及功能：