×

jQuery介绍及基本使用

前端技术网 前端技术网 发表于2024-01-29 05:16:16 浏览1468 评论0

抢沙发发表评论

一、jQuery开发技术详解的前言

jQuery是一个优秀的开源JavaScript库。它的体积很小,代码风格独特而又优雅,改变了JavaScript程序员编写程序的方式和思路。jQuery库有一条设计理念,那就是“写的少,做的多”(write less, do more)。其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的AJAX使其在众多优秀的JavaScript库中脱颖而出,独树一帜,赢得了众多使用者的拥护和信赖。

jQuery的语法简单易学,而且具有很强大的跨平台性,可以兼容多种核心的浏览器。目前,已经有一百多个插件来扩充jQuery的功能,使得jQuery能满足几乎所有客户端的脚本开发。

jQuery介绍及基本使用

但是,目前来说专门介绍jQuery的书籍还很少,中文的书籍更是少之又少,这就给国内一些想要学习jQuery的Web开发爱好者制造了不小的障碍。为了方便广大读者学习,本人花费将近一年的时间写作这本书。本书通过理论与实践相结合的方式,由浅入深、循序渐进地介绍jQuery库的使用;同时又辅以大量真实的开发案例,可以让用户很轻松地就能使用jQuery来增强网页的互动性,做出更好的Web前端产品以及各种更炫更酷的效果。

本书的特点

1.循序渐进,由浅入深

阅读本书不需要对jQuery有所了解,甚至对JavaScript也不需要有很深的了解。为了方便读者学习,本书在第一篇首先介绍Web开发的基础知识,如JavaScript的基础语法等,以期读者可以在不参考其他资料的情况下顺利过渡到jQuery的学习和使用。

2.技术全面,内容充实

本书是一本关于jQuery的初级入门读物。书中详细介绍了jQuery 1.3.2几乎所有的特性和属性,并对每个模块均有很翔实的实例讲解。以期读者对jQuery有个很好的整体把握,同时以后需要用到一些特性的时候,可以进行查阅。另外,本书还在开始介绍了Web开发的基础知识,如Web开发中比较常用的工具等,可以让读者从一个完全的门外汉很快变成业内人士。

jQuery介绍及基本使用

3.图文结合,理解深刻

讲解技术类的知识,最好的方式就是面对面的讲授,但是图书却不太容易做到这一点。为了弥补这个缺憾,本书在讲解具体实例的时候,除了大量的注释、讲解之外,还辅以一些简洁明了的图片,以期让读者对实例以及jQuery效果有更直观的理解。

4.真实案例,随学随用

本书是一本注重实践的书。因此,有大量的篇幅用在了真实的Web开发案例中。本书第三篇通过若干比较完整的实例来讲解jQuery在具体项目中的使用,如增强用户体验、AJAX跨域操作、与PHP配合构建动态网站、键盘操作以及将数据以可视化形式显示等。读者可以通过这些实例对jQuery的理论知识有更加深刻的理解,同时,这些实例稍作修改,就可以用在读者正在开发的项目中去,来实现各种精彩的效果。

5.配有源代码光盘,加速学习

为了让初学者快速入门,本书配套光盘中附赠了本书中的所有源代码。读者可以参考阅读。但是,笔者依然强烈建议,在学习本书的时候应该边学边练。即便不能不看书直接写代码,最好也要对着书上的代码手工敲入一边,以加深印象以及自己对知识本身的理解。

篇名章名内容介绍

第一篇 jQuery预备基础篇第1章 Web开发的发展与趋势本章主要介绍当前Web开发的现状、Web的标准概念、Web 2.0与Web 1.0的区别与联系,并通过当前的一些使用jQuery构建的大型网站,对jQuery能实现的效果进行简单介绍,以期读者对jQuery的强大有个更加直观的了解。

第2章 JavaScript基础本章主要介绍JavaScript的基础知识,包括JavaScript中的变量、数据类型、操作符的使用、流程控制的方法,以及JavaScript数组以及函数的创建和使用。

第3章文档对象模型(DOM)本章主要介绍DOM的基本概念,如DOM的树结构以及节点的概念等。同时,也将介绍JavaScript中访问以及操作DOM节点的方法,包括获取元素、获取元素内的文本和元素内的HTML内容、创建一个新的DOM节点、插入或者删除一个DOM节点元素等。通过本章的介绍,读者可以对DOM的操作方式有所了解,为后续章节使用jQuery操作DOM元素做好铺垫。

