jQuery权威指南学习笔记

最新推荐文章于 2021-09-06 18:44:48 发布

jiangdmdr

最新推荐文章于 2021-09-06 18:44:48 发布

阅读量1.3k

点赞数

分类专栏： AForge.NET 源程序分析系列

本文链接：https://blog.csdn.net/jiangdmdr/article/details/46571959

版权

AForge.NET 源程序分析系列专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery权威指南

2nd

jQuery：一个 JavaScript 库, 可简化了 JavaScript 编程

www 资源

Remark:

jquery vs. angularjs
* AngualrJS: web应用框架 (MVC模式)
* TodoMVC
- jQuery: 库

I think:
- AngularJs is the future direction
- jQuery is worthwhile learning, but need not put much time on it.

第1章 jQuery简介

1.1 认识jQuery

jquery可在服务端使用，安装jquery模块：$npm install -g jquery

但报错：jQuery requires a window with a document。
原因是默认安装jquery版本是最新版2.1.0，
这个版本没有jsdom，需额外安装jsdom，然后使用：


    var jsdom = require("jsdom");
    $ = require("jquery")(jsdom.jsdom().createWindow());

也可简单将jquery卸载掉，安装一个低版本，如：$npm install -g jquery@1.6.3
使用方式如下：


    var $ = require("jquery");
    var dom = $(html);
    dom.find("...")

jquery库来支持html解析 -> 在node.js 中 install jquery

npm install jquery

nodejs中使用jquery出现“jQuery requires a window with a document”错误的解决方案 http://blog.csdn.net/newborn2012/article/details/19940631

安装 jsdom: npm install jsdom
但jsdom 4 与 jquery 不兼容，而jsdom 3.x 又需Pyhton 2.7 version, 而我是Python 3.4

1.1.1 jQuery基本功能

1.1.2 jQuery 1.8 新增功能与特征

1.2 搭建jQuery开发环境

1.2.1 下载jQuery文件库

·1.2.2 引入jQuery文件库

CDN online (内容分发网络)

Google
Microsoft


    <head>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
    /jquery-1.4.min.js"></script>
    </head>

1.2.3 编写第一个简单的jQuery程序

1.3 jQuery程序的代码风格

1.3.1 “$”美元符的使用

$(selector).action()

$: jQuery对象,一个全局对象
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

上面两行代码是等价的，表示选中网页中所有的li元素。

    var listItems = jQuery('li');
    // or
    var listItems = $('li');

1.3.2 事件操作链接式书写

1.4 jQuery简单应用

