jquery基础教程pdf

jquery

需积分: 9 31 浏览量更新于2023-05-22 评论收藏 1.24MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

jQuery 基础教程

545

jQuery 基础教程

JavaScript 作为 Web 开发的客户端标准语言，逐渐被人们重视。由于 JavaScript 仅定义了基

本的语法规范和逻辑结构，对于浏览器端的各种应用只能够借助 API 应用扩展来实现（如 DOM、

XMLHttpRequest 等组件）。但是当掌握 JavaScript 语言的基本用法之后，就会发现 JavaScript 用

法比较繁琐，直接使用 DOM 来控制文档，直接调用 XMLHttpRequest 组件来操作数据都显得很

麻烦，于是在 JavaScript 语言和扩展组件的基础上诞生了很多 Ajax 技术框架。

Ajax 技术框架是在 Web 2.0 大背景下产生的，这些技术框架封装 JavaScript、DOM 和

XMLHttpRequest等技术的功能，为人们提供了一种快捷、强大的应用方式，降低了 Web开发

的门槛。借助这些技术框架，用户只需要简单地调用框架对象的方法或属性即可实现各种复杂

的功能。如果直接使用JavaScript、DOM和XMLHttpRequest等技术来开发这些复杂的功能，

可能会占用大量的时间，最关键的是这种原始开发方式对于广大初级技术人员来说是望尘莫及

的。

随着 Ajax 概念的快速传播，互联网上出现了很多优秀的技术框架，比较著名的有 Prototype、

YUI、jQuery、mootools、Bindows 以及国内的 JSVM 框架等，通过将这些 JS 框架应用到项目中，

能够使程序员从繁杂的 Web 开发应用中解脱出来，将关注点转向应用项目的实现上，而非底层

技术的开发上，从而提高项目的开发速度。

1 jQuery 技术框架概述

jQuery 是继Prototype 之后又一个优秀的JavaScript 框架，由 JohnResig 于 2006 年初创建，

目前最新版本为1.3.2，官方地址为：http://jquery.com/，中文地址为http://jquery.org.cn/。jQuery

具有如下特点。

l 语法简练、语义易懂、学习快速、丰富文档。

l jQuery 是一个轻量级的脚本，其代码非常小巧，最新版的jQuery 框架文件仅有 30KB

左右。

l jQuery 支持 CSS1~CSS3 定义的属性和选择器，以及基本的 xPath技术。

l jQuery 是跨浏览器的，它支持的浏览器包括 IE6.0+、FF1.5+、Safari2.0+和 Opera9.0+。

l 可以很容易地为 jQuery 扩展其他功能。

l 能将 JavaScript 脚本与 HTML 源代码完全分离，便于后期编辑和维护。

l 插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能，如表单

验证、Tab导航、拖放效果、表格排序、DataGrid、树形菜单、图像特效以及Ajax上

传等。

网页制作与网站开发从入门到精通

546

jQuery 能够改变你编写JavaScript 脚本的方式，降低学习和使用Web 前端开发的复杂度，

提高网页开发效率，无论对于JavaScript 初学者，还是 Web 开发资深专家，jQuery 都应该是必

备的工具。jQuery 适合于设计师、开发者以及 Web 编程爱好者，同样适合商业开发。可以说 jQuery

适合任何 JavaScript 应用的地方，也可用于不同的 Web 应用程序中。

在使用 jQuery 之前，你需要下载 jQuery 技术框架文件，并引入到页面中。jQuery 框架文件

是一个 js 文件，压缩大小约为 30KB，未压缩文件为 97.8KB，可以说是非常小的。导入 jQuery

框架文件方法如下：

引入jQuery框架文件之后便可在页面脚本中调用jQuery对象、方法或属性，并以jQuery

特色语法规范来编写脚本。

2 jQuery 构造器

构造器是 jQuery 框架的内核（core），它犹如 JavaScript 语言的构造函数（Function）。构造

器由 jQuery()函数（可简写为$()）负责实现，该函数是整个 jQuery 框架的核心，jQuery 中的一

切操作都构建于这个函数之上。jQuery()函数可以接收四种类型的参数。

l jQuery(expression,[context])：根据CSS选择器字符串在页面中匹配一组元素，或者利

用 context 参数指定匹配的范围。

l jQuery(html)：根据 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。

l jQuery(elements)：将一个或多个 DOM 对象转化为 jQuery 对象。

l jQuery(callback)：$(document).ready()的简写。允许绑定一个在DOM文档加载完毕之

