WEB入门之十二 jquery简介
学习内容
jQuery简介
搭建jQuery开发环境
jQuery基本选择器
能力目标
熟悉jQuery开发环境
能编写简单的jQuery代码
本章简介
在前面两章,我们学习了JavaScript面向对象编程,从而对JavaScript这门编程语言有了更进一步的认识。JavaScript是目前世界最流行的编程语言之一,在Web前端开发中,起着无可替代的作用。虽然进过多年的改进,但是开发人员仍然觉得直接使用JavaScript困难重重,为了简化JavaScript并提高开发效率,各种JavaScript库应运而生,本章开始学习其中的jQuery。
核心技能部分
3.1 JavaScript库
随着WEB2.0的兴起,JavaScript越来越受到重视,与之相关的JavaScript库也蓬勃发展起来。这些JavaScript库封装了很多预定义的对象及实用函数,能帮助开发人员快速、轻松的实现高难度的富客户端页面,并能兼容大部分浏览器。
下面是目前几种流行的JavaScript库:
Prototype:这是最早成型的JavaScript库之一,它对JavaScript内置对象做了大量封装和扩展。由于Prototype成型年代早,从整体上对面向对象的编程思想运用不到位,导致其结构松散,不过现在Prototype也在慢慢改进。
Dojo:这是一个重量级的JavaScript库,功能全面且强悍,例如支持离线存储、支持基于SVG/VML的矢量图形库等等。Dojo是一个适合企业级应用的JavaScript库,但是它的缺点也比较明显:学习成本较高、文档不全、API不稳定,每次更新容易导致以前的代码不能运行,从1.0版本后情况有所好转。
YUI:这是由雅虎(Yahoo)公司开发的一个功能完备、扩展性良好的的JavaScript库。
Ext JS:简称Ext,原本是对YUI的一个扩展,主要用于创建Web前端界面。现在通过Ext可以开发富有华丽外观的用户界面,使Web前端更具活力。但是由于Ext侧重于前端界面,所以本身比较臃肿,并且Ext如果用于商业用途是需要付费的。
MooTools:这是一个完全采用面向对象编程思想实现的JavaScript库,采用模块化结构,使用方便。
jQuery:这是一个轻量级的JavaScript库,拥有强大的选择器和完善的UI,从诞生的那天起就吸引大批开发人员去关注和学习,目前已经成为Web开发人员的必备技能。
3.2 jQuery简介
jQuery是创建于2006年1月的开源项目,主要包括核心库、UI和插件三部分。jQuery凭借简洁、优雅的语法和跨平台的兼容性,极大的简化了JavaScript的开发难度。jQuery强调的理念是:写得少、做得多(write less, do more)。jQuery独特的选择器、链式的DOM操作、可靠成熟的事件处理机制都是其他JavaScript库无法比拟的,其优势如下所示:
轻量级
jQuery非常轻巧,核心库大小不到100K。
强大的选择器
选择器是进行JavaScript编程的基础,而jQuery提供了功能全面、强大、灵活的选择器供开发者使用。
出色的DOM封装
jQuery封装了大量的DOM操作,使原本复杂的的DOM操作变得非常简单。
可靠成熟的事件处理机制
jQuery的事件处理机制充分吸收了循序渐进、非侵入式等优秀的编程思想,非常稳定可靠,便于使用。非侵入式的设计使得行为层和表现层互相分离,有利于管理维护。
优秀的浏览器兼容性
作为一个流行的JavaScript库,浏览器的兼容性是必须具备的硬性标准。jQuery能够在IE 6.0+、FF 2+、Safari 2+、Op 8000 era 9+和Chrome下正常运行。
链式操作方式
链式操作是指对发生在同一jQuery对象上的一组动作,可以直接连写而无需重复获得对象,这是jQuery的特色,使得jQuery编码无比优雅。
丰富的插件支持
jQuery的优秀设计使其非常容易扩展,这吸引了全球大量的开发人员编写jQuery插件,目前已经有超过百种的插件获得jQuery官方支持,极大增强了jQuery的广度。
3.3 搭建jQuery开发环境
通过访问http://jquery.com/进入jQuery官方网站并下载最新的jQuery库,目前最新版本是1.7.2。jQuery库分为两种:Production和Development,如图3.1.1所示。
Production是经过压缩的,体积只有32K,程序正式投入使用时建议使用这种jQuery库。
Development是没有经过压缩的源码,体积有247K,适合开发过程中学习、测试。
下载下来的jQuery库就是一个后缀名是js的文件,哪个页面需要使用jQuery,就通过<script>标签导入即可,参考代码如下所示。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>导入jQuery库</title><script src="jquery-1.7.2.js" type="text/javascript"></script></head><body></body></html>
3.1 jQuery开发工具
jQuery本身就是纯文本的JavaScript代码,所以使用一般的文本编辑器都可以编写jQuery代码。但是为了提高编码效率,推荐使用如下几种开发工具:
Dreamweaver
Dreamweaver简称DW,是传统而又专业的Web前端开发工具,对HTML、CSS和JavaScript编码支持的比较完善。为了使Dreamweaver具备jQuery代码自动提示功能,我们需要从互联网上下载一些Dreamweaver插件,只不过目前Dreamweaver官方没有发布支持jQuery代码自动提示的插件,我们只能通过第三方(个人或团体)来获得该插件。获得插件后需要进行安装,运行DW
Eclipse插件
如果你需要在Eclipse中编写jQuery代码,那么可以安装jQueryWTP或Spket插件,这两个插件都可以使Eclipse支持jQuery代码
3.1 jQuery初体验
我们先看一段原生JavaScript代码,如下所示:
示例3.1
<body><div id="title"><h3>示例3.1</h3></div><a href="www.baidu.com">百度</a><a href="www.163.com">网易</a><input type="text" class="txt" value="1"/><input type="text" class="txt" value="2" /><input type="button" id="btn" value="ok" /></body></html><script>alert(document.getElementById("btn").value);alert(document.getElementsByTagName("a").length);alert(document.getElementById("title").innerHTML);</script>
上述代码分别通过id、标签名获得了相关元素,并使用value、length和innerHTML属性输出了相关信息。下面我们使用jQuery实现与示例3.1相同的功能,代码如下所示:
示例3.2
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例3.2</title><script src="jquery-1.7.2.min.js"></script></head><body><div id="title"><h3>示例3.2</h3></div><a href="www.baidu.com">百度</a><a href="www.163.com">网易</a><input type="text" class="txt" value="1"/><input type="text" class="txt" value="2" /><input type="button" id="btn" value="ok" /></body></html><script>alert(jQuery("#btn").val());alert(jQuery("a").size());alert(jQuery(".txt").size());alert(jQuery("#title").html());</script>
上述加粗部分是使用jQuery编写的代码,首先必须要通过<script>标签导入jQuery库,然后再编写jQuery代码。
jQuery( )函数是jQuery的核心函数,主要用来获得页面元素,jQuery的核心功能都基于该函数实现。jQuery( )函数支持多种选择器,包括基本选择器、层次选择器、属性选择器、表单选择器等等,示例3.2使用了基本选择器,其他选择器我们会在后面的章节中学习。
jQuery选择器完全继承了CSS选择器的风格,在前面的学习中,我们已经学习了CSS选择器,所以jQuery选择器对于我们来说就比较简单了。基本选择器是最基本、最常用的选择器,具体见表3-1-1所示。
表3-1-1 基本选择器
基本选择器 | 说明 |
#id | 根据CSS id选择器的名字来获取页面元素,相当于 document.getElementById( ) |
.class | 根据CSS类选择器的名字来获取页面元素 |
element | 根据CSS标签选择器的名字来获取页面元素,相当于 document.getElementsByTagName( ) |
* | 获取页面所有元素 |
selector1,selector2, ... | 获取每一个选择器所匹配的元素 |
示例3.2是jQuery基本选择器的具体应用,其中还牵涉到平时最常用的三个函数:
val( ):用来获得元素value属性的值
html( ):用来获得元素标签内的所有信息,包括标签和文本,相当于DOM中的innerHTML
size( ):用来获得集合/数组的长度
jQuery( )函数还可以进一步简写成$( ),即使用$来代替jQuery,使得代码编写更加简洁,示例3.3使用简写的方式重新实现了示例3.2,代码如下所示。
示例3.3
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例3.3</title><script src="jquery-1.7.2.min.js"></script></head><body><div id="title"><h3>示例3.3</h3></div><a href="www.baidu.com">百度</a><a href="www.163.com">网易</a><input type="text" class="txt" value="1"/><input type="text" class="txt" value="2" /><input type="button" id="btn" value="ok" /></body></html><script>alert($("#btn").val());alert($("a").size());alert($(".txt").size());alert($("#title").html());</script>
由于$( )这种写法非常简洁,所以在实际开发中通常都使用这种写法。通过示例3.1、3.2和3.3的对比,我们会发现jQuery相对于原生JavaScript在代码编写上变得非常简洁、优雅,能大大提高编码效率,减低出错次数。
html( )和val( )函数除了可以获得相关信息外,我们还可以通过这两个函数来设置相关信息,只需要通过参数传值即可,例如下面的代码。
<script>
$("#btn").val("确定");
$("#title").html("<h3>hello</h3>");
</script>
jQuery中的很多函数都像html()和val()一样,无参时用来获取信息,带参时用来设置信息。
jQuery基本选择器中的最后一种“selector1,selector2, ...”是选择器集合,适合对页面多个元素进行集中控制,例如下面的代码。
示例3.4
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例3.4</title><script src="jquery-1.7.2.min.js"></script></head><body><input type="text" class="txt" value="1"/><input type="text" class="txt" value="2" /><input type="button" id="btn" value="ok" /></body></html><script>alert($(".txt,#btn").size());</script>
上述代码的粗体部分是选择器集合的具体写法,所有的选择器都放在一对引号里,中间用逗号隔开即可。
3.2 jQuery注释
给代码添加注释是良好的编码习惯,jQuery的注释分为以下两种:
单行注释://
<script>//alert($("#btn").val());//alert($("a").size());//alert($(".txt").size());//alert($("#title").html());</script>Ø 多行注释:/* */<script>/*alert($("#btn").val());alert($("a").size());alert($(".txt").size());alert($("#title").html());*/</script>
3.3 jQuery对象和DOM对象
初次学习jQuery,很多开发人员经常遇到的问题是分不清哪些是JS中的DOM对象、哪些是jQuery对象,很容易混淆,所以在这里需要重点强调一下这个问题。
我们在前面的课程中已经学习了DOM,它是通过文档对象模型以面向对象的方式来操纵HTML元素。通常使用document对象的相关方法来获取HTML元素,这时获得的是DOM对象,例如下面的代码。
示例3.5
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例3.5</title></head><body><div id="title"><h3>示例3.5</h3></div><input type="button" id="btn" value="ok" /></body></html><script>alert(document.getElementById("btn").value);alert(document.getElementById("title").innerHTML);</script>
通过document对象的getElementById方法获得的就是DOM对象,接下来就可以调用value或innerHTML这些DOM对象的属性了。
jQuery对象实际上是通过jQuery对DOM对象进行封装后产生的对象,它是jQuery独有的。例如下面的代码:
示例3.6<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例3.6</title><script src="jquery-1.7.2.min.js"></script></head><body><div id="title"><h3>示例3.6</h3></div><input type="button" id="btn" value="ok" /></body></html><script>alert($("#btn").val());alert($("#title").html());</script>
虽然$("#btn")和document.getElementById("btn")所起的作用都是一样的,但两者不能等价。document.getElementById("btn")获得的是DOM对象,它不能调用jQuery中的html()和val()方法;$("#btn")获得的是jQuery对象,它不能调用DOM中的innerHTML和value属性。
DOM对象和jQuery对象不能混用,但是这两者之间却可以相互转换。下面介绍两者之间的转换方法。
1.jQuery对象转换成DOM对象
jQuery提供了两种方式来实现jQuery对象转换成DOM对象,分别是[下标] 和get(索引)方法,例如下面的代码。
示例3.7
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例3.7</title><script src="jquery-1.7.2.min.js"></script></head><body><div id="title"><h3>示例3.7</h3></div><input type="button" id="btn" value="ok" /></body></html><script>var btn=$("#btn"); //jQuery对象alert(btn[0].value); //DOM对象var div=$("#title"); //jQuery对象alert(div.get(0).innerHTML); //DOM对象</script>
2. DOM对象转换成jQuery对象
对于一个DOM对象,只需要使用$( )把它包裹起来即可转换成jQuery对象,即$(DOM对象),例如下面的代码。
示例3.8
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例3.8</title><script src="jquery-1.7.2.min.js"></script></head><body><div id="title"><h3>示例3.8</h3></div><input type="button" id="btn" value="ok" /></body></html><script>var btn=$(document.getElementById("btn"));alert(btn.val());var div=$(document.getElementById("title"));alert(div.html());</script>
3.4 each( )
在Web前端开发中,经常需要进行循环或遍历操作,以前在使用JavaScript时一般都是通过for循环来实现的,例如下面的代码。
示例3.9
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例3.9</title><script src="jquery-1.7.2.min.js"></script></head><body><table width="35%" height="160" border="0" align="center"><tr><td height="32" colspan="2" align="center">用户登录</td></tr><tr><td width="29%" height="36">登录名称:</td><td width="71%"><input class="text" type="text"/></td></tr><tr><td height="38">登录密码:</td><td><input class="text" type="password" /></td></tr><tr><td colspan="2" align="center"><input type="submit" id="btn"value="登录" οnclick="check()"/></td></tr></table></body></html><script>function check(){var txtArray=document.getElementsByTagName("input");for(var j=0;j<txtArray.length;j++){if(txtArray[j].type!="submit"){if(txtArray[j].value==""){alert("所有的文本框都必须填写!");return false;}}}}</script>
上述代码使用for循环实现了非空验证,当用户单击【登录】按钮时,只要登录名称和登录密码有一个未填就会给出提示信息。
jQuery中的each( )和JavaScript中的for循环很相似,但是使用起来更加简洁、高效。下面我们使用jQuery中的each( )实现示例3.9的功能,代码如下所示。
示例3.10
<script>$("#btn").click(function(){$(".text").each(function(){if($(this).val()==""){alert("所有的文本框都必须填写!");return false;}})})</script>
页面中文本框和密码框的class属性的值都是text,因此可以使用jQuery基本选择器$(".text")获取到包含这两个元素的集合,接下来直接使用each( )开始对集合循环遍历,这需要一个匿名回调函数来实现,循环遍历过程中可以通过$(this)获取集合中当次遍历的元素对象。
在使用each( )时,可以通过return语句控制循环流程,return true表示直接开始下一次循环;return false表示直接退出循环。
上述代码还涉及到了jQuery中的鼠标单击事件click。与前面所学的DOM事件相比,jQuery事件的名字把“on”去掉了,例如DOM事件onclick在jQuery中是click;DOM事件onmouseover在jQuery中是mouseover。在给jQuery事件绑定函数时通常都使用匿名回调函数,具体语法如下所示,jQuery事件会在后续章节中做具体讲解。
jQuery对象 . jQuery事件名(
function ( )
{
//代码
}
)
3.5 学习jQuery库
jQuery库就是一个js文本文件,建议在以后的学习中经常打开jQuery源文件进行学习,这会使你对JavaScript和jQuery有更深入的了解。图3.1.7显示了源文件中jQuery函数的定义。
3.1 jQuery代码调试
jQuery代码本质上就是纯文本的JavaScript,所以都是由浏览器负责解释、执行。JavaScript的调试一直都是让开发人员头疼的问题,现在一些高版本的浏览器已经增强了断点调试功能,下面我们以示例3.8为例分别演示使用IE 8和FF 9如何进行断点调试。
3.1.1 IE 8
1. 使用IE8打开示例3.8 。
单击浏览器菜单栏中的【工具】|【开发人员工具】菜单项,或快捷键F12打开开发人员工具界面
3.1.1 FF 9
1. 火狐浏览器主要是通过它的一个插件来实现JavaScript断点调试功能的,该插件的名字是Firebug,需要单独安装。安装过后,单击菜单栏【工具】|【Web开发者】|【Firebug】|【打开Firebug】,或者快捷键F12来启动调试器
IE 8和FF 9都提供了相对成熟、完善的断点调试功能,这给广大Web前端开发人员带来了极大的好处,非常有利于代码排错和调试。
本章总结
本章的内容比较简单,主要介绍jQuery的入门知识,包括开发环境、开发工具、代码框架和代码调试等,这些都是jQuery编码的基础,必须掌握熟练。在后面的学习中,我们会陆续学习到jQuery方方面面的知识,在编码过程中要注意使用浏览器就行代码调试,积累调试经验。
任务实训部分
1:实现简易计算器
训练技能点
jQuery库的使用
jQuery基本选择器
需求说明
按照图3.2.1所示的界面实现计算器功能,文本框中的值使用jQuery选择器获取。
图3.2.1 计算器
2:实现简易计算器
训练技能点
jQuery库的使用
jQuery对象转换
需求说明
在上个任务的基础上使用document对象的相关方法获得文本框元素,然后转换成
jQuery对象,并实现计算器功能。
3:实现表单验证
训练技能点
jQuery库的使用
jQuery基本选择器
需求说明
按图3.2.2所示的界面使用jQuery实现表单即时验证。
实现树形菜单
训练技能点
jQuery库的使用
jQuery基本选择器
jQuery对象转换
需求说明
仿照下图所示界面,用jQuery获得元素,然后转换成DOM对象并实现树形菜单效果。
实现步骤
(1)实现树形菜单界面,二级子菜单默认隐藏,参考代码如下所示。
<div id="g1"><img src="img/jia.gif" οnclick="show()"/><a href="#" >国产</a><div><div class="sec"><img src="img/jia.gif" οnclick="show()"/><a href="#" >北京奔驰</a></div><div class="sec"><img src="img/jia.gif" οnclick="show()"/><a href="#" >北京现代</a><div><div class="three"><img src="img/flag.gif"/><a href="#" οnclick="ji()">悦翔</a></div><div class="three"><img src="img/flag.gif"/><a href="#" οnclick="ji()">索纳塔</a></div><div class="three"><img src="img/flag.gif"/><a href="#" οnclick="ji()">途胜</a></div><div class="three"><img src="img/flag.gif"/><a href="#" οnclick="ji()">伊兰特</a></div></div></div><div class="sec"><img src="img/jia.gif" οnclick="show()"/><a href="#" >比亚迪</a></div></div></div>
(2)按照需求说明实现二级子菜单的显示/隐藏
巩固练习
一、选择题
1. 以下()属于JavaScript库。
A. Prototype
B. jQuery
C. Ext
D. Dojo
2. 以下关于jQuery的说法正确的是()。
A. jQuery侧重于用户界面,属于重量级的JS 8000 库
B. 编写jQuery代码时必须安装相关插件
C. jQuery对象和DOM对象完全一样,只不过是API不同
3. 以下关于jQuery函数说法正确的是()。
A. html()函数只能用来获取信息
B. val()函数只能用来获取value属性的值
C. jQuery对象拥有innerHTML属性
D. jQuery对象和DOM对象可以相互转换
4. 下列代码正确的是()。
A.
var btn=$(document.getElementById("btn"));
alert(btn.value);
B.
alert(jQuery("#title").innerHTML);
C.
alert(document.getElementById("btn").val());
alert(document.getElementById("title").html());
D.
var btn=$(document.getElementById("btn"));
alert(btn.val());
二、上机练习
自己制作一个登录界面并使用jQuery实现登录验证。
- WEB入门之十二 jquery简介
- WEB入门之十二 jquery简介
- WEB入门之十二 jquery简介
- 终结篇:RemoteWebDriver与Grid简介-----Selenium快速入门(十五)
- Web开发技术——JQuery1(简介)
- Web前端从入门到精通-4 html简介
- jQuery入门简介
- JavaWeb学习----JSP简介及入门(含Eclipse for Java EE及Tomcat的配置)
- 开发可靠安全的 Web 应用程序:IBM Rational AppScan Developer Edition 入门简介
- 菜鸟写jquery入门教程(for web前端开发群4)(02)
- jQuery是什么,jQuery入门简介
- Web前端从入门到精通-9 css简介——盒模型1
- jQuery入门简介
- jQuery入门简介
- Web前端从入门到精通-3 html简介
- jQuery入门简介
- jQuery入门简介
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
- 初窥JQuery-Jquery简介 入门了解篇
- Web前端从入门到精通-6 css简介——选择器优先级