$(document).ready(function(){}: 文档就绪,防止文档在完全加载（就绪）之前运行 jQuery 代码

1.4.1 jQuery访问DOM对象

jQuery对象本质上是一个构造函数，主要作用是返回jQuery对象的实例,
jQuery构造函数的参数，主要是CSS选择器

javascript访问DOM对象:

getElementById()
getElementByTagName()

1.4.2 jQuery控制DOM对象

对比JavaScript

1.4.3 jQuery控制页面CSS

1.5 本章小结

第2章 jQuery选择器 12

2.1 选择器的优势 13

2.1.1 代码更简单

2.1.2 完善的检测机制 15

2.2 jQuery选择器的类型

jQuery 选择器

jQuery 元素选择器

- jQuery 属性选择器

2.2.1 基本选择器 17

2.2.2 层次选择器 19

2.2.3 简单过滤选择器 21

2.2.4 内容过滤选择器 24

2.2.5 可见性过滤选择器 25

2.2.6 属性过滤选择器 27

2.2.7 子元素过滤选择器 29

2.2.8 表单对象属性过滤选择器 31

2.2.9 表单选择器

#

2.3 综合案例分析—导航条在项目中的应用 36

2.3.1 需求分析 36
2.3.2 界面效果 36
2.3.3 功能实现 37
2.3.4 代码分析 38
39

2.4 本章小结

第3章 jQuery操作DOM

3.1 DOM树状模型

文档对象模型(Document Object Model)

3.2 元素属性操作

3.2.1 获取元素的属性

3.2.2 设置元素的属性

3.2.3 删除元素的属性

3.3 获取和设置元素 47

3.3.1 获取和设置元素内容

jQuery

html()
text()

JavaScript

innerHTML
innerText

3.3.2 获取和设置元素值 48

3.4 元素样式操作 50

3.4.1 直接设置元素样式值 50
3.4.2 增加元素CSS类别 52
3.4.3 切换元素CSS类别 53
3.4.4 删除元素CSS类别 54

3.5 页面元素操作 54

3.5.1 创建节点元素 55
3.5.2 内部插入节点 57
3.5.3 外部插入节点 60
3.5.4 复制元素节点 61
3.5.5 替换元素节点 63

3.5.6 包裹元素节点 64

3.5.7 遍历元素

each(callback)

3.5.8 删除页面元素 67

3.6 综合案例分析—数据删除和图片预览在项目中的应用 69

3.6.1 需求分析 69
3.6.2 界面效果 69
3.6.3 功能实现 70
3.6.4 代码分析 73

3.7 本章小结

第4章 jQuery中的事件与应用

4.1 事件机制

jQuery 事件处理方法是 jQuery 核心函数。
事件处理程序:当 HTML 中发生某些事件时所调用的方法。

引用jQuery: src 属性来引用文件


    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="my_jquery_functions.js"></script>
    </head>

4.1.1 事件中的冒泡现象

4.1.2 如何阻止冒泡的发生

4.2 页面载入事件 78

4.2.1 ready()方法的工作原理 78
4.2.2 ready()方法的几种写法 78

4.3 绑定事件 79

4.3.1 使用bind()方法绑定事件 79
4.3.2 通过映射方式绑定事件 81

4.4 切换事件 83

4.4.1 hover()方法 83
4.4.2 toggle()方法 84

4.5 移除事件 86

4.5.1 unbind()方法移除元素绑定事件 86
4.5.2 unbind()方法移除自定义事件 88
4.6 其他事件 88
4.6.1 one()方法 88
4.6.2 trigger ()方法 89

4.7 jQuery中的事件应用 91

4.7.1 文本框中的事件应用 91
4.7.2 下拉列表框中的事件应用 95
4.7.3 列表中的导航菜单应用 99
4.7.4 网页选项卡的应用 104

4.8 综合案例分析—删除数据时的提示效果在项目中的应用 107

4.8.1 需求分析 107
4.8.2 界面效果 107
4.8.3 功能实现 108
4.8.4 代码分析 110

#

4.9 本章小结 112

第5章 jQuery的动画与特效 113
5.1 显示与隐藏 114
5.1.1 show()与hide()方法 114
5.1.2 动画效果的show()与hide()方法 116
5.1.3 toggle()方法 117
5.2 滑动 119
5.2.1 slideDown()与slideUp()方法 119
5.2.2 slideToggle()方法 122
5.3 淡入淡出 123
5.3.1 fadeIn()与fadeOut()方法 123
5.3.2 fadeTo()方法 125
5.4 自定义动画 127
5.4.1 简单的动画 127
5.4.2 移动位置的动画 128
5.4.3 队列中的动画 131
5.4.4 动画停止和延时 132
5.5 动画效果综述 134
5.5.1 各种动画方法说明 134
5.5.2 使用animate()方法代替其他动画效果 135
5.6 综合案例分析—动画效果浏览相册中的图片 135
5.6.1 需求分析 135
5.6.2 界面效果 136
5.6.3 功能实现 137
5.6.4 代码分析 140
5.7 本章小结

第6章 Ajax在jQuery中的应用 145

6.1 加载异步数据

AJAX = Asynchronous JavaScript and XML,
即不重载整个网页情况下，AJAX 通过后台加载数据，在网页上显示

6.1.1 传统的JavaScript方法

但是，在IE和Chrome中无效果，如何将html加载到服务器中呢？
但是，其源代码用sln打开后，再用chrome打开，可以显示其效果，不知原因？

6.1.2 jQuery中的load()方法

6.1.3 jQuery中的全局函数getJSON()

6.1.4 jQuery中的全局函数getScript()

6.1.5 jQuery中异步加载XML文档

6.2 请求服务器数据 154

6.2.1 $.get()请求数据 155 6.2.2$ .post()请求数据 156
6.2.3 serialize()序列化表单

6.3 $.ajax()方法 161

6.3.1 $.ajax()中的参数及使用方法 161 6.3.2$ .ajax()在数据交互中的应用 162
6.3.3 $.ajaxSetup()设置全局Ajax

6.4 Ajax中的全局事件 167

6.4.1 Ajax全局事件的参数及功能 167
6.4.2 ajaxStart与ajaxStop全局事件

6.5 综合案例分析—使用Ajax实现新闻点评即时更新 170

6.5.1 需求分析 170
6.5.2 界面效果 170
6.5.3 功能实现 171
6.5.4 代码分析

6.6 本章小结

第7章 jQuery中调用JSON与XML数据 178

7.1 jQuery调用JSON数据 179
7.1.1 JSON数据的基础知识 179
7.1.2 jQuery读取JSON数据 180
7.1.3 jQuery 遍历JSON 数据 182
7.1.4 jQuery 操作JSON 数据 185
7.2 jQuery调用XML数据 187
7.2.1 使用传统JavaScript调用XML的方法 187
7.2.2 jQuery 解析XML 数据 189
7.2.3 jQuery读取XML 数据 191
7.2.4 jQuery操作XML 数据 194
7.3 综合案例分析—调用JSON实现下拉列表框三级联动 197
7.3.1 需求分析 197
7.3.2 界面效果 198
7.3.3 功能实现 198
7.3.4 代码分析 200
7.4 综合案例分析—调用XML实现无刷新即时聊天 201
7.4.1 需求分析 201
7.4.2 界面效果 201
7.4.3 功能实现 202
7.4.4 代码分析 205
7.5 本章小结 205

第8章 jQuery中的插件 206

8.1 如何调用jQuery插件

8.2 jQuery常用插件

8.2.1 验证插件validate

8.2.2 表单插件form

8.2.3 Cookie插件cookie

8.2.4 搜索插件AutoComplete

8.2.5 图片灯箱插件NotesForLightBox

8.2.6 右键菜单插件ContextMenu

8.2.7 图片放大镜插件jQZoom

8.2.8 图片切换插件Nivo Slider

8.2.9 动画表格排序插件TableSort

8.2.10 进度条插件ProgressBar

8.2.11 页面加载遮盖插件LoadMask

8.2.12 数据分页插件Pagination

8.2.13 消息通知条插件Activebar2

8.2.14 滚动条插件NiceScroll

8.3 自定义jQuery插件 253

8.3.1 自定义插件的种类 253
8.3.2 插件开发要点 254
8.3.3 对象级别插件的开发 254
8.3.4 类级别插件的开发 257

8.4 综合案例分析—使用uploadify插件实现文件上传功能 260

8.4.1 需求分析 260
8.4.2 界面效果 261
8.4.3 插件介绍 262
8.4.4 功能实现 263
8.4.5 代码分析 264

8.5 本章小结

第9章 jQuery UI插件 269

9.1 认识jQuery UI 270

9.2 jQuery UI交互性插件

9.2.1 拖曳插件draggable 271

9.2.2 放置插件droppable 273
9.2.3 排序插件sortable

9.3 jQuery UI微型插件

9.3.1 折叠面板插件accordion 278
9.3.2 日务插件datepicker 281
9.3.3 选项卡插件tabs 285
9.3.4 对话框插件dialog

9.4 jQuery UI 1.9新增功能 293

9.4.1 菜单工具插件menu 294
9.4.2 微调按钮插件spinner 297
9.4.3 工具提示插件tooltip

9.5 综合案例分析—使用jQuery UI插件以拖动方式管理相册 304

9.5.1 需求分析 304
9.5.2 界面效果 305
9.5.3 功能实现 306

9.5.4 代码分析

9.6 本章小结

第10章 jQuery实用工具函数

10.1 工具函数的分类 314

10.2 浏览器的检测 314

10.2.1 浏览器名称或版本信息

$.browser:

10.2.2 盒子模型 316

10.3 数组和对象的操作 318

10.3.1 遍历数组

$.each(): 遍历

10.3.2 遍历对象 319

10.3.3 数据筛选

$.grep(): 筛选

10.3.4 数据变更

10.3.5 数据搜索 323

10.4 字符串操作 324

10.5 测试操作 326

10.5.1 检测对象是否为空 326
10.5.2 检测对象是否为原始对象 327
10.5.3 检测两个节点的包含关系 329

10.6 URL操作 330

10.7 其他工具函数 331

10.7.1 $.proxy()函数调用语法 331
10.7.2 改变事件函数的作用域 332

10.8 工具函数的扩展 334

10.8.1 使用$.extend()扩展工具函数 334

10.8.2 使用$.extend()扩展Object对象 335

10.9 综合案例分析—使用jQuery扩展工具函数实现对字符串指定类型的检测 336

10.9.1 需求分析 336
10.9.2 界面效果 336
10.9.3 功能实现 336

10.9.4 代码分析 339

10.10 本章小结

第11章 jQuery常用开发技巧 342

11.1 快速控制页面元素 343

11.1.1 居中显示元素 343
11.1.2 捕获鼠标位置 345

11.2 使用工具函数$.support检测浏览器的信息 348

11.3 调用jQuery中的方法 350

11.3.1 使用预加载方法预览图片 350
11.3.2 通过html()方法判断元素是否为空 353
11.3.3 使用replace()和replaceWith()方法替换内容 354

11.4 巧用jQuery中的事件 357

11.4.1 开启或禁止页面右键菜单 357
11.4.2 限制文本输入框中字符的数量 359
11.5 jQuery集合处理功能 361

11.6 常用自定义方法与插件 363

11.6.1 自定义选择器 363
11.6.2 自定义样式 365

11.6.3 自定义插件

11.7 本章小结 369

第12章 jQuery性能优化

12.1 jQuery性能优化常用策略 371

12.1.1 优先使用ID与标记选择器 371

12.1.2 使用jQuery对象缓存 372
12.1.3 正确使用选择器 373
12.1.4 使用最新版本的jQuery 374
12.1.5 避免过度使用jQuery对象 374
12.1.6 更多地使用链接式写法 374
12.1.7 正确处理元素间父子关系 375
375

12.1.8 正确使用循环语句

12.2 优化选择器执行的速度 376

12.2.1 处理选择器中不规范元素标志 376
12.2.2 使用子查询优化选择器性能 378
12.2.3 给选择器一个上下文 380

12.3 使用方法优化性能 381

12.3.1 使用target()方法优化事件中的冒泡现象 381

12.3.2 使用data()方法存取普通数据 383
12.3.3 使用data()方法存取JSON数据 385

12.4 优化DOM元素的操作 386

12.4.1 减少对DOM元素直接操作 386
12.4.2 正确区分DOM对象与jQuery对象 388

12.5 jQuery库与其他库冲突的解决方案 390

12.5.1 jQuery在其他库前导入 390
12.5.2 jQuery在其他库后导入 392

12.6 本章小结 394

第13章 jQuery在HTML 5中的应用

13.1 使用jQuery与HTML 5开发自定义视频播放器 396

13.1.1 需求分析

question:

用vs 2013 打开sln，没有图像？
直接用chrome则可?

13.1.2 界面效果 396

13.1.3 功能实现 397

13.1.4 代码分析

13.2 使用jQuery与HTML 5实现图片任意旋转效果 405

13.2.1 需求分析 405

13.2.2 界面效果 405

13.2.3 功能实现 406

13.2.4 代码分析 409

13.3 使用jQuery与HTML 5开发拼图游戏 410

13.3.1 需求分析 410

13.3.2 界面效果 411
13.3.3 功能实现 412
13.3.4 代码分析 418

13.4 使用jQuery与HTML 5开发星球大战游戏 419

13.4.1 需求分析 419

13.4.2 界面效果 419
13.4.3 功能实现 420
13.4.4 代码分析 424

13.5 本章小结

第14章 jQuery Mobile基础知识

JQueryMobile + PhoneGap (Cordova)
傻瓜式APP开发工具？

14.1 初识jQuery Mobile 428

14.1.1 jQuery Mobile框架简介 428

14.1.2 jQuery Mobile工作原理 428

14.1.3 开发第一个jQuery Mobile页面 428

14.2 jQuery Mobile基本组件 430

14.2.1 对话框元素 430

14.2.2 工具栏元素 432

14.2.3 内容布局 434

14.2.4 按钮 436

14.2.5 表单元素 438

14.2.6 列表视图 440

14.3 jQuery Mobile API接口应用 442

14.3.1 默认配置设置

14.3.2 方法 444

14.3.3 事件 445
14.3.4 页面主题 448

14.4 本章小结 450

第15章 jQuery Mobile综合案例开发

15.1 新闻订阅管理系统 452

15.1.1 需求分析 452

15.1.2 界面效果 452
15.1.3 功能实现 453
15.1.4 代码分析 464

15.2 记事本管理 467

15.2.1 需求分析 467
15.2.2 界面效果 468
15.2.3 功能实现 469
15.2.4 代码分析 480

15.3 本章小结 483

第16章 jQuery综合案例开发 484

16.1 切割图片 485

16.1.1 需求分析 485
16.1.2 界面效果 485
16.1.3 功能实现 486

16.1.4 代码分析 491

16.2 在线聊天室 493

16.2.1 需求分析 493
16.2.2 界面效果 494
16.2.3 功能实现 494

16.2.4 代码分析 505

16.3 本章小结

jiangdmdr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery权威指南学习笔记

jQuery权威指南2ndjQuery：一个 JavaScript 库, 可简化了 JavaScript 编程www 资源W3SchooljQuery概述JavaScript 标准参考教程Remark:jquery vs. angularjs * AngualrJS: web应用框架 (MVC模式) * TodoMVC jQuery: 库I think: - An
复制链接

扫一扫