第5章
jQuery基础



由于JavaScript本身存在两个缺点： 一个是复杂的DOM操作，另一个是不一致的浏览器实现。因此，为了简化JavaScript开发工作，解决浏览器之间的兼容性问题，业界出现了许多的JavaScript库。JavaScript库中封装了很多预定义的对象和使用函数，能够帮助开发人员轻松搭建具有高难度交互功能的客户端页面，并且可以完美兼容各种浏览器。其中，jQuery在经历了若干次版本更新后，逐渐从各种JavaScript库中脱颖而出，成为Web开发人员的最佳选择。本章主要讲解jQuery的基本语法、如何使用jQuery操作DOM元素以及正则表达式的应用。
5.1jQuery的作用
jQuery是一种轻量级的JavaScript库，它的设计主旨是“write less, do more”。在开发中jQuery的作用主要包括5个方面。
1. 访问和操作DOM元素
jQuery提供了一套方便、快捷的API来操作DOM元素，因此在开发中可以在很大程度上减少代码的编写，并且提高用户对网页的体验度。
2. 控制页面样式
通过引入jQuery，开发人员可以便捷地控制页面的CSS样式，并且可以很好地兼容各种浏览器。
3. 对页面事件的处理
通过jQuery的事件绑定机制可以使得页面在处理事件时能将表现层和功能开发分离。这样一来，开发人员更多地专注于程序的逻辑与功能，页面设计人员可以侧重于页面的优化与用户体验。
4. 方便地使用jQuery插件
引入jQuery可以使用大量的jQuery插件来完善页面的功能和效果，如jQuery UI插件、Form插件、Validate插件等。
5. 便捷地使用AJAX
实际开发中，利用AJAX异步读取服务器数据是常见的需求，使用原生的JavaScript来操作AJAX十分烦琐，而引入jQuery后，不仅完善了功能，还大大简化了代码的编写，通过其内部对象和函数，简单几行代码就可以实现复杂的功能。
5.2开发环境搭建
搭建jQuery开发环境十分简单，只需简单的几个步骤。
1. 下载jQuery
进入jQuery官网(https://jquery.com/)，单击页面右侧的Download jQuery进入下载页面。jQuery库的类型有两种： 开发版(未压缩)和发布版(压缩)，它们的对比如表51所示。



表51jQuery版本区别



名称说明

jQuery版本号.js完整无压缩版本，主要用于测试、学习和开发
jQuery版本号.min.js经过压缩后的版本，主要用于发布的产品和项目

本教程采用的版本为无压缩版，版本号为jQuery3.4.1.js。





2. 引入jQuery


图51配置jQuery

在实际开发中，只需把下载的jQuery库文件放到工程中的一个公共位置，然后在相应页面引用即可。例如，首先在工程jQuery中新建文件夹js，并将jQuery的库文件放入该文件夹中，然后创建页面51.html，如图51所示。

在51.html页面中便可通过如下代码引入jQuery库。

<script src="js/jquery-3.4.1.js"></script>

其中，src属性引用时使用的是相对路径，在实际项目中，可根据需求调整jQuery库的路径。
3. 使用jQuery
在页面中引入jQuery后，就可以在<script>标签中使用它了。
【例51】在51.html中加入代码，引入jQuery。

<script type="text/javascript">

$(document).ready(function () {

alert("Hello jQuery...")

})

</script>


例51所示代码会在浏览器中弹出一个警告框，如图52所示。


图52jQuery的Hello World



页面51.html代码中的一条关键语句为$(document).ready()，这条语句可分成3个部分： $()、document、ready()，在jQuery中分别称为工厂函数、DOM对象和jQuery方法。
工厂函数$()的作用是将DOM对象转化为jQuery类型的对象，从而使得该对象能调用相应的jQuery方法。例如，document对象是一个DOM对象，将它作为参数传给工厂函数$()转化为jQuery对象类型后，就能使用jQuery封装好的ready()方法，该方法可以将函数作为参数传入，表示在页面加载完成后才执行该函数，类似于window对象的onload功能。
除了可以给工厂函数传具体的DOM对象外，还可以给它传jQuery选择器来选择页面相应的元素。jQuery选择器与CSS选择器类似，但又有所不同，我们将在5.4节中详细讲述它。
jQuery对象提供了一系列的方法。其中，一类重要的方法就是事件处理方法，主要用来绑定DOM元素的事件和事件处理函数。一般情况下，事件处理函数会作为参数传给jQuery对象的事件方法，例如页面51.html中的ready()方法。在实际开发中，为了简化开发，通常省略ready()方法，而将事件处理函数直接传给工厂函数。例如，例51所示代码可简化如下： 

<script type="text/javascript">

$(function () {

alert("Hello jQuery...")

})

</script>

另外，在jQuery中，符号“$”实际代表的是jQuery对象本身(这里注意区别其他jQuery类型的对象)，因此工厂函数$()也可写成jQuery()，$后面也可以直接调用方法。例如，如下代码调用了jQuery对象的trim()方法会将字符串“ my university ”两边的空格去除并在控制台打印“my university”。

jQuery(function () {

var str = ' my university'

console.log('---'+$.trim(str)+'---')

})


5.3jQuery对象和DOM对象
在实际开发中，容易混淆的是jQuery对象和DOM对象的概念和用法。因此，在详细讲述jQuery语法之前，有必要弄清楚两者的区别和联系。
1. DOM对象
使用原生JavaScript方法如getElementById()或getElementsByTagName()等方法获取到的DOM元素就是DOM对象，DOM对象有其独有的属性和方法。例如下述代码将获取id为my的DOM对象，并访问DOM对象独有的innerHTML属性。

var domObj = document.getElementById("my") // 获取DOM对象

var objHTML = domObj.innerHTML // 使用DOM对象的innerHTML属性


2. jQuery对象
jQuery对象是指通过工厂函数将DOM对象转换后的对象，只有jQuery对象能够使用jQuery方法。例如下述代码将id为“my”的元素转换为jQuery对象后，调用jQuery对象独有的html()方法。

$("#my").html() //获取id为my的元素的html内容

其中，给工厂函数传的#my表示jQuery选择器(用单引号或双引号引用来表示)，该选择器选择了页面中id属性为my的DOM元素并将之转换为jQuery元素，进而调用html()这一jQuery方法，功能等价于document.getElementById(“my”).innerHTML。
需要注意的是，jQuery对象无法使用DOM对象的任何属性和方法，同样，DOM对象也无法使用jQuery对象的任何属性和方法。例如，$(“#my”).innerHTML和domObj.html()都是错误的使用方法。
3. 相互转换
实际开发中，往往使用jQuery对象操作DOM更加快捷、方便，但在某些特定场景下也需要将jQuery对象转化成原生的DOM元素进行操作，可以使用get()方法将jQuery对象转换成DOM对象，例如： 
var myDOM = $("#my").get() //将jQuery对象转换为DOM对象


当jQuery对象是数组或者集合时，则需要给get()方法指定相应的索引。将DOM对象转换成jQuery直接使用工厂函数即可，例如： 

var $myJQuery = $(domObj) //将DOM对象转换为jQuery对象

实际开发中，通常给jQuery对象类型的变量名前加“$”符号以区分DOM对象类型的变量，例如这段代码中的变量$myJQuery。
5.4jQuery选择器
选择器是jQuery的核心之一，其主要作用是为方便获取页面中的元素，然后为该元素添加相应的行为，使页面交互变得快捷、丰富。根据jQuery选择器获取元素方式的不同，可以分为通用CSS选择器和过滤选择器两种。
5.4.1通用CSS选择器
我们将CSS选择器加上单引号或者双引号作为jQuery的工厂函数的参数，称为jQuery的通用CSS选择器，语法如下： 

$('CSS selector')

该函数会返回相应页面DOM元素转化后的jQuery对象。jQuery支持大多数CSS选择器，包括基本选择器、层次选择器和属性选择器，其语法与CSS选择器完全相同。下面给出这3种选择器的基本用法和简单示例。
1. 基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全集选择器，通过基本选择器可以实现大多数页面元素的查找，关于基本选择器的说明如表52所示。


表52jQuery基本选择器



名称返回值示例

标签选择器元素集合$('h1')选取所有<h1>元素
类选择器元素集合$(".title")选择所有class属性为title的元素
id选择器单个元素$("#my")选择 id为my的元素
并集选择器元素集合$('div,span,p')选取所有<div>、<p>和<span>元素
交集选择器单个或者多个$('div#my')选择id为my的<div>元素
全局选择器元素集合$('*')选择所有页面元素

2. 层次选择器
层次选择器主要用来选择当前元素的后代元素、子元素、相邻元素和兄弟元素。有关层次选择器的用法说明见表53。


表53jQuery层次选择器



名称返回值示例

后代选择器元素集合$('#my span')选择id为my元素下的所有后代元素<span>
子选择器元素集合$('#my>span')选择id为my元素下的所有子元素<span>
相邻元素选择器元素集合$('#my+span')选择紧邻id为my元素之后的兄弟元素<span>
兄弟元素选择器元素集合$('#my~span')选择id为my元素之后的所有兄弟元素<span>

3. 属性选择器
属性选择器通过HTML元素的属性来选择相应的元素，有关属性选择器的用法说明见表54。


表54jQuery属性选择器



语 法 构 成返回值示例

［attr］元素集合$("［href］")选择含有href属性的元素
［attr=val］元素集合$("［href='#'］")选择href属性值为“#”的元素
［attr!=val］元素集合$("［href!='#'］") 选择href属性值不为“#”的元素
［attr^=val］元素集合$("［href^='http'］") 选择href属性值以http开头的元素
［attr$=val］元素集合$("［href$='com'］") 选择href属性值以com结尾的元素
［attr*=val］元素集合$("［href*='wzu'］") 选择href属性值包含wzu的元素
［attr1=val1］ ［attr2=val2］…元素集合$("div［id］［class='univ'］")选择含有id属性并且class属性为univ的<div>元素

5.4.2过滤选择器
过滤选择器的主要作用是在原有匹配的元素中进行二次筛选，有关过滤选择器的用法说明见表55。

表55jQuery过滤选择器



语 法 构  成返回值示例

:first单个元素$("li:first")选取第一个<li>元素
:last单个元素$("li:last")选取最后一个<li>元素
:not(selector)集合元素$("li:not(.my)")选取class属性不是my的<li>元素
:even集合元素$("li:even")选取索引为偶数所有<li>元素
:odd集合元素$("li:odd")选取索引为奇数所有<li>元素
:eq(index)单个元素$("li:eq(3)")选取索引为3的<li>元素
:gt(index)集合元素$("li:gt(3)") 选取索引大于3的<li>元素
:lt(index)集合元素$("li:lt(3)") 选取索引小于3的<li>元素
:hidden集合元素$(":hidden")选取所有隐藏的元素
:visible集合元素$(":visible")选取所有可见的元素

5.5jQuery事件处理机制
在了解了jQuery选择器后，就可以结合jQuery事件处理机制与页面进行交互。实际开发中常用的步骤为首先通过jQuery选择器选取DOM元素，然后给选定的元素绑定事件及相应的处理函数。jQuery绑定事件的方式主要有两种，第一种语法如下： 

$('selector').eventName(function(){函数体})

其中selector表示选择器，eventName表示事件名称，function为事件响应函数。
【例52】创建页面52.html。

<script type="text/javascript">

$(function () {

$("#btn1").click(function () {

alert("你好!")

})

})

</script>

<body>

<button id="btn1">点我弹框</button>

</body>


例52所示代码为页面中id为btn1的按钮绑定了单击事件，单击该按钮会执行相应的事件处理函数，此处为弹出一个信息为“你好”的警告框。
另外一种通用的事件绑定的语法如下： 

$('selector').on("eventName", function(){函数体})

该语法通过jQuery的on()函数来绑定事件，on()函数的第一个参数为绑定的事件名称，第二个参数为事件响应函数，具体的事件名称可通过官方文档(https://jquery.cuishifeng.cn/on.html)进行查阅。例如，页面52.html中的代码可以修改为： 

$("#btn1").on('click', function () {

alert("你好!")

})


可以看出，第一种绑定事件的方式相对直观，编码方便，但一次只能添加一个监听，而且有的监听事件不支持这种方式。第二种方式则更加通用，且可以添加多个监听。因此，实际开发中推荐使用第二种方式。例如，在页面52.html中添加如下代码： 

$('#div1')

.on('mouseenter', function () {

console.log('进入')

})

.on('mouseleave', function () {

console.log('离开')

})

<div id= "div1" style="height: 100px; width: 100px">div1</div>


以上代码的功能是为id为div1的<div>同时绑定了鼠标移进和移出事件，当鼠标指针移进该DIV区域时会触发事件处理函数mouseenter，此处为在控制台打印“进入”二字； 当鼠标移出该DIV区域时会触发事件处理函数mouseleave，此处为在控制台打印“离开”二字。
尽管jQuery中还存在许多其他事件，如键盘事件、表单事件等，但用法与例52基本一致，读者只需理解并掌握事件处理的原理即可，以后在遇到实际问题时便可自行查阅jQuery官方文档。
5.6jQuery中的DOM操作
jQuery中提供了一系列的操作DOM的方法，它们不仅简化了使用传统JavaScript操作DOM时烦琐的代码，而且解决了跨平台浏览器兼容性问题，从而提高了开发效率并且令用户与浏览器的交互更加便捷。jQuery中的DOM操作主要分为内容操作、节点操作和样式操作，下面分别对这三部分做详细介绍。
5.6.1内容操作
jQuery提供了对元素内容的操作方法，即对HTML代码、标签内容和属性值内容进行操作。
1. 操作HTML代码
jQuery主要使用html()方法来对HTML代码进行操作，该方法类似于JavaScript中的innerHTML属性，通常用于动态新增和替换页面的内容，其语法格式如下： 

html(［content］)

其中，content表示可选参数，当有值时表示设定被选元素的新内容，当没有参数时表示获取被选元素的内容。
【例53】创建页面53.html。

<script type="text/javascript">

$(function () {

$('#btn1').click(function () {

$('#ans').html("<ul><li>Q1</li><li>Q2</li></ul>")

})

$('#btn2').click(function () {

alert($('#ans').html())

})

})

</script>

<body>

<button id="btn1">单击显示问题</button>

<button id="btn2">单击弹出问题</button>

<div id="ans"></div>

</body>


例53所示代码在单击“显示问题”按钮时会在id为ans的<div>中通过html()方法设置页面内容，显示效果如图53所示。给元素设置完HTML内容后，单击“弹出问题”按钮会将该元素的HTML内容以对话框形式弹出，如图54所示。在页面初始阶段单击该按钮，弹出的内容为空。可以看出，html()方法返回的是该标签节点的所有内容。


图53设置元素的HTML内容




图54获取元素的HTML内容


2. 操作标签内容
使用text()方法可以获取或设置元素的文本内容，而不含html。例如在53.html页面中添加如下代码： 

<script>

…

$('#btn3').click(function () {

alert($('#ans').text())

})

</script>

<button id="btn3">单击弹出文本</button>


单击完“显示问题”按钮后，单击“弹出文本”按钮，显示效果如图55所示。


图55获取元素的text内容



同样的，使用text()方法设置元素内容时，html也将会转义成普通字符来解析。例如，继续在55.html页面中添加如下代码:

<script>

$('#btn4').click(function () {

$('#ans').text("<ul><li>Q1</li><li>Q2</li></ul>")

})

</script>

<button id="btn4">单击设置文本</button>


直接单击该按钮，所弹出的内容如图56所示。


图56使用text()方法设置元素文本



3. 操作value属性值
jQuery对象的val()方法常用于获取和设置DOM元素的value属性值。
【例54】创建页面54.html。

<script>

$('#search').

on("focus", function () {

if($(this).val() == "请输入内容"){

$(this).val("")

}

}).on("blur", function () {

if($(this).val() == ""){

$(this).val("请输入内容")

}

})

</script>

<input type="text" value="请输入内容" id="search">


例54所述代码创建的初识页面显示文本框，并且文本框有默认值“请输入内容”，如图57所示。当文本框获得鼠标焦点时会触发focus事件，处理函数会获取文本框的value属性值并判断是否为默认值，如果是则清空内容，如图58所示。当文本框失去焦点时，如果当前文本框内容为空则恢复为默认值。



图57初始文本框状态




图58获取焦点时文本框状态



5.6.2节点操作
DOM中的节点类型分为元素节点、文本节点和属性节点，文本节点和属性节点又包含在元素节点中，其中，文本节点又属于内容，已在5.5.1节中介绍过。下面主要讲述元素节点的创建、查找、插入、删除、替换、遍历以及属性节点的获取和设置等。
1. 创建和插入节点
jQuery在页面中创建新元素的语法为$(html)，其中$()为工厂函数，参数为标准HTML代码。例如以下代码创建了一个id为“city”、内容为“城市”的<li>元素节点。

$("<li id='city'>城市</li>")

上述代码仅创建了一个新元素，尚未添加到DOM中。要想在页面中新增一个节点，则必须将创建的节点插入到DOM中。jQuery提供了多种方法来实现节点的插入，从插入方式上来看主要分为两大类： 内部插入和平行插入，具体方法见表56。


表56插入节点方法



插入方式方法案例

内部插入

append(n)$('F').append('c')表示将c作为子节点插入到F的尾部
appendTo(n)$('c').appendTo('F')表示将c作为子节点插入到F的尾部
prepend(n)$('F'). prepend('c')表示将c作为子节点插入到F的首部
prependTo(n)$('c'). prependTo('F')表示将c作为子节点插入到F的首部

平行插入

after(n)$('A').after('B')表示将B作为兄弟节点插入到A之后
insertAfter(n)$('A').insertAfter('B')表示将A作为兄弟节点插入到B之后
Before(n)$('A').before('B')表示将B作为兄弟节点插入到A之前
insertBefore(n)$('A'). insertBefore('B')表示将A作为兄弟节点插入到B之前

下面以常见的append()方法为例，讲述插入节点在开发中常见的应用场景。
【例55】创建页面57.html。

<script type="text/javascript">

$(function () {

$('#btn1').click(function () {

$('ul').append("<li>复旦大学</li>")



})

})

</script>

<body>

<h2>中国著名大学</h2>

<ul class="univ">

<li>清华大学</li>

<li>北京大学</li>

<li>浙江大学</li>

</ul>

<button id="btn1" value="添加节点">添加</button>

</body>


例55所示代码的初始页面效果如图59所示，单击“添加”按钮将在节点<ul>内追加新创建的<li>节点，效果如图510所示。


图59追加节点初始页面




图510追加后页面


appendTo()方法表示将前一个节点追加到后一个节点后面，调用方法的节点必须是jQuery对象。例如，在55.html中添加下述代码： 

$('#btn2').click(function () {


$('<li>南开大学</li>').appendTo($('ul'));


})

<button id="btn2" value="添加节点2">appendTo</button>


利用appendTo()，可以将节点“南开大学”作为最后一项追加到<ul>列表的后面。需要注意的是，调用方法的对象必须是jQuery对象。appendTo()方法传入的参数可以是jQuery对象,也可以是普通的字符串，比如上述代码粗体部分也可改成“$('<li>南开大学</li>').appendTo('ul')”。表56中其余几个方法的用法同append()和appendTo()方法类似，请读者自行尝试。
2. 删除、清空和替换节点
使用jQuery删除页面节点的方法为remove()，该方法用于删除匹配元素及其包含的文本和子节点。例如，$('ul').remove()将会删除<ul>元素及其所有后代节点。不同于remove()方法，empty()方法能清空元素中的所有后代节点。例如$('ul').empty()将会清空<ul>标签内所有的节点，而<ul>元素本身不被删除。
jQuery中替换节点的方法有replaceWith()和replaceAll()。前者的作用是将所有匹配的元素替换成指定的节点。例如，$('.ul li:eq(1)').replaceWith("<li>西湖大学</li>")将<ul>下第2个<li>元素(“北京大学”)替换成括号内的内容(“西湖大学”)。replaceAll()方法的作用相同，只是颠倒了replaceWith()方法的操作顺序，类似于append()方法和appendTo()方法。继续在页面57.html中添加如下代码： 

$('#btn3').click(function () {

$('ul').remove();

})

$('#btn4').click(function () {

$('ul').empty();

})

$('#btn5').click(function () {

$('ul li:last').replaceWith("<li>中国科学院</li>");

})

$('#btn6').click(function () {

$('<li>国防科大</li>').replaceAll('ul li:last');

})

<button id="btn3" value="删除节点">remove</button>

<button id="btn4" value="清空节点">empty</button>

<button id="btn5" value="替换节点1">replaceWith</button>

<button id="btn6" value="替换节点2">replaceAll</button>


在创建的页面中单击id为“btn4”的按钮后，页面所有<li>节点会被清空，但会保留<ul>节点。单击前，页面及其源码如图511所示； 单击后，页面及其源码如图512所示。


图511初始页面及源码





图512清空列表项后页面及源码



单击id为“btn5”的按钮会将列表的最后一项替换成“中国科学院”，单击id为“btn6”的按钮会用“国防科大”替换掉列表的最后一项，相应效果请读者自行尝试。
3. 查找和遍历节点
jQuery中除了可以使用选择器来查找节点外，还能通过已选择到的元素获取与其相邻的兄弟节点、父子节点等进行二次操作。此类方法中，常见的有children()、next()、prev()、siblings()、parent()、parents()等。例如，$('ul').children().length将会获取<ul>标签所有子元素的个数； $('ul li:eq(1)').next().html()将会获取<ul>下第2个<li>元素后面紧邻元素的html内容； $('ul li:eq(1)').siblings().length将会获取<ul>下第2个<li>元素前后所有同辈元素的个数； $('ul li:eq(1)').parent().html()将会获取<ul>下第2个<li>元素的父元素的html内容。读者可以根据以上描述自行在55.html页面中添加代码并观察结果。
遍历节点是Web开发中一个非常重要的功能，常用于在前端页面中遍历服务端传来的数据。其语法如下所示： 

$(selector).each(function(index, item))


其中，each()表示遍历节点集合方法； function()为每个节点的处理函数； 参数item表示当前元素，其对象类型为DOM类型，因此需要转换成jQuery对象后才能调用jQuery方法； index表示当前元素的索引。例如，在55.html中添加以下代码： 

$('#btn7').click(function () {

$("li").each(function (index, item) {


console.log(item.innerHTML + "===" + index)


})

})

<button id="btn7" value="遍历节点">each</button>


上述代码中的each()方法将遍历页面中所有<li>元素集合，并在控制台打印每个节点的html内容和索引值，效果如图513所示。


图513each()方法遍历集合元素



其中，item对象为当前遍历的元素节点，是DOM类型，因此需要调用innerHTML属性才能访问节点内容。如要对DOM元素使用jQuery方法，需要将其转换为jQuery对象，例如上述代码也可改成如下形式:

$("li").each(function (index, item) {

console.log($(item).html() + "===" + index) 

})

在实际开发中，一定要时刻注意DOM对象和jQuery对象的区分。
4. 属性节点的操作
除了操作元素节点本身，很多时候需要操作元素的属性。在jQuery中，有两种常用的操作元素属性的方法，分别为attr()和removeAttr()方法，前者可以用来获取和设置元素的属性，后者可以用来删除元素的属性。例如，$("#tab1").attr("border", 1)将为id为tab1的表格添加1个像素的边框，$("#img1").attr("width")将会获取id为img1的图片的宽度值，$("#img1").removeAttr("alt")将会删除id为img1 的图片的alt属性。
5.6.3样式操作
在jQuery中，对元素的样式操作主要包括直接设置样式值、获取样式值、追加样式、移出样式和切换样式。
1. 设置和获取样式
jQuery中常用的设置样式的方法为css()，其基本语法如下： 

$(selector).css(name, value) //设置css属性


也可以给css()方法传多个namevalue对： 

$(selector).css({name:value, name:value, …})


其中，name用来规定css属性的名称，该参数可以是任何css属性，value用来规定css属性的值。如果该方法没有value参数，则表示获取元素的css的值，语法如下:

$(selector).css(name)//获取css属性

【例56】创建页面56.html。

<style type="text/css">

#div1{width: 50px; height: 50px}//CSS代码

</style>

<div id="div1">div1</div> //HTML代码

<script>

$(function () {

$('#div1').mouseover(function () {//jQuery代码

$('#div1').css("background-color", "red")

})

})

</script>


例56所示代码功能为，当鼠标指针移动到div1区域时，该区域背景变红色。如要获取div1的宽度值，可用$('#div1').css("width")。
2. 追加和移除样式
jQuery中可以使用addClass()方法来追加样式，其语法格式如下： 

$(selector).addClass(class) //追加单个样式


也可以为： 

$(selector).addClass(class1 class2…) //追加多个样式


在页面56.html中添加以下代码:

.div2{

background-color: yellow;

border: 1px solid

}

<div id="div2">div2</div>

$('#div2').on('mouseover', function () {

$('#div2').addClass("div1 div2")

})


上述代码功能为，当鼠标指针滑过div2时，为div2追加了样式div1和样式div2(增加高度、宽度、背景颜色和边框)。追加样式本质上是为元素的class属性添加值。类似地，移出样式的语法如下： 

$(selector).removeClass(class) //移除单个样式


也可以为： 

$(selector). removeClass(class1 class2…) //移除多个样式

例如，在页面56.html中添加下述代码后，当鼠标指针移除div2的区域时，移除样式div2(背景颜色和边框消失)。

$('#div2').on('mouseout', function () {

$('#div2').removeClass("div2")

})


5.7表 单 验 证
表单是客户端向服务器端提交数据的主要媒介。为了保证表单数据的有效性和准确性，应用程序在处理业务之前通常需要先对数据进行验证，验证成功后再将数据发送给服务端。常用的验证方式有客户端验证和服务端验证，客户端验证本质上是在当前页面上调用脚本程序来对表单数据进行验证，而服务端验证则是将请求提交给服务端后，由服务端程序对提交的表单数据进行验证。这两种方式有各自的优势，客户端验证能在很大程度上减轻服务器的负担，而服务端验证能保证应用的安全性和有效性。因此，在实际开发中，通常将这两种验证方式结合使用。



图514网易邮箱注册表单验证


本章主要讲述如何使用正则表达式和jQuery技术进行客户端验证。在讲解具体技术之前先看一个案例，在开发HTML表单时需要对用户输入的内容进行验证，例如，验证用户名、邮箱格式是否正确等。图514展示了网易邮箱注册页面，当输入的邮箱格式错误时，页面会直接给注册用户一定的提示。这是如何做到的呢？实际开发中通常由正则表达式结合jQuery来实现此类功能。


正则表达式是一个描述字符模式的对象，它由一些特殊的符号组成。本节主要讲述如何在JavaScript中使用正则表达式。
1. 定义正则表达式
在JavaScript中，正则表达式有两种定义方式，一种是普通方式，另一种是构造函数方式。普通方式语法如下： 

var reg = /模式/修饰符

其中，模式代表了某种规则，可以使用一些特殊符号来构成。模式是正则表达式的核心，本节后面会进行详细讲述。修饰符用来扩展表达式的含义，主要有3个，并且可以任意组合。
(1) G: 表示全局匹配； 
(2) I: 表示不区分大小写匹配； 
(3) M: 表示可以进行多行匹配。
构造函数方式语法如下： 

var reg = new RegExp("模式"，"修饰符") 

创建完正则表达式后，可以使用test()方法来检测一个字符串是否匹配该模式，语法格式为： 

reg.test(字符串)


【例57】创建页面57.html。

<script type="text/javascript">

var reg = /wzu/i

var s = "wdfdfaawertrfwZudfadfadf"

alert(reg.test(s))

</script>


上述代码在JavaScript中定义了一个模式reg，该模式用来匹配目标字符串中是否包含子串wzu，修饰符i表示匹配过程中忽略大小写。可以看出，此时test()方法应该返回true，而如果没有修饰符i，则返回false。再看一个例子： 

var reg1 = / ^wzu/gm

var s1 = " wzudfda＼nwzu";

alert(s1.replace(reg1, "www"))


上述代码定义了一个模式reg1，该模式用于匹配以wzu开头的字符串。其中字符串s1存在符号“＼n”是多行字符串，由于加了全局匹配和多行匹配修饰符，该模式会将每一行作为一个单独的字符串处理，因此上述代码返回结果为wwwdfda＼nwww，如果不加修饰符g，则首次匹配成功后即返回。如果不加修饰符m，则不支持多行匹配。
2. 表达式的模式
正则表达式的模式一般分为简单模式和复合模式两种。简单模式是指通过普通字符的组合来表达的模式，例如var reg=/wzu/等。简单模式只能匹配普通字符串，不能满足复杂需求。下面着重讲解复合模式。
复合模式是指通过利用通配符来表达语义的模式，常见的正则表达式符号有选择符和量词符。其中，选择符如表57所示，量词符如表58所示。


表57正则表达式选择符



符号含义示例

［］匹配指定集合内的任一个字符/［234］/，匹配包含2或3或者4的字符串、/［09］/表示匹配任意数字、/［AZ］/表示匹配任意大写字母、/［^Az］/表示匹配非英文字母
^匹配字符串的开始/^wzu/，匹配以wzu开头的字符串
$匹配字符串的结尾/$wzu/，匹配以wzu结尾的字符串
＼d匹配一个数字序列/＼d/，等价于/［09］/
＼D匹配除了数字之外的任何字符/＼D/，等价于/^09/
＼w匹配一个数字、下画线或字母/＼w/，等价于［Az09_］
＼W匹配任何非单字字符/＼W/，等价于［^Az09_］
.匹配除了换行符之外的任意字符/./，等价于/［^＼n＼r］/




表58正则表达式量词符



符号含义示例

n?匹配0次或1次字符n/a?/，表示匹配出现字符a零次或1次的字符串
n*匹配0次或多次字符n/a*/，表示匹配出现字符a零次或多次的字符串
n+匹配1次或多次字符n/a+/，表示匹配出现字符a一次或多次的字符串
n{x}匹配字符n出现x次/a{3}/，表示匹配出现字符a三次的字符串
n{x, y}匹配字符n出现x次到y次/ a{2, 4}/， 表示匹配出现字符a二到四次的字符串
n{x,}匹配字符n出现>=x次/ a{3, }/， 表示匹配出现字符a>=3次的字符串

3. 实际案例
了解了正则表达式的基本知识后，在实际开发中就可使用正则表达式来验证表单数据了。以用户注册表单为例，需要验证的内容有用户名、密码、邮箱、手机号码、身份证等，主要验证输入的内容是否满足长度要求、是否含有特殊字符、是否符合一定的规则等。例如，我国身份证号码的规则为： 
(1) 15位或者18位； 
(2) 18位最后一位可能为X或者数字。
可定义正则表达式为:

var reg = /^＼d{15}(＼d{2}［0-9xX］)?$/

其中，d{15}表示前15位是数字，？表示(＼d{2}［09xX］)这一部分可出现0次或1次，该部分前2位是数字，最后1位是字符x或X。
验证电子邮箱是否符合规则的正则表示可定义如下： 

var reg = /^＼w+@＼w+(＼.［A-z］{2,3}){1,2} $/

其中，^＼w+表示邮箱必须以数字、字母或者下画线开头并且可以出现多次，@＼w+表示必须出现@符号，并且之后必须跟1次或多次数字、字母或者下画线。＼.［Az］{2,3}表示“.”号后面跟2~3个字母，其中“.”是正则表达式保留字，因此需要使用“＼”进行转义。
定义好规则后，便可以使用jQuery来对表单数据进行验证。在页面57.html中添加以下代码： 

$(function () {

$("input［name='identify'］").blur(function () {

var idf = $(this).val()

var reg =/^＼d{15}(＼d{2}［0-9xX］)?$/;

if(reg.test(idf) == false){

$("#idfInfo").html("身份证号码不正确，请重新输入")

}else{

$("#idfInfo").html("")

}

})

})

<input type="text" value="请输入身份证" name="identify"> <span id="idfInfo"></span>


该函数表示当输入框失去焦点后，将触发事件处理函数。该函数首先获取用户输入的内容，然后测试该内容是否匹配正则表达式定义的模式，如果不匹配则在id为idfInfo的<span>标签(默认为空)中给出提示信息，效果如图515所示。输入正确的身份证号则不显示任何信息。


图515正则表达式判定身份证号



根据上述原理，根据不同的规则，可以对不同的数据进行表单验证，读者可自行尝试。
小结
本章介绍了jQuery技术的基础知识，包括如何搭建开发环境、jQuery选择器的用法、使用jQuery操作DOM元素、利用jQuery和正则表达式进行表单验证等。jQuery技术在前端开发中应用得较为广泛，也是后面学习Ajax技术的基础，读者需要重点掌握本章所讲述的核心基础部分。