@EncyKe
2015-11-16T08:49:20.000000Z
字数 14827
阅读 5937
前端
JavaScript
官网 参考手册
环境搭配:目前稳定版本是v1.9.0。head
引入:
<script language="javascript" type="text/javascript" src="1.9.0/jquery.js"></script>
$()
就是jQuery中的函数,它的功能是获得()
中指定的标签元素,也可以是函数。
注意:$()
=jQuery()
,前者比较常用,是后者的简写。一般只在$()
与其它语言冲突时才用jQuery()
;
$("#id")
;
$("element")
;
$(".class")
;
$("*")
;
类、id和元素可混用,以逗号,
隔开,实现一起选择:$("sele1, sele2, seleN")
;
$("祖元素 子元素")
、$("父元素>子元素")
、$("前元素+后元素")
、$("祖元素 ~ 后众兄弟元素")
;
:first
及:last
过滤选择器获取第一个或最后一个元素,常常与其它选择器一起使用;:
前的元素为子元素,如li
。
:eq(index)
过滤选择器按顺序获取元素;参数index表示索引号(即整数),从0开始。
:contains('text')
过滤选择器获取包含指定字符串的全部元素,常与其他元素结合使用;参数text表示页面中的文字,需用''
包裹。
:has(selector)
过滤选择器获取元素名称实现过滤;selector需用''
包裹。
:hidden
过滤选择器获取全部不可见的元素(包括type属性值为hidden的元素)。
:visible
过滤选择器获取全部可见的元素,即非display:none;
的元素。
:first-child
及:last-child
过滤选择器获取每个父元素中返回的首个子元素,为集合。
[attribute=value]
属性选择器参数attribute表示属性名称,value参数表示属性值,需用''
包裹。[]
前要有元素选择器等。
[attribute!=value]
属性选择器获取不包含属性名,或者与属性名和属性值不相同的全部元素。
[attribute*=value]
属性选择器获取属性值中包含指定内容的全部元素。即有含一个字符即可。
:input
表单选择器获取全部的表单元素,包括所有<input>
、<textarea>
、<select>
和<button>
,其选择的表单元素是最广的;:
前必须空格,空格前一般放置<form>
的选择符。
:text
表单文本选择器获取表单中全部单行的文本输入框元素。
:password
表单密码选择器获取密码输入文本框。
:radio
单选按钮选择器获取表单中的全部单选按钮元素。
:checkbox
复选框选择器获取表单中的复选框元素。
:submit
提交按钮选择器获取表单中的提交按钮元素(一般一个表单中只允许有一个type="submit"
的提交按钮)。
:image
图像域选择器获取全部图像域按钮type="image"
。
注意::image
选择器只能获取<input>
图像域,不能获取<img>
。
:button
表单按钮选择器获取<input type="button">
和<button>
这两类按钮元素。
:checked
选中状态选择器获取处于选中状态的全部元素(checked="checked"
)。
:selected
选中状态选择器获取<select>
下拉列表框中全部处于选中状态(selected="selected"
)的<option>
选项元素。
attr()
方法控制元素的属性获取元素属性:attr("属性名")
;
设置元素属性:attr("属性名","属性值")
;
html()
和text()
方法操作元素的内容获取元素内容:两个方法的参数为空,html()
和text()
;
设置元素内容:传入参数,html("文本")
和text("文本")
;
区别:html()
可获取元素的HTML内容,原文中的格式代码也被一起获取,而text()
只获取元素中的文本内容,并不包含HTML格式代码。
css()
和addClass()
操作元素样式添加类名:addClass("类名")
;
直接设置元素样式:css("样式", "属性值")
;
设置多条样式声明可以css("样式1", "属性值2").css("样式2", "属性值2")
或者css({"样式1":"属性值1","样式2":"属性值2"})
;
removeAttr()
和removeClass()
移除属性和样式语法:removeAttr("属性名")
、removeClass("类名")
;
append()
向元素内追加内容语法:append(content)
被追加的content参数,可以是字符、HTML元素标记(均需
''
包裹)或变量、返回字符串内容的函数。
appendTo()
向被选元素内插入内容语法:$(content).appendTo(selector)
before()
和after()
在元素前后插入内容语法:$(selector).before(content)
和$(selector).after(content)
表示在整个元素的前面和后面插入指定的元素或内容(含html格式)。
clone()
复制元素语法:$(selector).clone()
参数selector可以是一个元素或HTML内容。
replaceWith()
和replaceAll()
替换内容语法:$(selector).replaceWith(content)
和$(content).replaceAll(selector)
wrap()
和wrapInner()
包裹元素和内容语法:$(selector).wrap(wrapper)
和$(selector).wrapInner(wrapper)
参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
each()
遍历元素遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号。
语法:$(selector).each(function(index))
参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。
$("span").each(
function (index)
{
if (index == 1)
{
$(this).attr("class", "red");
}
}
);
remove()
和empty()
删除元素区别:remove()
删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素;empty()
则只删除所选元素的子元素。
ready()
页面加载时触发事件ready()
事件类似于onLoad()
事件,前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发;
ready()
可以写多个,按顺序执行。
语法:$(document).ready(function(){})
等价于$(function(){});
bind()
绑定元素的事件语法:$(selector).bind(event,[data] function)
参数event为事件名称,需用
''
包裹,多个事件名称用空格隔开,function为事件执行的函数。
hover()
切换事件当鼠标移到所选元素上时,执行第一个函数,鼠标移出时,执行第二个函数,实现事件切换效果。
语法:$(selector).hover(over,out);
over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
toggle()
绑定多个函数语法:`$(selector).toggle(fun1(),fun2(),funN(),...)
fun1,fun2是多个函数的名称
注意:toggle()
支持目前主流稳定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。
unbind()
移除元素绑定的事件语法:$(selector).unbind(event,fun)
参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。
one()
绑定元素的一次性事件绑定元素任何有效的事件,但绑定的事件只会触发一。
语法:$(selector).one(event,[data],fun)
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
trigger()
手动触发指定的事件直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件。
语法:$(selector).trigger(event)
event参数为需要手动触发的事件名称。
live()
绑定元素的事件与bind()
相同,live()
可绑定元素的可执行事件,除此相同功能之外,live()
还可以绑定动态元素,即使用代码添加的元素事件。
语法:$(selector).live(event,[data],fun)
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
注意:从jQuery 1.7开始,不再建议使用.live()
。1.9不支持.live()
。
show()
和hide()
显示和隐藏元素语法:$(selector).hide(speed,[callback])
和$(selector).show(speed,[callback])
参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
toggle()
实现动画切换效果语法:$(selector).toggle(speed,[callback])
speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
可与show()
和hide()
配合使用。
slideUp()
和slideDown()
的滑动效果用于向上/向下滑动元素。
语法:$(selector).slideUp(speed,[callback])
和$(selector).slideDown(speed,[callback])
其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。
注意:slideDown()
仅适用于被隐藏的元素;slideUp()
则相反。
slideToggle()
实现滑动切换效果slideToggle()
可以切换slideUp()
和slideDown()
。
语法:$(selector).slideToggle(speed,[callback])
speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
fadeIn()
和fadeOut()
实现淡入淡出效果淡入隐藏的元素或者淡出可见的元素。
语法:$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])
参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。
fadeTo()
设置淡入淡出效果的不透明度语法:$(selector).fadeTo(speed,opacity,[callback])
speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名。
animate()
制作动画效果语法:$(selector).animate({params},speed,[callback])
params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。
制作简单变化尺寸的动画,params参数设置width
和height
值即可;
$("span").animate(
{
width: "80px",
height: "80px"
},
3000, function ()
{
$("#tip").html("执行完成!");
}
);
制作移动位置的动画,必须设置被移元素position:absolute/relative
。params参数设置left
、top
等:
left: "+=100px"
stop()
停止当前所有动画效果在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画。
语法:$(selector).stop([clearQueue],[goToEnd])
两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
delay()
延时执行动画效果语法:$(selector).delay(duration)
参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。
load()
异步请求数据通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中:
语法:load(url,[data],[callback])
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
getJSON()
异步加载JSON数据通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中:
语法:jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
getScript()
异步加载并执行JS文件异步请求并执行服务器中的JavaScript文件:
语法:jQuery.getScript(url,[callback])或$.getScript(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
get()
以GET方式从服务器获取数据采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据:
语法:$.get(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
post()
以POST方式从服务器发送数据向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面:
语法:$.post(url,[data],[callback])
参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。
serialize()
序列化表单元素值将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求:
语法:$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
ajax()
加载服务器数据该法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值:
语法:jQuery.ajax([settings])或$.ajax([settings])
参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。
ajaxSetup()
设置全局Ajax默认选项设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值:
语法:jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。
ajaxStart()
和ajaxStop()
绑定Ajax事件ajaxStart()
用于在Ajax请求发出前触发函数,ajaxStop()
用于在Ajax请求完成后触发函数:
语法:$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。
validate
自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,还允许自定义验证规则:
语法:$(form).validate({options})
form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。
示例:
$(function () {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
email:{
required:true,
email:true
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
form
调用ajaxForm()
实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据:
语法:$(form). ajaxForm ({options})
form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。
lightBox
用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片:
语法:$(linkimage).lightBox({options})
linkimage参数为包含图片的
<a>
元素名称,options为插件方法的配置对象。
示例:
$(function () {
$('div a').lightBox({
overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度
})
});
jqzoom
需要准备一大一小两张一样的图片,在页面的<a>
中href
放置小图片,<a>
中的<img>
跟随大图片;当鼠标在小图片中移动时,调用该插件的jqzoom()
显示与小图片相同的大图片区域,从而实现放大镜的效果:
语法:$(linkimage).jqzoom({options})
linkimage参数为包含图片的
<a>
元素名称,options为插件方法的配置对象。
示例:
$(function () {
$("div a").jqzoom({//绑定图片放大插件jqzoom
zoomWidth: 123, //小图片所选区域的宽
zoomHeight: 123, //小图片所选区域的高
zoomType: 'reverse' //设置放大镜的类型
});
});
cookie
通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录:
语法:
$.cookie(key,value);//保存
$.cookie(key);//读取
$.cookie(key,null);//删除
参数key为保存cookie对象的名称,value为名称对应的cookie值。
autocomplete
当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择:
语法:$(textbox).autocomplete(urlData,[options]);
textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。
示例:
$(function () {
var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
minChars: 0, //双击空白文本框时显示全部提示数据
formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback);
function SearchCallback(event, data, formatted) {
$(".tip").show().html("您的选择是:" + (!data ? "空" : formatted));
}
});
contextMenu
绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作:
语法:$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
示例:
<div id="divtest">
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li1"><img />保存</li>
<li id="Li2"><img />退出</li>
</ul>
</div>
</div>
$(function () {
$(".title").contextMenu("sysMenu",
{ bindings:
{
'Li1': function (Item) {
$(".tip").show().html("您点击了“保存”项");
},
'Li2': function (Item) {
$(".tip").show().html("您点击了“退出”项");
}
}
});
});
focusColor
可以在<ul>
元素中,鼠标在<li>
元素移动时,自定义其获取焦点时的背景色,即定义<li>
元素选中时的背景色:
语法:$(Id).focusColor(color)
参数Id表示
<ul>
元素的Id号,color表示<li>
元素选中时的背景色。
实现对两个数值进行相加和相减的运算,导入插件后:
语法:$.addNum(p1,p2)
和$.subNum(p1,p2)
上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。
draggable
拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,通过调用draggable()
可实现各种拖曳元素的效果:
语法:$(selector). draggable({options})
options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。
droppable
可将拖曳后的任意元素放置在指定区域中:
语法:$(selector).droppable({options})
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
sortable
将序列元素(例如<option>
、<li>
)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能:
语法:$(selector).sortable({options});
selector参数为进行拖曳排序的元素,options为调用方法时的配置对象,
示例:
$(function () {
$("ul").sortable({
delay:3, //拖动延迟3秒以防与点击事件冲突
opacity:0.35 //拖动元素以0.35透明度显示
})
});
accordion
点击标题时展开内容,再点另一标题时,关闭已展开的内容:
语法:$(selector).accordion({options});
参数selector为整个面板元素,options参数为方法对应的配置对象。
tabs
可以将<ul>
中的<li>
选项定义为选项标题,在标题中,再使用<a>
元素的href
属性设置选项标题对应的内容:
语法:$(selector).tabs({options});
selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。
配置对象中,通过“fx”属性设置了选项卡切换时的效果,“event”属性设置鼠标也可以切换选项卡,
示例:
<div id="divtest">
<div id="tabs">
<ul>
<li><a href="#tabs-1">最爱吃的水果</a></li>
<li><a href="#tabs-2">最喜欢的运动</a></li>
</ul>
<div id="tabs-1">
<p>橘子</p>
<p>香蕉</p>
<p>葡萄</p>
<p>苹果</p>
<p>西瓜</p>
</div>
<div id="tabs-2">
<p>足球</p>
<p>散步</p>
<p>篮球</p>
<p>乒乓球</p>
<p>骑自行车</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tabs").tabs ({
//设置各选项卡在切换时的动画效果
fx: { opacity: "toggle", height: "toggle" },
event: "mousemove" //通过移动鼠标事件切换选项卡
})
});
</script>
dialog
可以用动画的效果弹出多种类型的对话框,实现JS代码中alert()
和confirm()
函数的功能:
语法:$(selector).dialog({options});
selector参数为显示弹出对话框的元素,通常为
<div>
,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
menu
可以通过<ul>
创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标:
语法:$(selector).menu({options});
selector参数为菜单列表中最外层
<ul>
元素,options为menu()
的配置对象。
spinner
能在文本框中直接输入数值,也可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值:
语法:$(selector).spinner({options});
selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。
tooltip
可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置:
语法:$(selector).tooltip({options});
selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。
通过$.browser
对象可以获取浏览器的名称和版本信息,如$.browser.chrome=true
,表示当前为Chrome,$.browser.mozilla=true
,表示当前为火狐,还可以通过$.browser.version
方式获取浏览器版本信息。
示例:
$(function () {
var strTmp = "您的浏览器名称是:";
if ($.browser.chrome) { //谷歌浏览器
strTmp += "Chrome";
}
if ($.browser.mozilla) { //火狐相关浏览器
strTmp += "Mozilla FireFox";
}
strTmp += "<br /><br /> 版本号是:" + $.browser.version;
$(".content").html(strTmp);
});
浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含。
而在jQuery 中,$.support.boxModel=true
说明属于标准的w3c盒子模型。
$.isEmptyObject
工具函数可检测一个对象的内容是否为空:如果为空,返回true;否则返回false:
语法:$.isEmptyObject(obj);
参数obj表示需要检测的对象名称。
$.isPlainObject
工具函数能检测对象是否为通过{}
或new Object()
关键字创建的原始对象:如果是,返回true;否则返回false:
语法:$.isPlainObject (obj);
参数obj表示需要检测的对象名称。
$.contains
工具函数能检测在一个DOM节点中是否包含另外一个DOM节点:如果包含,返回true;否则返回false:
语法:$.contains (container, contained);
参数container表示一个DOM对象节点元素,用于包含其他节点的容器,contained是另一个DOM对象节点元素,用于被其他容器所包含。
$.trim
工具函数能删除字符串中左右两边的空格符,但该函数不能删除字符串中间的空格:
语法:$.trim (str);
参数str表示需要删除左右两边空格符的字符串。
$. param
工具函数能使对象或数组按照key/value格式进行序列化编码,该编码后的值常用于向服务端发送URL请求:
语法:$. param (obj);
参数obj表示需要进行序列化的对象,该对象也可以是一个数组,整个函数返回一个经过序列化编码后的字符串。
$.extend()
扩展工具函数$. extend
工具函数可对原有的工具函数进行扩展,自定义类级别的jQuery插件:
语法:$. extend ({options});
参数options表示自定义插件的函数内容。
还可以扩展原有的Object对象,在扩展对象时,两个对象将进行合并,当存在相同属性名时,后者将覆盖前者:
语法:$. extend (obj1,obj2,…objN);
参数obj1至objN表示需要合并的各个原有对象。
当两个对象通过$.extend()函数扩展合并后,返回一个包含两个对象中全部属性元素的新对象,相同名称的“name”属性,前者被后者覆盖。