后执行的函数。

例如，构建一个简单的文档结构，代码如下所示（请不要忘记在文档顶部导入jquery.js 文

件）：

src="images/jquery.js"></script>

<div><span>文本块 1</span></div>

然后定义“文本块 2”字符串显示为红色，则代码如下（该代码段位于控制结构的底部）：

varred=$("pspan"); //选择元素中包含的 span 元素，并返回该元素的 jQuery 对

象引用指针

red.css("color","red"); //调用 jQuery 对象的 css()函数，定义选取对象的 CSS 样

式，其中第一个参数表示 CSS 属性名，第二个参数表示 CSS 属性值。

</script>

也可以采用如下方式定义：

varred=$("span","p"); //在指定范围内（所有段落文本 p 元素内选择 span 元素

jQuery 基础教程

547

red.css("color","red"); //定义该选取对象的样式

借助 jQuery(html)类型函数，可以为指定元素增加 HTML 结构。例如，下面代码能够在 body

元素内增加“<div><span>文本块 3</span></div>”HTML 结构。

$("<div><span>文本块 3</span></div>").appendTo("body");

jQuery(elements)类型函数能够把一个 DOM 对象转换为jQuery对象，这样就可以调用 jQuery

对象的方法和属性。例如，下面示例代码把span元素转换为jQuery对象，然后调用css()方法

来定义字体大小。

$("span").css("fontsize","12px");

借助jQuery(callback)类型函数可以在页面加载完毕时执行包含的函数。例如，下面代码将

在页面加载完毕之后弹出一个提示对话框，显示“HelloWorld!”提示信息。

$(function(){

alert("HelloWorld!");

});

</script>

通过上面示例，我们可以看到：jQuery 对象与 DOM 对象是两个不同的概念，它们不能够

相互调用。jQuery 对象只能够使用jQuery 定义的方法和属性；而DOM也只能够使用DOM组

件和 JavaScript 定义的方法和属性。因此，在调用对象的方法和属性时，应该清楚它属于什么

对象。

当然，也可以通过一定的方法转换jQuery 与DOM这两种对象。对于普通的DOM对象来

说，如果要转换为 jQuery 对象，则使用 jQuery() 函数即可。例如，在下面代码中，

document.getElementsByTagName("span")[0]将获取页面中第一个span对象，此时所定义的span

变量就是一个 DOM 对象，可以调用 DOM 定义的节点方法对其进行操作。

而$(span)则表示一个 jQuery 对象，其中包含的 span 变量就表示 DOM 对象（即

document.getElementsByTagName("span")[0]），这时我们就可以为变量span调用jQuery对象的

方法来定义 span元素的显示样式（即红色字体）。

<div><span>文本块 1</span></div>

<p><span>文本块 2</span></p>

varspan=document.getElementsByTagName("span")[0]; //获取节点对象，此时

返回 DOM 元素对象

varspan=$(span); //把 DOM 对象转换为 jQuery 对象

span.css("color","red"); //调用 jQuery 对象的 css()方法定义字体颜色为

红色

</script>

当然也可以把jQuery 对象转换为DOM对象，由于jQuery 对象实际上就是一个JavaScript

数据集合，如果要把 jQuery 对象转换为 DOM 对象，则必须从对象中选取其中的某一项元素，

即通过索引选取其中一个元素对象即可。例如，针对上面示例中 jQuery 对象$(span)，我们可以

网页制作与网站开发从入门到精通

548

使用如下写法把它转换为 DOM 对象，再调用 DOM 属性来定义样式：

varspan=$(span)[0]; //把 jQuery 对象转换为 DOM 对象

span.style.color="blue"; //调用 DOM 对象的 style 属性，设置字体颜

色为蓝色

除了使用集合索引值把 jQuery 对象转换为 DOM 对象外，还可以使用 jQuery 的 get()获取对

象内指定索引的元素：

$("span").get(0);

3 jQuery 基本用法

要发挥 jQuery 构造器的强大功能，应先熟悉 jQuery 定义的各种方法和属性，特别是 jQuery

对象的基本属性和方法。下面将讲解 jQuery 定义的各种基本属性和方法，为具体应用奠定基础。

3.1 访问jQuery对象

2节已经介绍过jQuery 对象是一个集合，要访问这个集合，除了使用索引值以外，还可以

使用 jQuery 定义的几个方法和属性。

l each(callback)。

