jQuery从零开始学

<a href="http://item.jd.com/10380014259.html">jd buy</a>

作者:刘鑫

出版日期:2015.09.01

第 1章 jQuery入门.. 1

1.1 什么是 jQuery ..... 1

1.1.1 jQuery的功能以及它与 JavaScript的区别 ..... 1

1.1.2 下载并配置 jQuery运行环境 ... 5

1.2 使用 Dreamweaver编写第一个包含 jQuery库的网站 6

1.3 认识 jQuery库的基础知识 10

1.3.1 jQuery库的核心方法——$() . 10

1.3.2 jQuery代码的风格 11

1.3.3 jQuery库延迟等待加载模式 .. 12

1.3.4 jQuery对象与 DOM对象间的转换... 12

1.4 调试 jQuery程序 .... 14

1.4.1 在 Chrome中调试 . 14

1.4.2 在 Firefox中调试 .. 17

1.5 常见问题 ..... 19

1.5.1 为什么要使用一些著名公司的 CDN?... 19

1.5.2 写 jQuery和直接写 JavaScript的区别? 20

1.5.3 jQuery与其他 JavaScript库有什么区别? ... 21

1.5.4 ASP.NET支持 jQuery吗?.... 21

第 2章 jQuery选择器 .. 22

2.1 基本选择器 . 22

2.1.1 标签选择器 24

2.1.2 id选择器 .... 24

2.1.3 类选择器 .... 25

2.1.4 使用选择器组合 .... 25

2.1.5 使用*通配符选择器 .... 26

2.2 层次选择器 . 26

2.2.1 后代选择器 27

2.2.2 父子选择器 28

2.2.3 相邻选择器 29

2.2.4 平级选择器 29

2.3 过滤选择器 . 30

2.3.1 基本过滤选择器 .... 31

2.3.2 内容过滤选择器 .... 34

2.3.3 可见性过滤选择器 35

2.3.4 属性过滤选择器 .... 37

2.3.5 子元素过滤选择器 39

2.3.6 表单对象属性过滤器 .. 41

2.4 表单选择器 . 43

2.5 常见问题 ..... 45

2.5.1 $("input")和$(":input")这两个选择器有什么区别?. 45

2.5.2 子选择器和后代选择器有什么区别? .... 45

2.5.3 获得 class为 sub的元素的子节点下所有标签 .. 45

第 3章 用 jQuery来操作 DOM 46

3.1 修改元素属性 ... 46

3.1.1 获取元素的属性 .... 46

3.1.2 设置元素的属性 .... 48

3.2 修改元素内容 ... 49

3.3 动态创建内容 ... 51

3.4 动态插入节点 ... 51

3.5 动态删除节点 ... 55

3.6 实例 1:超链接提示效果 .. 57

3.7 实例 2:图片预览效果 59

3.8 常见问题 ..... 61

3.8.1 tagName和 attribute的区别? ..... 61

3.8.2 attr方法和 prop方法都是获取元素的属性吗? 62

第 4章 jQuery的事件与事件对象 .. 63

4.1 jQuery中的事件 ..... 63

4.1.1 什么是事件 63

4.1.2 jQuery所支持的事件和事件类型 64

4.2 页面初始化事件 ..... 66

4.3 绑定事件 ..... 67

4.4 移除事件绑定 ... 70

4.5 切换事件 ..... 71

4.6 表单中的常见事件 . 72

4.6.1 表单元素焦点的获取和失去 .. 73

4.6.2 文本域高度的动态变化 .... 74

4.6.3 表单的验证 76

4.7 常见问题 ..... 79

4.7.1 ready与 load谁先执行? . 79

4.7.2 用 bind绑定事件和用 live绑定事件有什么区别? . 80

第 5章 原始 AJAX与 jQuery中的 AJAX ... 81

5.1 两个 AJAX的对比. 81

5.1.1 原始 AJAX应用举例.. 81

5.1.2 使用 jQuery 中的 AJAX举例 84

5.2 使用 jQuery的 AJAX函数进行页面交互 85

5.2.1 使用 AJAX快捷函数.. 85

5.2.2 使用底层函数 ajax().... 86

5.2.3 AJAX 全局配置和事件.... 89

5.3 跨域的 AJAX-JSONP... 91

5.3.1 什么是 JSONP . 91

5.3.2 JSONP的实现原理 ..... 92

