JQuery培训教程.pdfVIP

——Power By Shanxinghua 一：核心部分2 二：DOM操作 5 三：CSS操作 12 四：JavaScript处理12 五：动态效果 13 六：事件处理 15 七：Ajax支持 16 八：jQuery 插件 18 jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持， 使我们写js变得更加方便！如果你不是个js高手又 想写出优 秀的js效果，jQuery可以 帮你达到目的！大家可以看看有keel翻译的jQuery 入门 （/jQuery_getting_started.html）对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=su