JQuery学习文档_20090121.doc

JQuery学习文档 Revision History 版本 日期 页数 详细说明 1.0 2009-01-19 Shirley新建 2.0 2009-01-21 Shirley对文档内容重新整理，并补充 目录 一、JQuery簡介 1 二、JQuery基礎知識 1 2.1、定位元素 1 2.2、元素操作 3 2.3、連續使用函數 7 2.4、document ready 事件 7 2.5、常用事件 8 三、JQuery進階學習 9 3.1、Ajax的應用 9 3.2、學習資料 12 附錄：Plugins 1 下拉菜單及級聯菜單 1 表單及表單內常用控件 2 文本編輯器 6 AJAX 8 燈箱效果 8 圖表 9 Other 10 JQuery简介 JQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是：Write less, Do more! JQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。相对于其它的Javascript框架，还有一个比较大的优势，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的Plugin可供选择。 但对于处理窗体验证，找到的数据和相关的Plugin都较少。 官方网址： 当前必威体育精装版版本是：1.3.0，压缩版本是53.7 KB，未压缩版本114KB JQuery基础知识 程序中采用的版本是：1.3.0的未压缩版本。 下面讲到的范例见：JQuery学习文档Shirley.rar压缩文件中的03-Exercise\ 01-JQuery\ 2.1、定位元素 JavaScript中的document.getElementById(“id”)，在JQuery中有了更简练的写法：$(“parameter”) 注：钱记号 $ 是 jQuery 的对象。 $ 是 「jQuery」这个对象的缩写，也就是说下面所用 $() 的地方，都可以改写成用 jQuery()。 这是一段原始的 HTML： 以下用一连串的范例，以蓝色字体展示一些基本的语法并且以深色字显示文件中会被选取的元素。 $(div) div id=body ??h2Some Header/h2 ??div class=contents ? ? p.../p ? ? p.../p ??/div /div 解释：选取所有 div $(#body) div id=body ??h2Some Header/h2 ??div class=contents ? ? p.../p ? ? p.../p ??/div /div 解释：选取 id 为 body 的元素 $(div#body) div id=body ??h2Some Header/h2 ??div class=contents ? ? p.../p ? ? p.../p ??/div /div 解释：选取 id 为 body 的 div $(div.contents p) div id=body ??h2Some Header/h2 ??div class=contents ? ? p.../p ? ? p.../p ??/div /div 解释：选取 class 为 contents 的 div 所包住的所有下层的 p $(div div) div id=body ??h2Some Header/h2 ??div class=contents ? ? p.../p ? ? p.../p div/div ??/div div!!!/div /div 解释：选取被 div 包住的下一层 div $(div:has(div)) div id=body ??h2Some Header/h2 ??div class=contents ? ? p.../p ? ? p.../p ??/div /div 解释：和前一个范例相反，这边是选取至少有包住一个 div 的 div 2.2、元素操作 透过jQuery内建的函数，你可以： 对 DOM 进行操作，例如对文件节点的新增或修改 添加事件处理 做一些基本的视觉效果，例如隐藏、显示、下拉显示、淡出淡入等等 使用 AJAX 传送窗体属性或取得远程文件 [范例1] 选取所有有target属性的a，并且在其节点下加入一段文字。 $(a[target]).append((Opens inNew Window)); 这是一段原始的 HTML : 執行後的壓頂 在执行后产生的效果等同于以下代码： [范例2] 选取 id 为 body 的元素，并且修改两个 css 属性。 $(#body).css({?? borde