each(callback)方法实际上是JavaScript集合遍历的一种功能包装，它以jQuery对象内的集

合元素为遍历对象，并循环执行指定的函数。在循环体内的函数中，this 关键字都会自动指向

当前元素，且会自动向函数体内传递元素的索引值（从 0 开始）。

例如，下面示例将首先获取所有 span元素，再调用 jQuery 对象的 each()方法，该方法包含

了一个简单的函数，定义每个元素的字体大小样式。其中函数体内的this表示循环时每个当前

元素，此时它应该是一个DOM 对象，所以可以调用 DOM 的属性来定义字体样式，而参数n

表示 each()方法自动循环时传递的索引值。

<div><span>文本块 1</span></div>

<p><span>文本块 2</span></p>

varspan=$("span"); //获取文档中的 span 元素

span.each(function(n){ //遍历 span 元素集合

this.style.fontSize=(n+1)*12+"px"; //为每个 span 元素定义字体大小

样式

});

</script>

演示结果：第一个 span元素包含字体大小为 12 像素，第二个 span 元素包含字体大小为 24

像素。如果想在函数体内调用 jQuery 对象的方法，则需要把 this 转换为 jQuery 对象。例如，修

改上面示例为下面形式：

jQuery 基础教程

549

varspan=$("span"); //获取文档中的 span 元素

span.each(function(n){ //遍历 span 元素集合

$(this).css("fontsize",(n+1)*12+"px"); //为每个 span 元素定义 CSS

样式，设置字体加倍递增

});

如果函数中途返回false，则将停止循环。如果每次执行函数都返回true，则将自动循环执

行函数，直到遍历结束。

l size()和 length。

size()方法能够返回 jQuery 对象中元素的个数，而 length 属性与 size()方法功能相同。例如，

下面代码使用 size()方法和 length 属性返回值都为 2。

<span>文本块 1</span><span>文本块 2</span>

alert($("span").size()); //返回值为 2

alert($("span").length); //返回值为 2

</script>

l get()和 get(index)。

get()方法能够把 jQuery 对象转换为 DOM 中的元素集合。例如，在下面示例中，使用$()函

数获取所有 span元素，然后使用 get()方法把该 jQuery 对象转换为 DOM 集合，再调用 JavaScript

数组方法 reverse()把数组元素的位置颠倒过来。最后为数组中第一个元素定义样式为红色字体，

演示效果为“<span>文本块 2<span>”中文本显示为红色。

<span>文本块 1</span><span>文本块 2</span>

varspans=$("span").get().reverse(); //把当前 jQuery 对象转换为 DOM

对象，并颠倒它们的位置

spans[0].style.color="red"; //把当前 jQuery 对象设置为红色

</script>

get(index)方法与 get()功能相同，但是它能够获取指定索引值的元素对象，请注意它返回的

是 DOM 对象。

l index(subject)。

获取 jQuery 对象中指定元素的索引值。如果找到了匹配的元素，从 0 开始返回；如果没有

找到匹配的元素，返回－1。例如，在下面这个示例中，获取body元素下包含的所有元素，同

时使用DOM方法获取其中的div元素的引用指针，然后利用index()方法获取div元素在body

中的索引值，最后返回为 2，即位于 body 元素内的第三个。

<body>

<span></span><p></p><div></div><h1></h1>

vara=$("body*"); //获取 body 元素包含

的所有子元素

vare=document.getElementsByTagName("div")[0]; //获取 div 元素在文档

剩余43页未读，继续阅读

tornado430

粉丝: 2
资源: 5

会员权益专享

jquery 基础教程 pdf

评论0

会员权益专享

最新资源

jquery 基础教程 pdf

评论0

jQuery基础教程.pdf

jQuery基础教程 pdf清晰版

Learning JQuery.pdf（完整版）

jquery基础教程

《web前端开发简明教程(html+css+javascript+jquery)》pdf

jquery 移动端pdf预览

javascript与jquery实战教程

jquery.media.js预览pdf

jquery使用pdfjs通过文件流预览pdf

jquery的高级教程

jquery打印pdf

jquery下载安装教程

jquery实现pdf翻书效果，实现步骤

jquery基础选择器

jquery将html转为pdf文件,通过Jquery将HTML Div转换为PDF

jquery下载安装教程vscode

简述jQuery基础选择器和jQuery层次选择器的使用场景

jquery参考文献

jQuery基础选择器的使用场景

jquery-cropper 使用教程

会员权益专享

最新资源