jQuery 工具类函数

获取浏览器的名称与版本信息

在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browser.mozilla为true,表示当前为火狐浏览器,还可以通过$.browser.version方式获取浏览器版本信息。

例如,调用$.browser对象,获取浏览器名称并显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过调用$.browser对象,检测当前浏览器的所属类型,并根据类型不同,将浏览器名称保存至变量中,最后将变量的内容显示在页面中。

检测浏览器是否属于W3C盒子模型

浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含,而在jQuery 中,可以通过$.support.boxModel对象返回的值,检测浏览器是否属于标准的w3c盒子模型。

例如,根据页面的特征,并通过$.support.boxModel属性的返回值,显示当前浏览器是否属于标准的w3c盒子模型,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于打开的页面属于标准的w3c盒子模型,因此,在调用$.support.boxModel属性时,返回true值。

检测对象是否为空

在jQuery中,可以调用名为$.isEmptyObject的工具函数,检测一个对象的内容是否为空,如果为空,则该函数返回true,否则,返回false值,调用格式如下:

$.isEmptyObject(obj);

其中,参数obj表示需要检测的对象名称。

例如,通过$.isEmptyObject()函数,检测某个指定的对象是否为空,并将结果显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于对象obj的内容为空,因此,$.isEmptyObject()函数检测obj时,返回true,并根据返回的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值,并显示“包含”字样。

字符串操作函数

调用名为$.trim的工具函数,能删除字符串中左右两边的空格符,但该函数不能删除字符串中间的空格,调用格式为:

$.trim (str);

参数str表示需要删除左右两边空格符的字符串。

例如,通过$.trim()函数,除掉一个两边均有空格符的字符串,并将其执行前后的字符长度都显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于文本框中的字符串前后分别有一个空格字符,因此,它的字符长度为13,调用trim()函数删除字符串前后空格之后,字符串长度则变为11。

URL操作函数

调用名为$.param的工具函数,能使对象或数组按照key/value格式进行序列化编码,该编码后的值常用于向服务端发送URL请求,调用格式为:

$.param (obj);

参数obj表示需要进行序列化的对象,该对象也可以是一个数组,整个函数返回一个经过序列化编码后的字符串。

例如,通过$.param()函数,对指定的对象进行序列化编码,使其成为可执行传值的URL地址,并将该地址显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过调用工具函数$.param()可以将一个对象进行序列化并编码成可以在地址栏中直接执行的URL字符串。

param和serialize的区别是什么?前者是对任意的参数进行URL地址格式的转换,而后者仅属于form提交的数据转换。

使用$.extend()扩展工具函数

调用名为$.extend的工具函数,可以对原有的工具函数进行扩展,自定义类级别的jQuery插件,调用格式为:

$.extend ({options});

参数options表示自定义插件的函数内容。

例如,调用$.extend()函数,自定义一个用于返回两个数中最大值的插件,并在页面中将插件返回的最大值显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“计算”按钮时,先调用自定义插件中名为“MaxNum”的方法,计算并返回两个数值中的最大值,然后,将该值显示在页面中。

使用$.extend()扩展Object对象

除使用$.extend扩展工具函数外,还可以扩展原有的Object对象,在扩展对象时,两个对象将进行合并,当存在相同属性名时,后者将覆盖前者,调用格式为:

$. extend (obj1,obj2,…objN);

参数obj1至objN表示需要合并的各个原有对象。

例如,调用$.extend()函数对两个已有的对象进行合并,并将合并后的新对象元素内容显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当两个对象通过$.extend()函数扩展合并后,返回一个包含两个对象中全部属性元素的新对象,相同名称的“name”属性,前者被后者覆盖。

jQuery UI插件

拖曳插件——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

拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:

$(selector).sortable({options});

selector参数为进行拖曳排序的元素,options为调用方法时的配置对象,

例如,在页面中,通过加载sortable插件将<ul>元素中的各个<li>表项实现拖曳排序的功能,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用sortable插件绑定了<ul>元素,并设置了拖曳时的透明度,因此,<ul>中的各个<li>元素则能指定的透明度进行任意的拖曳排序。