第4章工欲善其事,必先利其器——开发工具本章将介绍网页设计过程中经常使用的工具,如SciTE、Notepad++等代码编辑工具,使用Blackbird、Firebug以及Venkman对JavaScript代码进行调试,以及Web Developer Toolbar工具栏的使用、JavaScript代码的压缩及混淆工具等。这些工具可以有效地提高编写代码及设计网站的效率,有必要熟练掌握其使用方法。

第二篇 jQuery基础篇第5章 jQuery快速上手本章将介绍了jQuery的由来和优势,并对目前几个流行的JavaScript库进行了介绍和对比。另外还将演示一个最简单的jQuery程序,通过这个示例,让读者对jQuery的$(document).ready()函数有一个基本的认识,并对jQuery选择器的使用以及click()函数也有初步的概念。

第6章使用选择器获得要操作的元素本章将介绍jQuery选择器中的基本选择器、层次选择器以及滤镜选择器,滤镜选择器中又对基本滤镜选择器、子元素滤镜选择器、表单滤镜选择器以及属性滤镜选择器分别结合具体实例展开详细的介绍。

第7章操作得到的元素本章介绍jQuery中操作得到的元素以及元素集的方法,包括对属性、样式类、CSS以及内容的操作,对元素集查找以及筛选的函数,以及jQuery中的链式操作等。通过使用这些函数,可以很方便地操作页面上的任意元素。

续表

篇名章名内容介绍

第二篇 jQuery基础篇第8章使用jQuery进行DOM操作本章介绍jQuery中比较常用的对页面上DOM元素的操作方式,包括在元素内部以及外部插入元素,对页面上的DOM元素进行包裹、替换、删除以及克隆等操作。通过熟练使用这些DOM元素操作函数,可以很方便地对页面内容进行操控,再结合其他效果函数的使用,将可以为用户提供更加强大且有很好用户体验的应用。

第9章 jQuery中的事件处理本章介绍jQuery中的事件处理机制。jQuery在JavaScript基本的事件处理机制的基础上,对其进行了增强和扩展,使得jQuery事件处理不但有优雅的语法,而且功能也更加强大。本章首先介绍了$(document).ready()事件的概念、jQuery事件的绑定与反绑定、触发器等,并对jQuery中众多的内置事件类型作了简单的分类和介绍。

第10章 jQuery中的动画与效果本章介绍jQuery中的动画与效果,包括隐藏与显示、滑动效果以及淡入淡出效果等。本章将结合实例讨论这些效果的实现和应用,并将介绍jQuery中使用animate自定义动画的方法,以及jQuery中动画队列的概念及其使用方法。

第11章 jQuery与AJAX本章将介绍jQuery中AJAX的使用方法。首先介绍AJAX的实现原理及其最核心的组成部分XMLHttpRequest对象的概念和使用方式;然后介绍jQuery中用来支持AJAX的几个核心函数,包括load、get、post、getScript以及getJSON等,并对最核心的AJAX函数作了较为详细的介绍;同时,还将介绍jQuery中在使用AJAX时支持的几种服务器端数据类型返回方式,以及jQuery在实现AJAX完整请求过程中的各个步骤以及各个阶段的主要功能。

第12章回头重看jQuery——核心及工具本章将对jQuery的核心方法进行回顾,主要介绍jQuery中对象访问的通用函数、jQuery中的数据缓存机制和插件机制,以及jQuery中的常用工具类。使用这些工具类,可以更方便地完成对浏览器检测、获得及处理数组与对象等操作。

第三篇 jQuery应用篇第13章 jQuery增强用户体验本章将介绍目前在Web设计领域比较流行的网站内容的动态加载技术的jQuery实现,如“高亮菜单”、“加载提示”等,并将通过一个动态切换样式的例子进一步展示如何满足用户多元化、个性化的需求,对jQuery的cookie插件也将有所介绍。

第14章 jQuery中使用AJAX跨域操作本章将介绍使用jQuery中的AJAX技术进行跨域操作的方法,并通过对flickr、delicious以及Google AJAX Search等网站API调用的实例,演示Script方式以及JSONP方式在跨域操作中的应用。使用该特性,可以很容易地做出新颖有趣的混搭应用。

