JQuery教程自学笔记JQuery教程自学笔记.doc

JQuery教程自学笔记 目 录 JQuery教程自学笔记 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画效果 18 2.2.5 终止动画 20 2.2.6 回调函数 20 2.2.7 方法链 22 2.3 HTML操作 23 2.3.1 HTML 取值 23 2.3.2 HTML 赋值 25 2.3.3添加HTML元素 28 2.3.4设置或取得元素的CSS class 34 2.3.5读写HTML元素的css 属性 36 2.3.6 操作HTML元素的长宽大小 37 三、JQuery UI 39 3.1 概述 39 3.2 JQuery UI 基本工作过程 41 3.2.1初始化 41 3.2.2 方法 42 3.2.3 通用方法 42 3.2.4 事件 43 3.2.5 共有事件 43 3.3 JQuery UI示例 44 3.3.1 Accordion组件（手风琴似折叠） 44 3.3.2 JQuery UI Autocomplete（自动完成） 56 3.3.3 JQuery UI Button（按钮） 63 3.3.4 JQuery UI Datepicker (时间控件) 69 3.3.5 JQuery UI Dialog (对话框) 79 3.3.6 JQuery UI Menu （JQuery菜单） 88 3.3.7 JQuery UI Progressbar (进度条) 92 3.3.8 JQuery UI Slider (滑动条) 96 3.3.9 JQuery UI Spiner (微调框) 101 3.3.10 JQuery UI Tab (标签页) 103 3.3.11 JQuery UI Tooltip (提示条) 111 参考：/column/details/mapdigitjquery.html 一、概述 JQuery是一套跨浏览器的JavaScript函式库，简化HTML与JavaScript之间的操作，下面为摘自Wikepedia上的JQuery说明： JQuery 是开源软件，使用MIT许可证授权。[4] JQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择DOM元素、创建动画效果、处理事件、以及开发Ajax程序。JQuery 也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使 JQuery 函数库能够创建功能强大的动态网页以及网络应用程序。 JQuery有下列特色: ?跨浏览器的DOM元素选择 ?DOM巡访与更改：支援CSS 1-3与 基本的XPath，JQuery 1.2版以后默认取消XPath支持，改为插件支持 ?事件（Events） ?CSS操纵 ?特效和动画（移动显示位置、淡入、淡出） ?Ajax ?延伸性（Extensibility） ?工具：例如浏览器版本和each函数。 ?JavaScript插件 ?轻量级 下载jquery可在 /download/ 下载 下载后，引入jquery为如下： %@ page language=java contentType=text/html; charset=utf-8 pageEncoding=utf-8% % String contextPath = request.getContextPath(); % !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=utf-8 titleJQuery Learning/title script src=%=contextPath %/js/jquery/jquery-1.10.2.js/script /head body /body /html 二、JQuery技术综述 2.1 JQuery基本语法 $(selector).action() ? $ 符合定义这是一个JQuery语句 ? (selector) 用来选择某个HTML元素，其语法和CSS的selector语法一样。 ?act