面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:

$(selector).accordion({options});

其中,参数selector为整个面板元素,options参数为方法对应的配置对象。

例如,通过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属性所对应的内容。

jQuery常用插件

表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:

$(form).validate({options})

其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

例如,当点击表单中的“提交”按钮时,调用validate插件验证用户名输入是否符合规则,并将异常信息显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,在页面中导入了validate插件,当用户在输入框中录入用户名时,自动根据规则进入验证,并显示提示信息,验证成功后,表单才能提交。

表单插件——form

通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:

$(form). ajaxForm ({options})

其中form参数表示表单元素名称,options参数表示调用方法是的配置对象。

例如,在页面中点击“提交”按钮,调用form插件的ajaxForm()方法向服务器发送录入的用户名和密码数据,服务器接收后返回并显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“提交”按钮时,调用form表单插件中的ajaxForm()方法向指定的服务器以ajax方式发送数据,服务器接收后返回并将数据显示。

图片灯箱插件——notesforlightbox

该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,以列表的方式在页面中展示全部的图片,当用户单击其中某张图片时,通过引入的图片插件,采用“灯箱”的方式显示所选的图片,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当用户点击“我的相册”中某一张图片时,则采用“灯箱”的方式显示选中图片,在显示图片时,还可以切换上下张和自动播放及关闭图片。

图片放大镜插件——jqzoom

在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,在页面中,添加一个被<a>元素包含的图片元素,当在图片元素中移动鼠标时,在图片的右边,将显示放大后的所选区域效果,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当在小图片中移动鼠标时,将调用放大镜插件的jqzoom()方法,在图片的右侧显示与小图片所选区域相同的放大区域,实现放大镜的效果。

cookie插件——cookie

使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:

保存:$.cookie(keyvalue);读取:$.cookie(key),删除:$.cookie(keynull)

其中参数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插件

自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色,调用格式为:

$(Id).focusColor(color)

其中,参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。

例如,在页面中,调用自定义的lifocuscolor插件,自定义<li>元素选中时的背景色,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当<ul>元素调用focusColor()方法绑定自定义的插件之后,当鼠标在<li>元素间移动时,显示自定义的背景色。

自定义类级别插件—— twoaddresult

通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:

$.addNum(p1,p2) $.subNum(p1,p2)

上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。

例如,在页面的两个文本框中输入任意数值,点击“计算”按钮调用自定义插件中$.addNum()方法,计算两数值的和并将结果显示在另一文本框中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当点击“计算”按钮时,调用了自定义插件中的$.addNum()方法计算两个文本框中输入数值的和,并将该值显示在另一文本框中。

jQuery实现Ajax

使用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方式从服务器获取数据

使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:

$.get(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

例如,当点击“加载”按钮时,调用get()方法向服务器中的一个.php文件以GET方式请求数据,并将返回的数据内容显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过$.get()方法向服务器成功请求数据后,在回调函数中通过data参数传回请求的数据,并以data.name格式访问数据中各项的内容。

使用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事件的方法,当Ajax请求发出前触发ajaxStart()方法,请求完成后触发ajaxStop ()方法,它们的调用格式为:

$(selector).ajaxStart(function())$(selector).ajaxStop(function())

其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。

例如,在调用ajax()方法请求服务器数据前,使用动画显示正在加载中,当请求成功后,该动画自动隐藏,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于使用ajaxStart()ajaxStop()方法绑定了动画元素,因此,在开始发送Ajax请求时,元素显示,请求完成时,动画元素自动隐藏。

jQuery动画特效教程

调用show()和hide()方法显示和隐藏元素

show()hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:

$(selector).hide(speed,[callback])$(selector).show(speed,[callback])

参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

例如,在页面中,通过点击“显示”和“隐藏”两个按钮来控制图片元素的显示或隐藏状态,如下图所示:

在浏览器中显示的效果:

从图中可以看出,点击“显示”按钮时,可以将图片元素显示在页面中,点击“隐藏”按钮时,则将图片元素隐藏起来。

 

动画效果的show()和hide()方法

在上一小节中,调用show()hide()方法仅是实现的元素的显示和隐藏功能,如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏,同时,如果添加了方法的回调函数,它将在显示或隐藏执行成功后被调用。

例如,以动画的方式显示或隐藏页面中的图片,同时,当显示或隐藏完成时,对应的按钮状态将变为不可用,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当以动画方式显示或隐藏图片时,图片在显示或隐藏过程中,则以动画效果按“speed”参数设置数字执行,完成后,调用回调函数中的代码。

 

调用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()方法制作移动位置的动画

调用animate()方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。

例如,调用animate()方法先将图片向右移动90px,然后,再将图片宽度与高度分别增加30px,如下图所示:

在浏览器中显示的效果:

从图中可以看出,图片先向右移动了“90px”,然后,移动成功后,再在原来的基础之上以动画的效果增大30px,增加成功后,显示“执行完成!”的字样。

调用stop()方法停止当前所有动画效果

stop()方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为:

$(selector).stop([clearQueue],[goToEnd])

其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。

例如,在页面中,当图片元素正在执行动画效果时,点击“停止”按钮,中止正在执行的动画效果,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当页面中的图片正在执行动画效果向右移动时,由于点击了“停止”按钮,执行了图片元素的stop方法,因此,中止了正在执行的动画效果。

调用delay()方法延时执行动画效果

delay()方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为:

$(selector).delay(duration)

其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。

例如,当页面中图片动画正在执行时,点击“延时”按钮调用delay()方法推迟2000毫秒后继续执行,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当图片动画正在执行时,点击“延时”按钮,调用delay()方法中止当前正在执行的图片动画效果,当超过设置的延时值时,动画效果继续执行。

jQuery选择器详解

基础选择器

#id 选择器(使用身份证号来找人)

jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:

$("#my_id")

其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素。

例如:

在浏览器中显示的效果:

从图中可以看出,通过#id选择器的方式获取元素,并在元素中调用html()方法为id=”divtest”的<div>元素设置了文字显示在页面中。

此外,html()方法的功能是设置或获取元素中显示的内容,针对该方法我们在后面的章节中会有详细介绍。

element 选择器(寻找铅笔)

在文具盒中,有铅笔、钢笔和水彩笔,类似于页面中的<div>、<span>各个元素,虽然同属于一个容器,但有各自的功能,jQuery中可以根据元素名查找元素,格式如下:

$(“element”)

其中element就是元素的名称,也就是工具盒中的笔的名称,找到水彩笔,我们就可画画了,通过元素名找到元素就可以对它进行操作了。

如下图所示:在页面中,根据元素名找到了一个元素,并将它显示的字体加粗。

在浏览器中显示的效果:

从上面图中可以看出,根据元素的名称可以查找到该元素,并调用css()方法将设置该元素内容中文字显示的样式。

此外,css()方法的功能是设置或获取元素的某项样式属性,它的更多功能我们将在后续的章节中有详细的介绍。

.class 选择器(寻找红色铅笔)

我们在上一小节介绍了通过使用元素名称查询元素的方法,其实,还可以通过元素的类别属性查找元素,就好比在文具盒中要找一个“红色”铅笔一样,根据元素的某个特征进行查找,它的调用格式如下:

$(“.class”)

其中.class参数表示元素的CSS类别(类选择器)名称。

例如,在页面中,通过class选择器获取某个元素,并显示该元素的class类别名称,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过class选择器的方式获取元素,并调用元素的attr()方法获取元素的类别名称,并将名称显示在页面中。

* 选择器(取走全部铅笔)

有一个非常“牛”的选择器,“*”号选择器,它的功能是获取页面中的全部元素,“全部”啊!包括<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参数任何有效的选择器,desc参数是寻找元素的选择器,类似于寻找一个家族下的全部子或孙辈,ance参数为家族名称,desc参数为子或孙辈名称。

例如,使用层次选择器,获取<div>元素中的全部<span>元素,并设置它们显示的内容,在如下图所示:

在浏览器中显示的效果:

从图中可以看出,使用层次选择器$("div span")获取了在<div>元素中的两个元素,一个是<p>元素中的子元素,另一个是<p>元素外的同级元素,但它们都是在一个<div>元素下,也就是说在一个“家族”下。

parent > child选择器

与上一节介绍的ance desc选择器相比,parent > child选择器的范围要小些,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式如下:

$(“parent > child”)

child参数获取的元素都是parent选择器的子元素,它们之间通过“>”符号来表示一种层次关系。

如图所示:

在浏览器中显示的效果:

从图中可以看出,使用$("div>span")选择器代码,获取的是<div>“家庭中”全部“子辈”<span>元素,不包括“孙辈”<span>元素和“家庭外”的<span>元素。

prev + next选择器

俗话说“远亲不如近邻”,而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素,格式如下:

$(“prev + next”)

其中参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。

例如,使用prev + next选择器,获取<p>元素最近邻的下一个元素,如下图所示:

在浏览器中显示的效果:

prev ~ siblings选择器

与上一节中介绍的prev + next层次选择器相同,prev ~ siblings选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下:

$(“prev ~ siblings”)

其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。

例如,使用prev ~ next选择器,获取<p>元素后面相邻的全部元素,并设置它们在页面中显示的内容,如下图所示:

在浏览器中显示的效果:

可以看出,调用$("p~span")选择器代码,获取了<p>元素下面两个(全部)的<span>元素,该元素不包含<p>元素上面的元素和不属于同辈范围的元素。

 

jQuery选择器

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

$(“#myELement”) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$(“div”) 选择所有的div标签元素,返回div元素数组
$(“.myClass”) 选择使用myClass类的css的所有元素
$(“*”) 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$(“#myELement,div,.myclass”)

层叠选择器:
$(“form input”) 选择所有的form元素中的input元素
$(“#main > *”) 选择id值为main的所有的子元素
$(“label + input”) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$(“#prev ~ div”) 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器:
$(“tr:first”) 选择所有tr元素的第一个
$(“tr:last”) 选择所有tr元素的最后一个
$(“input:not(:checked) + span”)

过滤掉:checked的选择器的所有的input元素

$(“tr:even”) 选择所有的tr元素的第0,2,4… …个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)

$(“tr:odd”) 选择所有的tr元素的第1,3,5… …个元素
$(“td:eq(2)”) 选择所有的td元素中序号为2的那个td元素
$(“td:gt(4)”) 选择td元素中序号大于4的所有td元素
$(“td:ll(4)”) 选择td元素中序号小于4的所有的td元素
$(“:header”)
$(“div:animated”)
内容过滤选择器:

$(“div:contains(‘John’)”) 选择所有div中含有John文本的元素
$(“td:empty”) 选择所有的为空(也不包括文本节点)的td元素的数组
$(“div:has(p)”) 选择所有含有p标签的div元素
$(“td:parent”) 选择所有的以td为父节点的元素数组
可视化过滤选择器:

$(“div:hidden”) 选择所有的被hidden的div元素
$(“div:visible”) 选择所有的可视化的div元素
属性过滤选择器:

$(“div[id]”) 选择所有含有id属性的div元素
$(“input[name=’newsletter’]”) 选择所有的name属性等于’newsletter’的input元素

$(“input[name!=’newsletter’]”) 选择所有的name属性不等于’newsletter’的input元素

$(“input[name^=’news’]”) 选择所有的name属性以’news’开头的input元素
$(“input[name$=’news’]”) 选择所有的name属性以’news’结尾的input元素
$(“input[name*=’man’]”) 选择所有的name属性包含’news’的input元素

$(“input[id][name$=’man’]”) 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器:

$(“ul li:nth-child(2)”),$(“ul li:nth-child(odd)”),$(“ul li:nth-child(3n + 1)”)

$(“div span:first-child”) 返回所有的div元素的第一个子节点的数组
$(“div span:last-child”) 返回所有的div元素的最后一个节点的数组
$(“div button:only-child”) 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器:

$(“:input”) 选择所有的表单输入元素,包括input, textarea, select 和 button

$(“:text”) 选择所有的text input元素
$(“:password”) 选择所有的password input元素
$(“:radio”) 选择所有的radio input元素
$(“:checkbox”) 选择所有的checkbox input元素
$(“:submit”) 选择所有的submit input元素
$(“:image”) 选择所有的image input元素
$(“:reset”) 选择所有的reset input元素
$(“:button”) 选择所有的button input元素
$(“:file”) 选择所有的file input元素
$(“:hidden”) 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器:

$(“:enabled”) 选择所有的可操作的表单元素
$(“:disabled”) 选择所有的不可操作的表单元素
$(“:checked”) 选择所有的被checked的表单元素
$(“select option:selected”) 选择所有的select 的子元素中被selected的元素

选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()

名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^=’S_’]“).not(”[@ name $=’_R’]“)

一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();

$(“A B”) 查找A元素下面的所有子节点,包括非直接子节点
$(“A>B”) 查找A元素下面的直接子节点
$(“A+B”) 查找A元素后面的兄弟节点,包括非直接子节点
$(“A~B”) 查找A元素后面的兄弟节点,不包括非直接子节点

1. $(“A B”) 查找A元素下面的所有子节点,包括非直接子节点

例子:找到表单中所有的 input 元素

HTML 代码:

<form>
<label>Name:</label>
<input name=”name” />
<fieldset>
<label>Newsletter:</label>
<input name=”newsletter” />
</fieldset>
</form>
<input name=”none” />
jQuery 代码:

$(“form input”)
结果:

[ <input name=”name” />, <input name=”newsletter” /> ]

2. $(“A>B”) 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。

HTML 代码:

<form>
<label>Name:</label>
<input name=”name” />
<fieldset>
<label>Newsletter:</label>
<input name=”newsletter” />
</fieldset>
</form>
<input name=”none” />
jQuery 代码:

$(“form > input”)
结果:

[ <input name=”name” /> ]

3. $(“A+B”) 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素

HTML 代码:

<form>
<label>Name:</label>
<input name=”name” />
<fieldset>
<label>Newsletter:</label>
<input name=”newsletter” />
</fieldset>
</form>
<input name=”none” />
jQuery 代码:

$(“label + input”)
结果:

[ <input name=”name” />, <input name=”newsletter” /> ]

4. $(“A~B”) 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素

HTML 代码:

<form>
<label>Name:</label>
<input name=”name” />
<fieldset>
<label>Newsletter:</label>
<input name=”newsletter” />
</fieldset>
</form>
<input name=”none” />
jQuery 代码:

$(“form ~ input”)
结果:

[ <input name=”none” /> ]

Html and JavaScript Mumbo Jumbo Part 2

JavaScript is a browser side scripting language, unlike the static HTML language, you can actually use it to interact with your website visitors. A simple example would be the pop-up alert you may encounter everything. And JavaScript can respond to events(such as clicking on a link, loading a page, hover over an HTML element etc. you can check the full event list here).

Although JavaScript is very helpful, programmers find that they always need to write multiple lines for a simple functionality, so they were expecting some kind of shorthand, that’s where jQuery comes in. From my understanding, jQuery is sort of like a library for JavaScript, only when you use it, it’s simpler, basically it’s still JavaScript.

Other than JavaScript, PHP is a server side scripting language, which means you need to have a web server(in fact, with the help of Wamp etc., you can have a web server environment on your own computer) to parse the PHP language. PHP is now a popular programming language, probably with a popularity just behind other programming languages like C, Java, C++. You may often hear PHP along with MySQL, Apache, the following graph helps you to understand the relationship between PHP and MySQL, Apache, it also displays the process of a browser requesting a PHP web page.

PHP Operational Trail

Like other programming languages, you’ll need to learn PHP step by step, variables, data types, object-oriented…

We’ve also mentioned MySQL here, MySQL is an open source database, which is now under Oracle. SQL stands for Structured Query Language, and it is the basic for any programming language if you want to move forward and become a developer.

jQuery事件一览图

jQuery(JS)可通过监听一些事件(Events)如点击、鼠标悬停等来执行指定方法/函数,下图总结了jQuery所用到的主要事件,方便大家记忆和查阅:

jQuery事件