第15章 jQuery+ PHP动态网站实践本章将介绍jQuery在PHP动态网站建站中的使用,通过两个实例来具体讲解:一个是构建网站的标签云功能;一个是构建简单的微博客系统。通过这些实例,读者可以了解,使用jQuery并结合一种动态脚本语言,可以实现很多很丰富的内容。

第16章 jQuery键盘操作本章将介绍使用jQuery实现与键盘操作相关的功能,例如:如何在网页上使用快捷键进行页面内容的切换,或者使用jQuery来实现软键盘的操作等。

续表

篇名章名内容介绍

第三篇 jQuery应用篇第17章 jQuery可视化数据显示本章将介绍数据的可视化显示对用户的理解以及阅读带来的优越性,以及使用jQuery插件对数据进行可视化的方法。在本章的实例中,将使用jQuery为其添加更加丰富的功能,例如Tooltip提示等,进一步增强了用户体验。读者可以在本文基础上对flot插件进行深入研究,实现出更加复杂与实用的图表。

适合的读者

本书是一本注重jQuery理论与Web开发实践相结合的基础教程,章与章之间的内容相对独立,读者可以根据自己的情况选择阅读。适合各层次的Web开发人员阅读和参考,主要适合于:

Web前端开发人员

Web后台设计人员

Web设计爱好者

大中专院校学生

本书作者

本书由季国飞编写,参与编写的人员有昊燃、方振宇、陈冠佐、傅奎、陈勤、梁洋洋、毕梦飞、陈庆、柴相花、陈非凡、陈华、陈嵩、承卓、陈先在,在此表示感谢!

季国飞

2010年1月

二、jQuery基础教程详解的前言

jQuery是一个强大的JavaScript库。无论你具有什么编程背景,都可以通过它来增强自己的网站。

由John Resig创建的jQuery是一个开源项目,其核心团队由富有献身精神的顶尖JavaScript开发人员组成。jQuery在一个紧凑的文件中提供了丰富多样的特性、简单易学的语法和稳健的跨平台兼容性。此外,百余种为扩展jQuery功能而开发的插件,更使得它几乎成为适用于各类客户端脚本编程的必备工具。

本书以通俗易懂的方式介绍了jQuery的基本概念,通过学习本书,即使曾经因编写JavaScript而受过挫折的人,也能够掌握为网页添加交互和动态效果的技术。本书将引导读者跨越AJAX、事件、效果及高级JavaScript语言特性中的各种陷阱。

包含书中各章的在线示例。本书内容

本书的第一部分jQuery简介,用来帮助读者对jQuery有个大概的了解。第1章的内容主要涉及如何下载和设置jQuery库,同时也会指导你使用jQuery编写第一个脚本。

本书的第二部分将深入讨论jQuery库的各个主要方面。第2章讲述如何取得我们想要的一切。通过jQuery中的选择符表达式,你可以在页面中的任何地方找到想要的元素。这一章将使用各种选择符表达式为页面中的不同元素添加样式,其中一些是通过纯CSS方式做不到的。

第3章讲述如何“扣动扳机”。本章介绍如何通过jQuery的事件处理机制,在浏览器发生事件时触发行为。同时,还会介绍jQuery的独家秘笈——以不唐突的方式添加事件(甚至在页面加载完成之前)。

第4章讲述如何增加操作的艺术感。这一章介绍通过jQuery实现动画的技术,从中我们能够体会到隐藏、显示和移动页面元素时那种轻松自如的感觉。

第5章讲述如何通过指令改变页面。本章讲述的是动态修改HTML文档结构的技术。

第6章讲述如何让你的网站跻身主流行列。在学习完本章后,你也可以做到不用像过去那样刷新页面而访问服务器端功能。

本书的第三部分与前两部分不同。这一部分主要以实例为主,即在前几章学习的基础上,创建常见问题的稳健jQuery解决方案。第7章将讲述排序、筛选和为信息添加样式并创建优美实用的数据布局。

第8章以客户端数据验证为主题。届时,将设计一个具有适应能力的表单布局,还会实现基于客户端与服务器通信的交互式表单功能,例如自动完成。

