搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行。
- 下载jQuery文件库
在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮,将jQuery框架文件下载到本地即可,本教案使用的版本为稳定版:1.9.0版。
- 引入jQuery文件库
下载完jQuery框架文件后,并不需要任何的安装,仅需要使用<script>文件导入标记,将jQuery框架文件导入页面中即可,假设该文件下载后保存在项目文件夹Jscript中,那么,在页面的<head></head>中加入如下代码:
<script language="javascript" type="text/javascript" src="1.9.0/jquery.js"></script>
在页面的头部分,加入上述代码后,便完成了jQuery框架开发环境的搭建,就可以开始我们的jQuery学习了。
如果你了解JavaScript语言,那将对你掌握jQuery如虎添翼,因为jQuery本身就是JavaScript,只不过是把JavaScript代码包装成拿过来就能实现特定功能的代码库!例如,我们想改变页面中所有段落标签中的文本内容:
javaScript代码:
jQuery代码:
以上两段代码完成的功能是一样的。由此可以看出,jQuery更加的简洁方便,我们在处理DOM时不必关心功能的实现细节。 $()
就是jQuery中的函数,它的功能是获得()中指定的标签元素。如示例中$(“p”)
会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素,也可能是函数。
在jQuery中 $()
方法等价于jQuery()
方法,前者比较常用,是后者的简写。一般只有在$()
与其它语言冲突时才会使用jQuery()
方法。
#id 选择器(使用身份证号来找人)
element 选择器(寻找铅笔)
在文具盒中,有铅笔、钢笔和水彩笔,类似于页面中的<div>、<span>各个元素,虽然同属于一个容器,但有各自的功能,jQuery中可以根据元素名查找元素,格式如下:
$(“element”)
其中element就是元素的名称,也就是工具盒中的笔的名称,找到水彩笔,我们就可画画了,通过元素名找到元素就可以对它进行操作了。
如下图所示:在页面中,根据元素名找到了一个元素,并将它显示的字体加粗。
在浏览器中显示的效果:
从上面图中可以看出,根据元素的名称可以查找到该元素,并调用css()
方法将设置该元素内容中文字显示的样式。
此外,css()
方法的功能是设置或获取元素的某项样式属性,它的更多功能我们将在后续的章节中有详细的介绍。
.class 选择器(寻找红色铅笔)
* 选择器(取走全部铅笔)
有一个非常“牛”的选择器,“*”号选择器,它的功能是获取页面中的全部元素,“全部”啊!包括<head>、<body>、<script>这些元素,相当于可以取走你文具盒中的所有铅笔,格式为:
$(“*”)
选择器中的参数就一个“*”,既没有“#”号,也没有“.”号。 由于该选择器的特殊性,它常与其他元素组合使用,表示获取其他元素中的全部子元素。
如下图所示: 使用*选择器,获取div中的所有子元素并设置三个子元素显示相同的内容。
在浏览器中显示的效果:
由于三个元素都包含在<div>元素中,因此,它们都是<div>元素的子元素,那么,就可以使用$(“div *”)
的方式获取<div>元素中的这三个子元素,并使用html()
方法来设置它们显示的内容。
实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。
sele1,sele2,seleN选择器
有时需要精确的选择任意多个指定的元素,类似于从文具盒中挑选出多根自已喜欢的笔,就需要调用sele1,sele2,seleN选择器,它的调用格式如下:
$(“sele1,sele2,seleN”)
其中参数sele1、sele2到seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,如$(“#id”)、$(“.class”)、$(“selector”)
选择器等。
例如,通过选择器获取其中的任意两个元素,并将它们显示的内容设为相同,如图所示:
在浏览器中显示的效果:
虽然页面中添加了三个元素,但是通过使用$(“div,p”)
选择器方式获取了其中的<div>和<p>元素,并设置它们显示的内容。
ance desc选择器
本节开始,我们将介绍层次性选择器。
在实际应用开发中,常常是多个元素嵌套在一起,形成复杂的层次关系,通过层次选择器,可以快速定位某一层次的一个或多个元素,ance desc选择器就是其中之一,它的调用格式如下:
$("ance desc")
其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”,家族几代人里,都有名字里带“span”的,就可以用这个ance desc选择器把这几个人给定位出来。
例如,使用层次选择器,获取<div>元素中的全部<span>元素,并设置它们显示的内容,在如下图所示:
在浏览器中显示的效果:
从图中可以看出,使用层次选择器$("div span")
获取了在<div>元素中的两个元素,一个是<p>元素中的子元素,另一个是<p>元素外的同级元素,但它们都是在一个<div>元素下,也就是说在一个“家族”下。
parent > child选择器
prev + next选择器
prev ~ siblings选择器
与上一节中介绍的prev + next
层次选择器相同,prev ~ siblings
选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下:
$(“prev ~ siblings”)
其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。
例如,使用prev ~ next
选择器,获取<p>元素后面相邻的全部元素,并设置它们在页面中显示的内容,如下图所示:
在浏览器中显示的效果:
可以看出,调用$("p~span")
选择器代码,获取了<p>元素下面两个(全部)的<span>元素,该元素不包含<p>元素上面的元素和不属于同辈范围的元素。
:first过滤选择器
:eq(index)过滤选择器
:contains(text)过滤选择器
与上一节介绍的:eq(index)选择器按索引查找元素相比,有时候我们可能希望按照文本内容来查找一个或多个元素,那么使用:contains(text)
选择器会更加方便, 它的功能是选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象。其中参数text
表示页面中的文字。
例如:
在浏览器中显示的效果:
从图中可以看出,调用li:contains('土豪')
代码,可以很方便地获取<li>中包含‘土豪’字符内容的全部元素,并且只要与选择的元素中或子元素中包含该字符内容,就可以被选中。
注意:li:contains('土豪')
土豪为什么必须加单引号呢?因为它是一个字符串,而不是一个变量,所以不加单或双引号的话是会报错的。
:has(selector)过滤选择器
:hidden过滤选择器
:visible过滤选择器
[attribute=value]属性选择器
属性作为DOM元素的一个重要特征,也可以用于选择器中,从本节开始将介绍通过元素属性获取元素的选择器,[attribute=value]
属性选择器的功能是获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
例如,使用[attribute=value]
属性选择器,获取指定属性名和对应值的全部<li>元素,并设置它们显示的文字颜色,如图所示:
在浏览器中显示的效果:
从图中可以看出,使用$("li[title='我最爱']")
属性选择器代码,获取了2个<li>元素,并调用css()方法设置它们在页面中显示的文字颜色,另外,属性值中的‘’单引号可以不写,由于属性名与属性值是等号,因此,它们之间不是包含关系,而是完全相同。
[attribute!=value]属性选择器
与上一节介绍的[attribute=value]
属性选择器正好相反,[attribute!=value]
属性选择器的功能是获取不包含属性名,或者与属性名和属性值不相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
例如,使用[attribute!=value]
属性选择器,获取指定不包含属性名,或与属性名和对应值不同的全部<li>元素,并设置它们显示的文字颜色,如图所示:
在浏览器中显示的效果:
可以看出,使用$("li[title!='我最爱']")
属性选择器代码,获取了3个<li>元素,其中一个是不包含title属性名,另外两个的title属性值不等于“我最爱”,获取元素后并调用css()
方法设置这些元素在页面中显示的文字颜色。
[attribute*=value]属性选择器
介绍一个功能更为强大的属性选择器[attribute*=value]
,它可以获取属性值中包含指定内容的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示对应的属性值。
例如,使用[attribute*=value]
属性选择器,获取属性值中包含某一指定内容的全部<li>元素,并设置它们显示的文字颜色,如下图所示:
在浏览器中显示的效果:
从图中可以看出,使用$("li[title*='最']")
属性选择器代码,获取了3个<li>元素,这些元素的title属性值中都包含了“最”字符,获取这些元素后并调用css()
方法设置这些元素在页面中显示的文字颜色。
:first-child子元素过滤选择器
:last-child子元素过滤选择器
:input表单选择器
如何获取表单全部元素?:input
表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素,因此,它选择的表单元素是最广的。
如下图所示,使用:input
表单选择器获取表单元素,并向这些元素增加一个CSS样式类别,修改它们在页面中显示的边框颜色。
在浏览器中显示的效果:
可以看出,通过调用$("#frmTest :input")表单选择器代码获取了表单中的全部元素,并使用addClass()方法修改它们在页面中显示的边框颜色。addClass()方法的功能是为元素添加指定的样式类别名称,它的更多使用将会在后续章节中进行详细介绍。
:text表单文本选择器
:text
表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。
例如,在表单中添加多个元素,使用:text
选择器获取单行的文本输入框元素,并修改字的边框颜色,如下图所示:
在浏览器中显示的效果:
从图中可以看出,通过:text
表单选择器只获取单行的文本输入框元素,对于<textarea>区域文本、按钮元素无效。
:password表单密码选择器
如果想要获取密码输入文本框,可以使用:password
选择器,它的功能是获取表单中全部的密码输入文本框元素。
例如,在表单中添加多个输入框元素,使用:password
获取密码输入文本框元素,并修改它的边框颜色,如下图所示:
在浏览器中显示的效果:
从图中可以看出,在多个文本输入框中,使用:password选择器只能获取表单中的密码输入文本框,并使用addClass()方法改变它的边框颜色。
:radio单选按钮选择器
表单中的单选按钮常用于多项数据中仅选择其一,而使用:radio
选择器可轻松获取表单中的全部单选按钮元素。
例如,在表单中添加多种类型的表单元素,使用:radio
选择器获取并隐藏这些元素中的全部单选按钮元素,如下图所示:
hide()
方法的功能是隐藏指定的元素。
在浏览器中显示的效果:
:checkbox复选框选择器
:submit提交按钮选择器
:image图像域选择器
:button表单按钮选择器
:checked选中状态选择器
:selected选中状态选择器
使用attr()方法控制元素的属性
操作元素的内容
操作元素的样式
移除属性和样式
使用append()方法向元素内追加内容
使用appendTo()方法向被选元素内插入内容
使用before()和after()在元素前后插入内容
使用clone()方法复制元素
替换内容
replaceWith()
和replaceAll()
方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:
$(selector).replaceWith(content)
和$(content).replaceAll(selector)
参数selector为被替换的元素,content为替换的内容。
例如,调用replaceWith()
方法将页面中<span>元素替换成一段HTML字符串,如下图所示:
在浏览器中显示的效果:
从图中可以看出,使用replaceWith()
方法替换类别名为“green”的<span>元素,替换之后,旧元素完全由新替换的元素所取代。
使用wrap()和wrapInner()方法包裹元素和内容
使用each()方法遍历元素
使用remove()和empty()方法删除元素
页面加载时触发ready()事件
使用bind()方法绑定元素的事件
使用hover()方法切换事件
使用toggle()方法绑定多个函数
toggle()
方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,绑定多个函数的调用格式如下:
$(selector).toggle(fun1(),fun2(),funN(),...)
其中,fun1,fun2就是多个函数的名称
例如,使用toggle()
方法,当每次点击<div>元素时,显示不同内容,如下图所示:
在浏览器中显示的效果:
从图中可以看出,每次点击<div>元素时,都依次执行toggle()
方法绑定的函数,当执行到最后一个函数时,再次点击将又返回执行第一个函数。
注意:toggle()方法支持目前主流稳定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。
使用unbind()方法移除元素绑定的事件
使用one()方法绑定元素的一次性事件
调用trigger()方法手动触发指定的事件
文本框的focus和blur事件
下拉列表框的change事件
调用live()方法绑定元素的事件
与bind()
方法相同,live()
方法与可以绑定元素的可执行事件,除此相同功能之外,live()
方法还可以绑定动态元素,即使用代码添加的元素事件,格式如下:
$(selector).live(event,[data],fun)
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
例如,使用live()
方法绑定,页面中按钮元素的单击事件,而这个按钮是通过追加的方式添加至页面的。如下图所示:
在浏览器中显示的效果:
从图中可以看出,虽然按钮元素是在事件绑定声明之后,并且是通过追加的方式添加至页面的,但由于使用的是live()
方法绑定元素的事件,因此,仍然生效。
注意:从 jQuery 1.7 开始,不再建议使用 .live() 方法。1.9不支持.live(),本节代码编辑器里的js引用版本改为了1.8。
调用show()和hide()方法显示和隐藏元素
动画效果的show()和hide()方法
调用toggle()方法实现动画切换效果
第一节我们学过实现元素的显示与隐藏需要使用hide()
与show()
,那么有没有更简便的方法来实现同样的动画效果呢?
调用toggle()
方法就可以很容易做到,即如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素,它的调用格式是:
$(selector).toggle(speed,[callback])
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
例如,调用toggle()
方法以动画的效果显示和隐藏图片元素,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当按钮显示内容为“隐藏”时,点击该按钮,将调用toggle()
方法以动画的方式隐藏图片元素,隐藏成功后,按钮显示的内容变为“显示”。
使用slideUp()和slideDown()方法的滑动效果
可以使用slideUp()
和slideDown()
方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素,它们的调用方法分别为:
$(selector).slideUp(speed,[callback])
和$(selector).slideDown(speed,[callback])
其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。
要注意的是:slideDown()
仅适用于被隐藏的元素;slideup()
则相反。
例如,调用slideUp()
和slideDown()
方法实现页面中元素的向上和向下的滑动效果,如下图所示:
在浏览器中显示的效果:
从图中可以看出,根据按钮中显示的内容,分别调用slideUp()
和slideDown()
方法,实现图片元素向上和向下的滑动效果,当每个滑动效果完成时,再通过回调函数改变按钮中显示内容。
滑动与淡入淡出的区别:滑动改变元素的高度,淡入淡出改变元素的透明度。
使用slideToggle()方法实现图片“变脸”效果
使用slideToggle()
方法可以切换slideUp()
和slideDown()
,即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为:
$(selector).slideToggle(speed,[callback])
其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
例如,在页面中,使用slideToggle()
方法实现图片“变脸”效果,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击第一张图片时,向上滑动收起该图片,当收起完成时,触发回调函数,调用第二张图片的slideToggle()
方法,向下滑动显示第二张图片。
使用fadeIn()与fadeOut()方法实现淡入淡出效果
fadeIn()
和fadeOut()
方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,它们的调用格式分别为:
$(selector).fadeIn(speed,[callback])
和$(selector).fadeOut(speed,[callback])
其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。
例如,分别在页面中以淡入淡出的动画效果显示图片元素,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“淡出”按钮时,调用fadeOut()
方法以淡出效果隐藏图片,当点击“淡入”按钮时,调用fadeIn()
方法以淡入效果显示图片。
使用fadeTo()方法设置淡入淡出效果的不透明度
调用fadeTo()
方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的调用格式为:
$(selector).fadeTo(speed,opacity,[callback])
其中speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名。
例如,分别调用fadeTo()
方法,设置三个图片元素的不透明度值,如下图所示:
在浏览器中显示的效果:
从图中可以看出,调用fadeTo()
方法,分别改变“opacity”参数的值,以淡入淡出的动画效果设置图片元素的不透明度。
调用animate()方法制作简单的动画效果
调用animate()
方法可以创建自定义动画效果,它的调用格式为:
$(selector).animate({params},speed,[callback])
其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。
例如,调用animate()
方法以由小到大的动画效果显示图片,如下图所示:
在浏览器中显示的效果:
从图中可以看出,调用animate()
方法,以渐渐放大的动画效果显示图片元素,当动画执行完成后,通过回调函数在页面的<div>元素中显示“执行完成!”的字样。
调用animate()方法制作移动位置的动画
调用stop()方法停止当前所有动画效果
stop()
方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为:
$(selector).stop([clearQueue],[goToEnd])
其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
例如,在页面中,当图片元素正在执行动画效果时,点击“停止”按钮,中止正在执行的动画效果,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当页面中的图片正在执行动画效果向右移动时,由于点击了“停止”按钮,执行了图片元素的stop方法,因此,中止了正在执行的动画效果。
调用delay()方法延时执行动画效果
使用load()方法异步请求数据
使用load()
方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:
load(url,[data],[callback])
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
例如,点击“加载”按钮时,向服务器请求加载一个指定页面的内容,加载成功后,将数据内容显示在<div>元素中,并将加载按钮变为不可用。如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“加载”按钮时,通过调用load()
方法向服务器请求加载fruit.html文件中的内容,当加载成功后,先显示数据,并将按钮变为不可用。
使用getJSON()方法异步加载JSON格式数据
使用getJSON()
方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为:
jQuery.getJSON(url,[data],[callback])
或$.getJSON(url,[data],[callback])
其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
例如,点击页面中的“加载”按钮,调用getJSON()
方法获取服务器中JSON格式文件中的数据,并遍历数据,将指定的字段名内容显示在页面中。如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“加载”按钮时,通过getJSON()
方法调用服务器中的sport.json文件,获取返回的data文件数据,并遍历该数据对象,以data[“name”]
取出数据中指定的内容,显示在页面中。
使用getScript()方法异步加载并执行js文件
使用getScript()
方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:
jQuery.getScript(url,[callback])
或$.getScript(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
例如,点击“加载”按钮,调用getScript()
加载并执行服务器中指定名称的JavaScript格式的文件,并在页面中显示加载后的数据内容,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“加载”按钮调用getScript()
方法加载服务器中的JavaScript格式文件后,自动执行文件代码,将数据内容显示在<ul>元素中。
使用get()方法以GET方式从服务器获取数据
使用post()方法以POST方式从服务器发送数据
与get()
方法相比,post()
方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:
$.post(url,[data],[callback])
参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。
例如,在输入框中录入一个数字,点击“检测”按钮,调用post()
方法向服务器以POST方式发送请求,检测输入值的奇偶性,并显示在页面中,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“检测”按钮时,获取输入框中的值,并将该值使用$.post()
方法一起发送给服务器,服务器接收该值后并进行处理,最后返回处理结果。
使用serialize()方法序列化表单元素值
使用serialize()
方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:
$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
例如,在表单中添加多个元素,点击“序列化”按钮后,调用serialize()
方法,将表单元素序列化后的标准URL编码文本字符串显示在页面中,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“序列化”按钮后,调用表单元素本身的serialize()
方法,将表单中元素全部序列化,生成标准URL编码,各元素间通过&号相联。
使用ajax()方法加载服务器数据
使用ajax()
方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:
jQuery.ajax([settings])
或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。
例如,点击页面中的“加载”按钮,调用ajax()
方法向服务器请求加载一个txt文件,并将返回的文件中的内容显示在页面,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“加载”按钮时,调用$.ajax()
方法请求服务器中txt文件,当请求成功时调用success回调函数,获取传回的数据,并显示在页面中。
使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxSetup()
方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:
jQuery.ajaxSetup([options])
或$.ajaxSetup([options])
可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。
例如,先调用ajaxSetup()
方法设置全局的Ajax选项值,再点击两个按钮,分别使用ajax()
方法请求不同的服务器数据,并将数据内容显示在页面,如下图所示:
在浏览器中显示的效果:
从图中可以看出,使用ajaxSetup()
方法设置了Ajax请求时的一些全局性的配置选项后,在两次调用ajax请求服务器txt文件时,只需要设置url地址即可。
使用ajaxStart()和ajaxStop()方法
ajaxStart()
和ajaxStop()
方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:
$(selector).ajaxStart(function())
和$(selector).ajaxStop(function())
其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()
方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。
例如,在调用ajax()
方法请求服务器数据前,使用动画显示正在加载中,当请求成功后,该动画自动隐藏,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于使用ajaxStart()
和ajaxStop()
方法绑定了动画元素,因此,在开始发送Ajax请求时,元素显示,请求完成时,动画元素自动隐藏。
注意:该方法在1.8.2下使用是正常的
表单验证插件——validate
该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:
$(form).validate({options})
其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。
例如,当点击表单中的“提交”按钮时,调用validate插件验证用户名输入是否符合规则,并将异常信息显示在页面中,如下图所示:
在浏览器中显示的效果:
从图中可以看出,在页面中导入了validate插件,当用户在输入框中录入用户名时,自动根据规则进入验证,并显示提示信息,验证成功后,表单才能提交。
表单插件——form
通过表单form插件,调用ajaxForm()
方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:
$(form). ajaxForm ({options})
其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。
例如,在页面中点击“提交”按钮,调用form插件的
ajaxForm()
方法向服务器发送录入的用户名和密码数据,服务器接收后返回并显示在页面中,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“提交”按钮时,调用form表单插件中的ajaxForm()方法向指定的服务器以ajax方式发送数据,服务器接收后返回并将数据。
图片灯箱插件——lightBox
图片放大镜插件——jqzoom
在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()
方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:
$(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
例如,在页面中,添加一个被<a>元素包含的图片元素,当在图片元素中移动鼠标时,在图片的右边,将显示放大后的所选区域效果,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当在小图片中移动鼠标时,将调用放大镜插件的jqzoom()
方法,在图片的右侧显示与小图片所选区域相同的放大区域,实现放大镜的效果。
cookie插件——cookie
使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:
保存:$.cookie(key,value)
;读取:$.cookie(key)
,删除:$.cookie(key,null)
其中参数key为保存cookie对象的名称,value为名称对应的cookie值。
例如,当点击“设置”按钮时,如果是“否保存用户名”的复选框为选中状态时,则使用cookie对象保存用户名,否则,删除保存的cookie用户名,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于在点击“设置”按钮时,选择了保存用户名,因此,输入框中的值被cookie保存,下次打开浏览器时,直接获取并显示保存的cookie值。
搜索插件——autocomplete
搜索插件的功能是通过插件的autocomplete()
方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:
$(textbox).autocomplete(urlData,[options]);
其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。
例如,当用户在文本框输入内容时,调用搜索插件的autocomplete()
方法返回与输入内容相匹配的字符串数据,显示在文本框下,提示选择,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当文本框与搜索插件相绑定后,输入任意字符时,都将返回与之相匹配的字符串,提示用户选择,文本框在空白双击时,显示全部提示信息。
右键菜单插件——contextmenu
右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:
$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
例如,选中页面<textarea>元素,点击右键,弹出插件绑定的快捷菜单,点击菜单中的各个选项,便在页面中显示操作的对应名称。如下图所示:
在浏览器中显示的效果:
从图中可以看出,当文本框与右键菜单通过插件contextmenu()
方法绑定后,选中文本框,点击右键时,弹出快捷菜单,点击“新建”选项时,显示操作对应内容。
自定义对象级插件——lifocuscolor插件
自定义类级别插件—— twoaddresult
通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:
$.addNum(p1,p2)
和 $.subNum(p1,p2)
上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。
例如,在页面的两个文本框中输入任意数值,点击“计算”按钮调用自定义插件中$.addNum()
方法,计算两数值的和并将结果显示在另一文本框中,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“计算”按钮时,调用了自定义插件中的$.addNum()
方法计算两个文本框中输入数值的和,并将该值显示在另一文本框中。
拖曳插件——draggable
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()
方法,实现各种拖曳元素的效果,调用格式如下:
$(selector). draggable({options})
options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。
例如,在页面中的<div>元素中添加两个子类<div>,通过与拖曳插件绑定,这两个子类<div>元素只能在外层的父<div>元素中任意拖曳,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于使用jQuery UI插件draggable绑定了两个子类<div>元素,并将配置对象的“containment”属性值设为“parent”,因此,这两个子类<div>元素只能在外层的父框中实现任意拖曳。
放置插件——droppable
除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:
$(selector).droppable({options})
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
例如,在页面中,通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中,同时改变“购物车”的背景色和数量值,如下图所示:
在浏览器中显示的效果:
从图中可以看出,先调用draggable插件任意拖曳“产品区”的元素,然后,调用droppable插件绑定“购物车”中接收元素,当“产品区”元素完全拖曳至“购物车”时,触发定义的drop函数,改变“购物车”中背景色和总数量值。
拖曳排序插件——sortable
面板折叠插件——accordion
选项卡插件——tabs
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:
$(selector).tabs({options});
selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()
方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。
例如,在页面中,添加选项卡的标题和内容元素,并绑定tabs插件,当点击标题时,以选项卡的方式切内容,如下图所示:
在浏览器中显示的效果:
从图中可以看出,在tabs()
方法的配置对象中,通过“fx”属性设置了选项卡切换时的效果,“event”属性设置鼠标也可以切换选项卡,因此,当鼠标在移动至两个选项卡标题时,对应内容以动画的效果自动切换。
对话框插件——dialog
对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()
和confirm()
函数的功能,它的调用格式为:
$(selector).dialog({options});
selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
例如,当点击“提交”按钮时,如果文本框中的内容为空,则通过dialog插件弹出提示框,提示输入内容不能为空,如下图所示:
在浏览器中显示的效果:
从图中可以看出,当文本框的内容为空时,调用自定义的sys_Alert函数,在该函数中再调用dialog插件的dialog()
方法,弹出带模式的显示信息对话框。
菜单工具插件——menu
菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:
$(selector).menu({options});
selector参数为菜单列表中最外层<ul>元素,options为menu()
方法的配置对象。
例如,在页面中,通过<ul>元素内联的方式构建一个三层结构的导航菜单,并将最外层<ul>元素通过menu()
方法绑定插件,实现导航菜单的功能,如下图所示:
在浏览器中显示的效果:
从图中可以看出,通过<ul>内嵌的方式,构建一个三层结构的导航菜单,将<li>元素的class属性值设为“ui-state-disabled”,可将菜单选项置为不可用状态。
微调按钮插件——spinner
微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:
$(selector).spinner({options});
selector参数为文本输入框元素,可选项options参数为spinner()
方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。
例如,将页面中的三个输入文本框都与微调插件相绑定,当改变三个文本框值时,对应的<div>元素的背景色也将随之发生变化,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于三个文本框输入元素都绑定微调插件,因此,无论是点击右侧的上下按钮,还是直接在文本框中输入值,都可以改变<div>元素的背景色。
工具提示插件——tooltip
工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:
$(selector).tooltip({options});
其中selector为需要显示提示信息的元素,可选项参数options为tooltip()
方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。
例如,将三个<a>元素与工具提示插件相绑定,当把鼠标移动在<a>元素内容时,以动画效果弹出对应的提示图片,移出时,图片自动隐藏,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于各个<a>元素都绑定了工具提示插件,因此,将在指定的位置并以动画效果展示各个<a>元素中title属性所对应的内容。
获取浏览器的名称与版本信息
检测浏览器是否属于W3C盒子模型
浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含,而在jQuery 中,可以通过$.support.boxModel
对象返回的值,检测浏览器是否属于标准的w3c盒子模型。
例如,根据页面的特征,并通过$.support.boxModel
属性的返回值,显示当前浏览器是否属于标准的w3c盒子模型,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于打开的页面属于标准的w3c盒子模型,因此,在调用$.support.boxModel
属性时,返回true值。
检测对象是否为空
检测对象是否为原始对象
调用名为$.isPlainObject
的工具函数,能检测对象是否为通过{}
或new Object()
关键字创建的原始对象,如果是,返回true,否则,返回false值,调用格式为:
$.isPlainObject (obj);
其中,参数obj表示需要检测的对象名称。
例如,通过$.isPlainObject()
函数,检测某个指定的对象是否为原始,并将结果显示在页面中,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于自定义的obj_a和obj_b都是属于原始对象,因此,当调用$.isPlainObject()
函数检测这两个对象时,都返回true值。
检测两个节点的包含关系
调用名为$.contains
的工具函数,能检测在一个DOM节点中是否包含另外一个DOM节点,如果包含,返回true,否则,返回false值,调用格式为:
$.contains (container, contained);
参数container表示一个DOM对象节点元素,用于包含其他节点的容器,contained是另一个DOM对象节点元素,用于被其他容器所包含。
例如,通过$.contains()
函数,检测两个节点对象间是否存在包含关系,并将检测的结果显示在页面中,如下图所示:
在浏览器中显示的效果:
从图中可以看出,documentElement
是DOM根结点,而body只是根结点下的子节点之一,它们之间存在包含关系,因此,返回true值,并显示“包含”字样。
字符串操作函数
URL操作函数
调用名为$. param
的工具函数,能使对象或数组按照key/value
格式进行序列化编码,该编码后的值常用于向服务端发送URL请求,调用格式为:
$. param (obj);
参数obj表示需要进行序列化的对象,该对象也可以是一个数组,整个函数返回一个经过序列化编码后的字符串。
例如,通过$.param()
函数,对指定的对象进行序列化编码,使其成为可执行传值的URL地址,并将该地址显示在页面中,如下图所示:
在浏览器中显示的效果:
从图中可以看出,通过调用工具函数$.param()
可以将一个对象进行序列化并编码成可以在地址栏中直接执行的URL字符串。
param和serialize的区别是什么?前者是对任意的参数进行URL地址格式的转换,而后者仅属于form提交的数据转换。
使用$.extend()扩展工具函数
使用$.extend()扩展Object对象