5.3.3 JSONP在 jQuery中的应用 .... 93

5.4 AJAX综合案例——数据实时更新的微博页面.. 96

5.4.1 微博的功能分析 .... 96

5.4.2 微博实时更新的代码实现和效果演示 .... 96

5.5 常见问题 ..... 99

5.5.1 jQuery中的 post和$.ajax的区别. 99

5.5.2 jQuery AJAX中的 readyState和 status的区别... 99

第 6章 jQuery中的动画效果 . 101

6.1 jQuery库所支持的动画方法 . 101

6.1.1 基本动画方法 101

6.1.2 滑动动画方法 102

6.1.3 淡入淡出动画方法 .... 102

6.2 实例 1:实现可折叠的列表 .. 103

6.3 实例 2:按钮的淡入淡出效果 .... 105

6.4 自定义动画 animate.... 107

6.4.1 一个最简单的自定义动画 .... 108

6.4.2 一个稍微复杂的自定义动画 109

6.5 常见问题 ... 110

6.5.1 jQuery的动画能随时停止吗? .... 110

6.5.2 可以用 animate方法来操作所有 CSS属性吗? .... 110

第 7章 jQuery插件.....111

7.1 认识 jQuery插件 .. 111

7.1.1 什么是插件 .... 111

7.1.2 常用的插件网站 .. 115

7.2 开发自己的插件 ... 118

7.2.1 jQuery的插件类型 .... 118

7.2.2 实例 1:对象级别的插件开发 ... 119

7.2.3 实例 2:类级别的插件开发 . 121

7.3 用第三方插件创建自己的网站 ... 124

7.3.1 网站结构设计 124

7.3.2 下载第三方插件 .. 126

7.3.3 使用第三方插件 .. 127

7.3.4 网站最终效果 130

7.4 常见问题 ... 132

7.4.1 jQuery和 jQuery插件有什么区别吗?. 132

7.4.2 开发或使用 jQuery插件要注意它的版本吗? . 132

第 8章 jQuery的 UI插件. 133

8.1 基于 jQuery的扩展–jQuery UI插件. 133

8.2 下载 jQuery UI插件... 134

8.3 利用 jQuery UI实现页面交互..... 135

8.3.1 拖动组件 Draggable的使用 . 135

8.3.2 拖放组件 Droppable的使用 . 137

8.3.3 实例:模拟 Windows系统“回收站”. 138

8.4 利用 jQuery UI实现页面中的进度条..... 143

8.4.1 进度条工具集的使用 143

8.4.2 实例:实现进度条效果 .. 144

8.5 利用 jQuery UI实现页面中的滑动条..... 145

8.5.1 滑动条工具集的使用 146

8.5.2 实例 1:实现图片滑块滚动条效果 . 147

8.5.3 实例 2:实现简单颜色调色器 ... 150

8.6 利用 jQuery UI实现页面中的日历... 153

8.6.1 日历 DatePicker的使用 .. 153

8.6.2 实例 1:一个简单的日历应用 ... 157

8.6.3 实例 2:制作同时显示多个月份的日历 ..... 160

8.6.4 实例 3:限制日历的选择范围 ... 160

8.6.5 实例 4:有动画效果的日历显示 ..... 161

8.7 利用 jQuery UI实现手风琴效果. 162

8.7.1 折叠面板工具集的使用 .. 162

8.7.2 实例:实现经典的导航菜单 164

8.8 设计页面中各种对话框效果 . 165

8.8.1 对话框工具集的使用 165

8.8.2 实例:实现弹出和确认信息对话框效果 .... 167

8.9 实现幻灯和分页效果 . 170

8.9.1 选项卡工具集的使用 171

8.9.2 实例 1:经典的选项卡效果 . 172

8.9.3 实例 2:实现幻灯效果 ... 174

8.9.4 实例 3:实现分页效果 ... 177

8.10 常见问题 . 179

8.10.1 jQuery UI和 jQuery Easy UI的区别.... 179

8.10.2 jQuery UI内容太多,如何实现自己定制呢?..... 180

第 9章 常用的一些 jQuery插件... 181

9.1 使用表单插件创建留言表单 . 181

9.2 图片文件上传插件 ..... 185

9.2.1 下载 jQuery File Upload插件 ..... 185

9.2.2 实现多图片上传 .. 188

9.3 可拖放的布局插件 ..... 198

9.3.1 下载 gridster.js插件 .. 198