第9章介绍如何在小窗口内显示页面元素来增强它们的美感和实用性。其中,动态显示和隐藏信息的方式既可是自动的,也可是用户控制的。

第10章讲过jQuery令人印象深刻的扩展能力。读者将在理解和掌握3个优秀jQuery插件的基础上,从头开始构建自己的插件。

附录A提供了很多与jQuery、JavaScript以及通常的Web开发有关的内容丰富的网站信息。

附录B推荐了一些有用的第三方程序和实用工具,用于在个人的开发环境中编辑和调试jQuery代码。

附录C讨论JavaScript语言的常见壁垒之一——闭包。学了本附录,你将会依赖闭包的强大威力而不是害怕它的副作用。

本书读者对象

本书适合想在自己的设计中添加交互元素的Web设计者,也适合想在自己的Web应用中创建最佳用户界面的开发者。

读者需要具备基本的HTML和CSS知识,并且应该熟悉JavaScript语法。但是,不需要有jQuery的知识,也不必拥有其他JavaScript库的使用经验。

三、jQuery开发技术详解的目录

第一篇 jQuery预备基础篇

第1章 Web开发的发展与趋势 2

1.1 Web标准 2

1.1.1 XML 3

1.1.2 XHTML 3

1.1.3 CSS 4

1.1.4 DOM 4

1.1.5 ECMAScript 5

1.2传统互联网与Web 2.0 5

1.2.1传统网络Web 1.0 5

1.2.2最近的新宠Web 2.0 6

1.3 jQuery能做什么 11

1.3.1更加丰富的导航菜单 11

1.3.2 Tab内容的切换 13

1.3.3人性化的提示信息 13

1.3.4可定制的用户内容 14

1.3.5动态的图片展示效果 15

1.3.6 AJAX实时局部刷新 16

1.3.7数据的可视化显示 17

1.4 jQuery知识体系及学习建议 17

1.4.1 jQuery知识体系 17

1.4.2学习建议 19

1.5小结 19

第2章 JavaScript基础 20

2.1什么是JavaScript 20

2.2语法规则 21

2.2.1大小写敏感 21

2.2.2空格、换行与可选的分号 23

2.2.3注释 25

2.2.4关键字和保留字 26

2.2.5在页面上插入JavaScript代码 28

2.3变量 29

2.3.1变量的命名 29

2.3.2变量的声明 30

2.3.3变量的使用 32

2.3.4全局变量和局部变量 33

2.4 JavaScript中的数据类型 35

2.4.1字符串类型 36

2.4.2数值类型 37

2.4.3布尔类型 37

2.4.4 undefined类型 38

2.4.5 null类型 40

2.4.6 NaN类型 40

2.5数据类型间转换 41

2.5.1使用toString()转换为字符串 41

2.5.2使用parseInt()转换为整型数 43

2.5.3使用parseFloat()转换为浮点数 45

2.6 JavaScript操作符 47

2.6.1比较操作符 47

2.6.2逻辑操作符 48

2.6.3 JavaScript操作符优先级 49

2.7流程控制 50

2.7.1条件语句 50

2.7.2循环语句 54

2.8数组 56

2.8.1创建一个数组 57

2.8.2使用数组元素 58

2.8.3使用多维数组 58

2.9函数 59

2.9.1函数的定义 59

2.9.2函数的参数及返回值 60

2.10小结 61

第3章文档对象模型(DOM) 62

3.1什么是DOM 62

3.2 DOM的结构和节点 63

3.2.1 DOM的树结构 63

3.2.2 DOM中的节点 65

3.3访问DOM节点 67

3.3.1按id取元素:getElementById() 67

3.3.2按标签名取元素集:getElementsByTagName() 68

3.4操作元素内的文本 70

3.5操作元素内的HTML 72

3.6修改DOM节点 73

3.6.1创建DOM节点 74

3.6.2插入DOM节点 76

3.6.3删除DOM节点 78

3.7小结 80

第4章工欲善其事,必先利其器——开发工具 81

4.1代码编辑工具 81

4.1.1 SciTE 81

4.1.2 Notepad++ 82

4.1.3 Dreamweaver 83

4.2调试工具 84

4.2.1使用Blackbird进行调试 84

4.2.2使用Firebug进行调试 85

