jQuery开发指南 - (EPUB全文下载)
文件大小:0.69 mb。
文件格式:epub 格式。
书籍内容:
jQuery开发指南
第1章 jQuery入门
第2章 jQuery选择器
第3章 jQuery中的事件与动画
第4章 使用jQuery操作DOM
第5章 表单验证
第6章 AJAX
第7章 开发插件
第8章 项目案例:易镁科技
版权声明
第1章 jQuery入门
本章简介
jQuery是轻量级的JavaScript库,它简化了HTML与JavaScript之间的操作,使得DOM对象、事件处理、动画效果、CSS 3、AJAX等操作的实现语法更加简洁,同时显著提高了程序的开发效率,消除了很多跨浏览器的兼容问题。除此之外,jQuery还提供了API以便开发者编写插件,其模块化的使用方式使开发者可以很轻松地开发出功能强大的静态或者动态网页。
本章将重点讲解jQuery的下载、HTML文档的建立以及jQuery代码的初步编写。
本章任务
认识jQuery
本章目标
▶ 掌握配置jQuery环境的方法
▶ 掌握jQuery的基本语法
▶ 学会创建jQuery驱动的页面
预习作业
1.简单描述JavaScript与jQuery的关系。
2.jQuery的语法结构包括哪几部分?
3.在jQuery中用于加载文档的方法是什么?
1.1 jQuery简介
jQuery是继Prototype之后又一个优秀的JavaScript程序库,相当于JavaScript技术的一个子集。目前jQuery团队主要包括核心库、UI、插件和jQuery Mobile等开发人员、推广人员、网站设计人员和维护人员,这促使jQuery逐步发展成为如今的集JavaScript、CSS、DOM和AJAX于一体的强大框架体系。
作为JavaScript的程序库,jQuery凭借简洁的语法和跨浏览器的兼容性,极大地简化了遍历HTML文档、DOM操作、事件处理、执行动画和AJAX数据交互的代码,从而广泛应用于Web应用开发,如导航菜单、轮播广告、网页换肤和表单校验等方面。jQuery简约、雅致的代码风格,改变了JavaScript程序员的设计思路和编写程序的方式,可以提高前端开发的效率,但它并不能完全取代JavaScript。
1.2 获取jQuery
想要获取jQuery,可以从jQuery的官方网站(http://jquery.com/)上下载最新版本的jQuery文件,具体操作如图1.1所示。
图1.1 jQuery官网
从图1.1中可以看出,单击Download jQuery按钮可以下载jQuery。目前jQuery的版本分为jQuery1.x系列的经典版、jQuery2.x系列以及jQuery3.x压缩版,前者保持了对早期浏览器的支持,而从2.x开始,不再支持IE 6/7/8浏览器,从而更加轻量级。
进入下载页面后,会看到jQuery文件的类型主要包括未压缩的开发版和压缩后的生产版。所谓压缩,指的是去掉代码中所有的缩进、换行和注释等,减少文件的体积,从而有利于网络传输,如图1.2所示。
图1.2 jQuery下载页面
在图1.2中选择一个版本下载,然后在HTML中引入jQuery文件,实现对jQuery的部署。代码如下:
1.3 使用jQuery
在引入jQuery类库后,就可以使用jQuery提供的功能。例如,页面加载完成后,弹出提示框,如示例1所示。
示例1:
运行结果如图1.3所示。
在这段代码中,$(document).ready()语句是当DOM(文档对象模型)已经加载,并且页面(包括图像)已经完全呈现时,会发生ready事件。
由于该事件在文档就绪后发生,因此将所有其他的jQuery事件和函数置于该事件中是非常好的做法。即弹出如图1.3所示的提示对话框。例如下面的jQuery代码。
图1.3 页面加载完成并弹出提示框
类似于如下JavaScript代码。
二者在功能实现上可以互换,但它们之间又存在一些区别,具体区别如表1.1所示。
表1.1 window.onload与$(document).ready()的对比
1.4 语法结构
通过“$(document).ready();”可以发现,这条jQuery语句主要包含3大部分:$()、document和ready(),分别被称为工厂函数、选择器和方法。
1.4.1 工厂函数$()
所谓工厂函数,就是指这些内建函数都是类对象。当调用它们时,实际上是创建了一个类实例,意思是当调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象。由于JavaScript本身不是严格的面向对象的语言(不包含类),所以JavaScript并没有严格的“工厂函数”,但是在JavaScript中可以利用函数模拟类。
1.4.2 选择器
选择器是jQuery最基础的功能,其基本语法如下:
ID选择器、标签选择器、类选择器的用法如下:
1.4.3 事件处理方法
jQuery最重要的方法就是事件处理方法,主要用来绑定DOM元素的事件和事件处理方法。在jQuery中,还有许多基础事件,如鼠标事件(click)、键盘事件(mouseover())和表单事件(onblur)等,都可以通过这些事件方法进行绑定。
下面制作一个网站的左导航特效,当单击导航项时,为ID名是current的导航项添加class为current的类样式代码如下。
示例2:
样式代码:
结构代码:
行为代码:
运行结果如图1.4所示。
图1.4 左侧导航特效
addClass()方法是jQuery中用于进行CSS操作的方法之一,它的作用是为每个匹配的元素添加指定的样式类名。语法格式如下:
其中,样式名可以是一个,也可以是多个,多个样式名需要用空格隔开。
注意
addClass选择器与使用选择器获取DOM元素不同,获取ID为current的元素时,current前需要加ID的符号#;而使用addClass()方法添加class为current的类样式时,该类名前不带有类符号“.”。
1.5 jQuery编码风格
编码风格是程序开发人员在编写源代码时形成 ............
以上为书籍内容预览,如需阅读全文内容请下载EPUB源文件,祝您阅读愉快。
书云 Open E-Library » jQuery开发指南 - (EPUB全文下载)