@EncyKe
2015-11-16T08:49:20.000000Z
字数 14827
阅读 5615
前端 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({//绑定图片放大插件jqzoomzoomWidth: 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”属性，前者被后者覆盖。