4.2.3使用Venkman进行调试 91

4.3其他工具 92

4.3.1 Web Developer Toolbar 92

4.3.2 JavaScript压缩混淆工具 99

4.4小结 100

第二篇 jQuery基础篇

第5章 jQuery快速上手 102

5.1什么是jQuery 102

5.2为什么选择jQuery 102

5.2.1当前流行JavaScript库比较 103

5.2.2 jQuery的优势 106

5.3配置jQuery开发环境 107

5.3.1获取jQuery最新版本 107

5.3.2 jQuery库类型说明 108

5.3.3在页面中引用jQuery库 108

5.3.4 jQuery 1.2.6新特性及主要改变 110

5.3.5 jQuery 1.3.2新特性及主要改变 112

5.4准备HTML和CSS代码 114

5.4.1演示框架目录结构 115

5.4.2 HTML代码 115

5.4.3 CSS代码 117

5.5编写jQuery代码 119

5.6小结 122

第6章使用选择器获得要操作的元素 123

6.1 CSS选择器 123

6.1.1使用CSS选择器 123

6.1.2通配选择器 124

6.1.3标签选择器 124

6.1.4 ID选择器 125

6.1.5类选择器 125

6.1.6后代选择器 126

6.1.7子元素选择器 127

6.1.8相邻兄弟选择器 127

6.1.9属性选择器 128

6.2 jQuery选择器 130

6.2.1基本选择器 130

6.2.2层次选择器 135

6.2.3基本滤镜选择器 139

6.2.4子元素滤镜选择器 151

6.2.5表单滤镜选择器 156

6.2.6属性滤镜选择器 164

6.3小结 167

第7章操作得到的元素 168

7.1操作属性 168

7.1.1读取属性 168

7.1.2修改属性 170

7.1.3删除属性 173

7.2操作样式类 174

7.2.1添加样式类 174

7.2.2去除样式类 176

7.2.3交替样式类 177

7.3操作CSS 178

7.3.1读取CSS样式 178

7.3.2设置CSS样式 180

7.3.3获得元素偏移信息 182

7.3.4获得和设置高度 183

7.3.5获得和设置宽度 185

7.4操作内容 186

7.4.1操作HTML代码 186

7.4.2操作文本 188

7.4.3操作值 190

7.5查找与筛选元素 193

7.5.1过滤元素集 193

7.5.2在元素集中查找 197

7.6链式操作 202

7.6.1使用链式操作 203

7.6.2结束当前操作对象 205

7.6.3添加当前操作对象到先前对象 207

7.7小结 208

第8章使用jQuery进行DOM操作 209

8.1在元素内部插入DOM元素 209

8.2在元素外部插入DOM元素 214

8.3包裹DOM元素 217

8.3.1使用指定的元素标记进行包裹 217

8.3.2使用HTML标记进行包裹 220

8.3.3包裹内部元素 222

8.4替换DOM元素 223

8.5删除DOM元素 225

8.6克隆DOM元素 227

8.7小结 229

第9章 jQuery中的事件处理 230

9.1页面载入完毕响应事件 230

9.1.1 jQuery中的$(document).ready()事件 230

9.1.2 window.onload()事件和$(document).ready()事件的比较 231

9.2绑定与反绑定事件监听器 233

9.2.1绑定事件 233

9.2.2反绑定事件 238

9.2.3一次性的事件绑定 239

9.3事件触发器 241

9.3.1 trigger触发事件 241

9.3.2 triggerHandler触发事件 244

9.***的交互处理 245

9.4.1 hover:模仿鼠标悬停 246

9.4.2 toggle:多次单击的循环响应 247

9.5 jQuery内置事件类型 248

9.5.1 jQuery内置事件函数的两种声明方式 249

9.5.2 jQuery内置事件类型分类 250

9.6小结 253

第10章 jQuery中的动画与效果 254

10.1基本效果 254

10.1.1隐藏元素 254

10.1.2显示元素 258

10.1.3交替显示隐藏 259

10.2滑动效果 260

10.2.1向上收缩效果 260

10.2.2向下展开 262

10.2.3交替伸缩样式 262

10.3淡入淡出效果 263

10.3.1淡入效果 263

10.3.2淡出效果 265

10.3.3自定义不透明度 265

10.4自定义动画效果 266

