jquery明教程.docVIP

前注：jquery是一个很强大的js框架，使用它您可以很方便简洁的获得你想要的效果，本文对其做一简明教程，在本文的基础上，推荐更详细的教程《Learning jQuery》 ，可以到 HYPERLINK /source/1123240/ \o 这里下载 这里下载PDF版及其源代码 对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！ ?? ?下载地址： ?? ?下载完成后先加载到文档中，然后我们来看个简单的例子！ script language=javascript type=text/javascript ?? ?? ? $(document).ready(function(){ ?? ? ? ? $(a).click(function() { ?? ? ? ? alert(Hello world!); ?? ?}); }); script ?? ? ?上边的效果是点击文档中所有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? ?? ? a href=# id=test onClick=jq() jQuery/a jQuery代码及功能：? function jq(){ ? ?? ? alert($(div p).html()); ? } 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容? function jq(){ ?? ? $(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 a href=# id=test onClick=jq()jQuery/a jQuery代码及功能：? function jq(){ ?? ? alert($(document).find(div p).html()); } 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容? function jq(){ ?? ?$(document.body).background(black); } 运行：当点击id为test的元素时，背景色变成黑色 $(elems) 说明：限制jQuery作用于一组特定的DOM元素 参数： elem：一组通过jQuery对象压缩的DOM元素 例子： 未执行jQuery前：? form id=form1 ?? ? ? input type=text name=textfield ?? ? ? input type=submit name=Submit value=提交 /form a href=# id=test onClick=jq()jQuery/a jQuery代码及功能：? function jq(){? ?? ?$(form1.elements ).hide();? } 运行：当点击id为test的元素时，隐藏form1表单中的所有元素。 $(fn) 说明：$(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！ 参数：fn (Function):当文档