9.3.2 实现动态缩放可拖放布局应用 .. 201

9.4 谷歌地图插件 . 206

9.4.1 下载 Gmap3地图插件 .... 206

9.4.2 实现在线地图搜索功能 .. 211

9.5 动画插件的应用 ... 216

9.5.1 下载 Motio插件 .. 216

9.5.2 使用 Motio插件实现精灵(Sprite)模式动画 226

9.5.3 开发 360度全景动画网页应用 .. 230

9.6 常见问题 ... 235

9.6.1 如何拓展第三方插件的行为? .. 235

9.6.2 使用多个插件时避免重复引入 jquery.js文件 .. 236

第 10章 jQuery Mobile移动开发. 237

10.1 初步接触 jQuery Mobile 237

10.1.1 下载 jQuery Mobile . 237

10.1.2 推荐使用 Dreamweaver编辑器开发 jQuery Mobile... 239

10.1.3 创建第一个 jQuery Mobile文件 .... 239

10.1.4 在 PC上测试 jQuery Mobile..... 240

10.1.5 如何应用 jQuery Mobile开发的页面 .. 244

10.2 使用 jQuery Mobile进行开发 ... 244

10.2.1 选择页面中的元素 .. 244

10.2.2 设置页面中元素的属性 245

10.3 应用 jQuery Mobile中的控件 ... 245

10.3.1 在界面中固定一个工具栏 .. 245

10.3.2 使用按钮实现菜单界面 248

10.3.3 使用表单做一个手版 QQ登录 251

10.3.4 使用列表做一个类贴吧的应用 256

10.3.5 使用对话框实现一个相册 .. 259

10.4 实例 1:利用 jQuery Mobile实现电子书阅读器 .. 263

10.5 实例 2:利用 jQuery Mobile 实现开发印象笔记 . 266

10.6 常见问题 . 268

10.6.1 jQuery Moible为什么在切换页面时会出现白屏现象 ..... 268

10.6.2 data-rel="back"和 data-direction="reverse"有什么区别 .... 268

第 11章 实战 1:实现 QQ邮箱附件的拖放上传功能. 269

11.1 认识 FileDrop.js插件 ..... 270

11.1.1 下载 FileDrop.js插件 .... 270

11.1.2 使用插件实现文件拖拽上传 .... 274

11.2 开发图片拖拽上传 Web应用.... 278

11.2.1 HTML5文件上传功能.. 278

11.2.2 图片拖拽上传 HTML代码. 278

11.2.3 图片拖拽上传 CSS代码 ..... 280

11.2.4 图片拖拽上传 JS代码 .. 281

11.2.5 图片拖拽上传服务器端 PHP代码. 284

11.2.6 图片拖拽上传 Web应用最终效果. 285

第 12章 实战 2:利用 jQuery Mobile开发一个手机博客. 287

12.1 项目规划 . 287

12.2 主界面设计 ... 289

12.3 文章列表的设计 . 291

12.4 文章内容页的实现 ... 296

12.5 文章类的设计 ..... 299

12.6 测试环境的搭建 . 301

12.7 数据库的设计 ..... 306

12.8 内容页功能的实现 ... 312

12.9 文章列表的实现 . 318

12.10 首页的实现 . 323

第 13章 实战 3:打造在线播放器 ..... 326

13.1 认识 MediaElement.js插件.. 327

13.1.1 下载音视频播放器插件 327

13.1.2 开发一个简单的播放器应用 .... 330

13.1.3 使用 MediaElement.js插件模仿 Windows Media Player .. 334

13.2 实现在线播放器 . 336

13.2.1 在页面中添加 MediaElement.js 337

13.2.2 构建播放器页面布局 .... 337

13.2.3 播放器页面初始化 .. 338

第 14章 实战 4:构建股票实时走势图 .... 340

14.1 准备 jqChart图表插件 ... 341

14.1.1 下载 jqChart图表插件 .. 341

14.1.2 开发一个柱状图应用 .... 343

14.1.3 开发一个折线图应用 .... 354

14.2 构建股票实时走势图 ..... 359

14.2.1 添加 jqChart图表插件库文件 .. 359

14.2.2 构建实时图页面的布局 360

14.2.3 模拟股票实时图的初始化 .. 361

14.2.4 模拟股票实时走势图的最终效果 .. 364

本页共235段,6185个字符,10222 Byte(字节)