10.4.1自定义动画 266

10.4.2 jQuery动画队列 270

10.5小结 273

第11章 jQuery与AJAX 274

11.1 AJAX的应用 274

11.1.1 AJAX的历史 274

11.1.2 AJAX经典应用 275

11.2 AJAX原理与XMLHttpRequest对象 278

11.2.1 AJAX的原理 279

11.2.2 XMLHttpRequest对象 281

11.3 jQuery中的AJAX 284

11.3.1 load()、get()和post()函数 284

11.3.2 ajax函数 294

11.3.3 getScript及getJSON函数 300

11.4 jQuery中的AJAX服务器端返回方式 304

11.4.1 html方式 305

11.4.2 text方式 307

11.4.3 xml方式 308

11.4.4 script方式 316

11.4.5 json方式 316

11.5 jQuery中的AJAX事件 318

11.5.1 AJAX局部事件 318

11.5.2 AJAX全局事件 320

11.6小结 323

第12章回头重看jQuery——核心及工具 324

12.1核心函数 324

12.1.1核心函数形式 324

12.1.2使用核心函数 326

12.2 jQuery对象访问 329

12.2.1获得长度 329

12.2.2获得其中某个对象 329

12.2.3遍历对象集 332

12.3数据缓存 333

12.3.1隐藏数据 333

12.3.2设置和获取元素的缓存数据 334

12.3.3删除缓存数据 336

12.4 jQuery常用工具类 337

12.4.1浏览器相关 337

12.4.2数组与对象相关 340

12.4.3其他功能性函数 348

12.5 jQuery插件机制 349

12.5.1 jQuery.extend(object) 350

12.5.2 jQuery.fn.extend(object) 351

12.6小结 352

第三篇 jQuery应用篇

第13章 jQuery增强用户体验 354

13.1动态加载显示内容 354

13.1.1设计网站外观及显示 354

13.1.2 jQuery动态加载内容 356

13.2改进:增强用户体验 358

13.2.1高亮当前选中菜单 358

13.2.2加载时提示“正在加载…” 359

13.3动态切换样式 361

13.3.1 jQuery样式切换简单实现 361

13.3.2使用Cookie保存用户选项 363

13.3.3使用jQuery.cookie插件 366

13.4小结 368

第14章 jQuery中使用AJAX跨域操作 369

14.1跨域操作的实现方式 369

14.1.1 Script方式实现跨域操作 369

14.1.2 JSONP方式实现跨域操作 371

14.2跨域操作flickr网站API 374

14.3跨域操作delicious网站API 378

14.4跨域操作Google AJAX Search API 382

14.5小结 388

第15章 jQuery+PHP动态网站实践 389

15.1标签云(Tag Cloud) 389

15.1.1标签云的概念与使用 389

15.1.2标签云显示样式设计 390

15.1.3设计MySQL数据库 394

15.1.4构建PHP代码 395

15.1.5构建jQuery代码 398

15.2类twitter微博客系统 399

15.2.1微博客系统 400

15.2.2设计MySQL数据库 403

15.2.3构建PHP代码及jQuery代码 404

15.2.4功能改进:增加字数统计功能 408

15.3小结 410

第16章 jQuery键盘操作 411

16.1键盘快捷键动态切换页面 411

16.1.1需求与最终效果 411

16.1.2 HTML及CSS代码 412

16.1.3 jQuery代码 416

16.2使用插件进行改进 420

16.2.1存在的问题 420

16.2.2 js-hotkeys插件的使用 421

16.2.3使用js-hotkeys插件改进本章示例 423

16.3软键盘的实现 425

16.3.1软键盘的使用 425

16.3.2准备HTML及CSS代码 425

16.3.3构建jQuery代码 430

16.3.4最终效果 433

16.4小结 435

第17章 jQuery可视化数据显示 436

17.1数据的可视化显示 436

17.2使用flot插件可视化数据显示 438

17.2.1 flot插件介绍 438

17.2.2准备HTML及CSS代码 439

17.2.3构建jQuery代码 442

17.2.4实现折点上的Tooltip显示 448

17.3小结 451

文章到此结束,希望我们对于jQuery介绍及基本使用的问题能够给您带来一些启发和解决方案。如果您需要更多信息或者有其他问题,请随时联系我们。