jQuery 基础学习笔记总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 基础学习笔记总结相关的知识，希望对你有一定的参考价值。
Jquery 学习笔记 总结
感想：
此前在做站点时用到过jquery相关，特别是Ajax相关技术。但是并没有系统的进行学习和了解Jquery的强大的功能，趁这几天跟着资料基本的了解下Jquery的特性和插件，感觉原来好多前端设计中感觉非常麻烦的东西。通过Jquery的函数和插件都非常easy的实现了而且效果极佳。这里仅仅是简单的介绍下Jquery有哪些知识点。1.基础选择器
（1）. $("button").attr("disabled","true"); --使按钮变灰，不可用状态（2）. $("*"); --它的功能是获取页面中的所有元素
（3）. $("form *").attr("disabled", "true"); --将<form>元素包括下的所有表单型元素都设为不可用。
（4）. $("ance desc");层次选择器，ance參数（ancestor祖先的简写）表示父元素。desc參数（descendant后代的简写）表示后代元素，即包含子元素、孙元素等等。
两个參数都能够通过选择器来获取。
（5）. $(“parent > child”); child參数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。
（6）. $(“prev + next”);当中參数prev为不论什么有效的选择器。參数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说。“prev”元素最紧邻的下一个元素由“next”选择器返回的而且仅仅返回唯的一个元素。
（7）.$(“prev ~ siblings”);当中參数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。(获取prev 元素后面所有相邻的元素)
2.过滤选择器
（1）. :first过滤选择器 --:first过滤选择器的功能是获取第一个元素，经常与其他选择器一起使用，获取指定的一组元素中的第一个元素。:last过滤选择器 是获得最后一个元素
（2）. :eq(index);--从一组标签元素数组中，灵活选择随意的一个标签元素,当中參数index表示索引號（即：一个整数），它从0開始。假设index的值为3，表示选择的是第4个元素。
（3）. :contains(text)选择器;功能是选择包括指定字符串的所有元素，它通常与其它元素结合使用。获取包括“text”字符串内容的所有元素对象。
当中參数text表示页面中的文字。
（4）. :has(selector)过滤选择器;--功能是获取选择器中包括指定元素名称的所有元素。当中selector參数就是包括的元素名称，是被包括元素。
（5）. :hidden过滤选择器的功能是获取所有不可见的元素。这些不可见的元素中包含type属性值为hidden的元素。
（6）. :visible过滤选择器获取的是所有可见的元素，也就是说。仅仅要不将元素的display属性值设置为“none”，那么，都能够通过该选择器获取。
（7）. [attribute=value]属性选择器的功能是获取与属性名和属性值全然同样的所有元素，当中[]是专用于属性选择器的括号符，參数attribute表示属性名称，value參数表示属性值。
（8）. [attribute*=value]。它能够获取属性值中包括指定内容的所有元素。当中[]是专用于属性选择器的括号符，參数attribute表示属性名称。value參数表示相应的属性值。
（9）. :first-child子元素过滤选择器则能够获取每一个父元素中返回的首个子元素，它是一个集合，经常使用多个集合数据的选择处理。
:last-child 子元素过滤选择器则能够获取每一个父元素中返回的最后一个子元素，它是一个集合
3.表单选择器
（1）. :input表单选择器 :input;--功能是返回所有的表单元素。不仅包含所有<input>标记的表单元素，并且还包含<textarea>、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。
（2）. :text表单文本选择器 --能够获取表单中所有单行的文本输入框元素。单行的文本输入框就像一个不换行的字条工具，使用很广泛。
（3）. :password选择器，它的功能是获取表单中所有的密码输入文本框元素。
（4）. :radio单选button选择器
（5）. :checkbox复选框选择器
（6）. :submit提交button选择器
（7）. :image图像域选择器
（8）. :button表单按钮选择器
（9）. :checked选中状态选择器
（10）. :selected选中状态选择器
4.jQuery 操作DOM元素
(1). appendTo()方法也能够向指定的元素内插入内容，它的使用格式是：$(content).appendTo(selector)參数content表示须要插入的内容，參数selector表示被选的元素，即把content内容插入selector元素内。默认是在尾部。(2). 调用clone()方法能够生成一个被选元素的副本。即复制了一个被选元素，包括它的节点、文本和属性，它的调用格式为：$(selector).clone() 当中參数selector能够是一个元素或html内容。
(3). replaceWith()和replaceAll()方法都能够用于替换元素或元素中的内容，但它们调用时。内容和被替换元素所在的位置不同，分别为例如以下所看到的：$(selector).replaceWith(content)和$(content).replaceAll(selector) 參数selector为被替换的元素，content为替换的内容。
(4). wrap()和wrapInner()方法都能够进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)參数selector为被包裹的元素。wrapper參数为包裹元素的格式。
(5). 使用each()方法能够遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：$(selector).each(function(index))參数function为遍历时的回调函数，index为遍历元素的序列号，它从0開始。
(6). remove()方法删除所选元素本身和子元素。该方法能够通过加入过滤參数指定须要删除的某些元素，而empty()方法则仅仅删除所选元素的子元素。
5. jQuery 事件与应用
(1). ready()事件类似于onLoad()事件，但前者仅仅要页面的DOM结构载入后便触发，而后者必须在页面所有元素载入成功才触发。ready()能够写多个，按顺序运行。此外。下列写法是相等的： $(document).ready(function(){})等价于$(function(){});
(2). $(selector).bind(event,[data] function) --參数event为事件名称，多个事件名称用空格隔开，function为事件运行的函数。
(3). 使用hover()方法切换事件,hover()方法的功能是当鼠标移到所选元素上时，运行方法中的第一个函数。鼠标移出时。运行方法中的第二个函数，实现事件的切实效果，调用格式例如以下：$(selector).hover(over，out); over參数为移到所选元素上触发的函数。out參数为移出元素时触发的函数。
(4). 使用toggle()方法绑定多个函数,toggle()方法能够在元素的click事件中绑定两个或两个以上的函数。同一时候，它还能够实现元素的隐藏与显示的切换，绑定多个函数的调用格式例如以下：$(selector).toggle(fun1(),fun2(),funN(),...);当中。fun1，fun2就是多个函数的名称.
(5). 使用unbind()方法移除元素绑定的事件,unbind()方法能够移除元素已绑定的事件，它的调用格式例如以下：$(selector).unbind(event,fun);当中參数event表示须要移除的事件名称。多个事件名用空格隔开，fun參数为事件运行时调用的函数名称。
(6). 使用unbind()方法移除元素绑定的事件,unbind()方法能够移除元素已绑定的事件，它的调用格式例如以下：$(selector).unbind(event,fun);当中參数event表示须要移除的事件名称。多个事件名用空格隔开，fun參数为事件运行时调用的函数名称。
假设没有规定參数，unbind() 方法会删除指定元素的全部事件处理程序。
(7). 使用one()方法绑定元素的一次性事件,one()方法能够绑定元素不论什么有效的事件，但这样的方法绑定的事件仅仅会触发一次，它的调用格式例如以下：$(selector).one(event,[data],fun);參数event为事件名称，data为触发事件时携带的数据。fun为触发该事件时运行的函数。
(8). 调用trigger()方法手动触发指定的事件,trigger()方法能够直接手动触发元素指定的事件，这些事件能够是元素自带事件。也能够是自己定义的事件。总之，该事件必须能运行，它的调用格式为：$(selector).trigger(event);当中event參数为须要手动触发的事件名称。
(9).文本框的focus和blur事件,focus事件在元素获取焦点时触发，如点击文本框时，触发该事件。而blur事件则在元素丢失焦点时触发，如点击除文本框的不论什么元素，都会触发该事件。
(10). 下拉列表框的change事件,当一个元素的值发生变化时，将会触发change事件，比如在选择下拉列表框中的选项时，就会触change事件。
(11). 调用live()方法绑定元素的事件,与bind()方法同样。live()方法与能够绑定元素的可运行事件。除此同样功能之外。live()方法还能够绑定动态元素(比方：动态加入的元素)。即使用代码加入的元素事件，格式例如以下：$(selector).live(event,[data],fun);參数event为事件名称。data为触发事件时携带的数据。fun为触发该事件时运行的函数。(注意：从 jQuery 1.7 開始，不再建议使用
.live() 方法。1.9不支持.live())
(12). 绑定事件方法，on方法，语法：$(selector).on(event,childSelector,data,function,map)
--vent
必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
--childSelector
可选。
规定仅仅能加入到指定的子元素上的事件处理程序（且不是选择器本身，比方已废弃的 delegate() 方法）。
--data
可选。规定传递到函数的额外数据。
--function
可选。规定当事件发生时执行的函数。
--map 规定事件映射 ({event:function, event:function, ...})。包括要加入到元素的一个或多个事件，以及当事件发生时执行的函数。
--假设你须要移除on()所绑定的方法，能够使用off()方法处理。
6.jQuery 动画特效
(1). 调用show()和hide()方法显示和隐藏元素 --show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]);參数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项參数callback为隐藏或显示动作运行完毕后调用的函数名(2). 调用toggle()方法就能够非常easy做到，即假设元素处于显示状态。调用该方法则隐藏该元素，反之。则显示该元素，它的调用格式是：$(selector).toggle(speed,[callback]);当中speed參数为动画效果时的速度值，能够为数字，单位为毫秒，也但是“fast”、“slow”字符，可选项參数callback为方法运行成功后回调的函数名称。
(3). 使用slideUp()和slideDown()方法的滑动效果--能够使用slideUp()和slideDown()方法在页面中滑动元素。前者用于向上滑动元素。后者用于向下滑动元素，它们的调用方法分别为：$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]);当中speed參数为滑动时的速度。单位是毫秒。可选项參数callback为滑动成功后运行的回调函数名。
(要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。
)
(4). 使用slideToggle()方法实现图片“变脸”效果--使用slideToggle()方法能够切换slideUp()和slideDown()，即调用该方法时，假设元素已向上滑动，则元素自己主动向下滑动，反之。则元素自己主动向上滑动，格式为：$(selector).slideToggle(speed,[callback]);当中speed參数为动画效果时的速度值，能够为数字，单位为毫秒，也但是“fast”、“slow”字符。可选项參数callback为方法运行成功后回调的函数名称。
(5). 使用fadeIn()与fadeOut()方法实现淡入淡出效果--fadeIn()和fadeOut()方法能够实现元素的淡入淡出效果，前者淡入隐藏的元素。后者能够淡出可见的元素，它们的调用格式分别为：$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback]);当中參数speed为淡入淡出的速度。callback參数为完毕后运行的回调函数名。
(6). 使用fadeTo()方法设置淡入淡出效果的不透明度--调用fadeTo()方法。能够将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：$(selector).fadeTo(speed,opacity,[callback]);当中speed參数为效果的速度。opacity參数为指定的不透明值。它的取值范围是0.0~1.0，可选项參数callback为效果完毕后。回调的函数名。
(7). 调用animate()方法制作简单的动画效果--调用animate()方法能够创建自己定义动画效果。它的调用格式为：$(selector).animate({params},speed,[callback])当中，params參数为制作动画效果的CSS属性名与值。speed參数为动画的效果的速度，单位为毫秒，可选项callback參数为动画完毕时运行的回调函数名。
(8). 调用stop()方法停止当前全部动画效果--stop()方法的功能是在动画完毕之前，停止当前正在运行的动画效果，这些效果包含滑动、淡入淡出和自己定义的动画。它的调用格式为：$(selector).stop([clearQueue],[goToEnd]);当中，两个可选项參数clearQueue和goToEnd都是布尔类型值。前者表示是否停止正在运行的动画，后者表示是否完毕正在运行的动画，默觉得false。
(9). 调用delay()方法延时运行动画效果 --delay()方法的功能是设置一个延时值来推迟动画效果的运行，它的调用格式为：$(selector).delay(duration);当中參数duration为延时值，它的单位是毫秒。当超过延时值时，动画继续运行。
7. jQuery 实现Ajax应用
(1). 使用load()方法异步请求数据--使用load()方法通过Ajax请求载入server中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：load(url,[data],[callback])參数url为载入server地址。可选项data參数为请求时发送的数据，callback參数为数据请求成功后，运行的回调函数。
(2).使用getJSON()方法异步载入JSON格式数据--使用getJSON()方法能够通过Ajax异步请求的方式，获取server中的数组。并对获取的数据进行解析，显示在页面中，它的调用格式为：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]);当中，url參数为请求载入json格式文件的server地址。可选项data參数为请求时发送的数据，callback參数为数据请求成功后。运行的回调函数。
(3).使用getScript()方法异步载入并运行js文件--使用getScript()方法异步请求并运行server中的javascript格式的文件，它的调用格式例如以下所看到的：jQuery.getScript(url,[callback])或$.getScript(url,[callback]);參数url为server请求地址，可选项callback參数为请求成功后运行的回调函数。
(4). 使用get()方法以GET方式从server获取数据--使用get()方法时，採用GET方式向server请求数据，并通过方法中回调函数的參数返回请求的数据，它的调用格式例如以下：$.get(url,[callback]);參数url为server请求地址。可选项callback參数为请求成功后运行的回调函数。
(5). 使用post()方法以POST方式从server发送数据--与get()方法相比，post()方法多用于以POST方式向server发送数据。server接收到数据之后，进行处理，并将处理结果返回页面。调用格式例如以下：$.post(url,[data],[callback]);參数url为server请求地址，可选项data为向server请求时发送的数据。可选项callback參数为请求成功后运行的回调函数。
(6). 使用serialize()方法序列化表单元素值--使用serialize()方法能够将表单中有name属性的元素值进行序列化。生成标准URL编码文本字符串。直接可用于ajax请求。它的调用格式例如以下：$(selector).serialize();当中selector參数是一个或多个表单中的元素或表单元素本身。
(调用表单元素本身的serialize()方法，将表单中元素所有序列化，生成标准URL编码，各元素间通过&号相联。)
(7). 使用ajax()方法载入server数据 --使用ajax()方法是最底层、功能最强大的请求server数据的方法，它不仅能够获取server返回的数据。还能向server发送请求并传递数值，它的调用格式例如以下：jQuery.ajax([settings])或$.ajax([settings]);当中參数settings为发送ajax请求时的配置对象，在该对象中，url表示server请求的路径，data为请求时传递的数据。dataType为server返回的数据类型。success为请求成功的运行的回调函数。type为发送数据请求的方式。默觉得get。
(8). 使用ajaxSetup()方法设置全局Ajax默认选项--使用ajaxSetup()方法能够设置Ajax请求的一些全局性选项值，设置完毕后，后面的Ajax请求将不须要再加入这些选项值。它的调用格式为：jQuery.ajaxSetup([options])或$.ajaxSetup([options]);可选项options參数为一个对象。通过该对象设置Ajax请求时的全局选项值。
样例：（使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后，在两次调用ajax请求servertxt文件时，仅仅须要设置url地址就可以。）
<script type="text/javascript">
$(function () {
$.ajaxSetup(
{
dataType:"text",
success:function(data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
(9). 使用ajaxStart()和ajaxStop()方法--ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数。ajaxStop()方法用于在Ajax请求完毕后触发函数。它们的调用格式为：$(selector).ajaxStart(function())和$(selector).ajaxStop(function())；当中，两个方法中括号都是绑定的函数。当发送Ajax请求前运行ajaxStart()方法绑定的函数，请求成功后，运行ajaxStop
()方法绑定的函数。
样例：
$(function () {
$("#divload").ajaxStart( function(){
$(this).html("正在请求数据...");
});
$("#divload").ajaxStop(function(){
$(this).html("数据请求完毕！
");
});
8. jQuery 经常使用插件
(1). 表单验证插件——validate 该插件自带包括必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还同意自己定义验证规则，插件调用方法例如以下：$(form).validate({options});当中form參数表示表单元素名称，options參数表示调用方法时的配置对象。全部的验证规则和异常信息显示的位置都在该对象中进行设置。Jquery Validate 验证规则
(1)required:true 必输字段
(2)remote:”check.php” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)。比如：2009-06-23。1998/01/22 仅仅验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field同样
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
样例：
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自己定义验证规则*/
rules: {
email:{
required:true, //是否同意为空
email:true //正确的电子邮箱格式
//digits:true //整数
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(element.parent());
// error.appendTo(".tip");
}
}
);
});
</script>
具体站点：http://blog.csdn.net/u013147600/article/details/46816021
(2). 表单插件——form --通过表单form插件，调用ajaxForm()方法，实现ajax方式向server提交表单数据，并通过方法中的options对象获取server返回数据，调用格式例如以下：$(form). ajaxForm ({options})；当中form參数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和參数。
样例：
<script type="text/javascript">
$(function () {
var options = {
url: "http://blog.csdn.net/u013147600",
target: ".tip"
}
$("#frmV").ajaxForm(options);
});
</script>
具体站点：http://blog.csdn.net/zzq58157383/article/details/7718956
http://www.cnblogs.com/linzheng/archive/2010/11/17/1880288.html
(3). 图片灯箱插件——lightBox --该插件能够用圆角的方式展示选择中的图片，使用button查看上下张图片，在载入图片时自带进度条，还能以自己主动播放的方式浏览图片。调用格式例如以下：$(linkimage).lightBox({options});当中linkimage參数为包括图片的<a>元素名称。options为插件方法的配置对象。
样例：
<script type="text/javascript">
$(function () {
$(".divPics a").lightBox({
overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度
})
});
</script>
具体站点：http://www.cnblogs.com/lhb25/archive/2011/04/11/2005330.html
http://www.jquerylightbox.com/
(4). 图片放大镜插件——jqzoom --在调用jqzoom图片放大镜插件时。须要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时。调用该插件的jqzoom()方法，显示与小图片同样的大图片区域，从而实现放大镜的效果，调用格式例如以下：$(linkimage).jqzoom({options});当中linkimage參数为包括图片的<a>元素名称，options为插件方法的配置对象。
样例：
<script type="text/javascript">
$(function () {
$(".content a").jqzoom({ //绑定图片放大插件jqzoom
zoomWidth: 123, //小图片所选区域的宽
zoomHeight: 123, //小图片所选区域的高
zoomType: ‘reverse‘ //设置放大镜的类型
});
});
</script>
具体站点：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819887.html
http://www.oschina.net/p/jqzoom/
(5). cookie插件——cookie --使用cookie插件后，能够非常方便地通过cookie对象保存、读取、删除用户的信息。还能通过cookie插件保存用户的浏览记录，它的调用格式为：保存：$.cookie(key。value)；读取：$.cookie(key)，删除：$.cookie(key。null);当中參数key为保存cookie对象的名称，value为名称相应的cookie值。
样例：
<script type="text/javascript">
$(function () {
if ($.cookie("email")) {
$("#email").val($.cookie("email"));
}
$("#btnSet").bind("click", function () {
if ($("#chksave").is(":checked")) {
$.cookie("email",$("#email").val, {
path: "/", expires: 7
})
}
else {
$.cookie("email",null, {
path: "/"
})
}
});
});
</script>
具体站点：http://www.cnblogs.com/kissdodog/archive/2012/12/14/2818827.html
http://blog.csdn.net/zzq58157383/article/details/7722106
(6). 搜索插件——autocomplete --搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定。当文本框输入字符时。绑定后的插件将返回与字符相近的字符串提示选择，调用格式例如以下：$(textbox).autocomplete(urlData,[options]);当中，textbox參数为文本框元素名称，urlData为插件返回的相近字符串数据。可选项參数options为调用插件方法时的配置对象。
(当文本框与搜索插件相绑定后，输入随意字符时。都将返回与之相匹配的字符串，提示用户选择，文本框在空白双击时，显示所有提示信息。)
样例：
<script type="text/javascript">
$(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));
}
});
</script>
具体站点：http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html
http://blog.csdn.net/daicj88/article/details/6822410 --參数解释
(7). 右键菜单插件——contextmenu --右键菜单插件能够绑定页面中的随意元素。绑定后。选中元素。点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称运行对应操作。调用代码例如以下：$(selector).contextMenu(menuId,{options});Selector參数为绑定插件的元素。meunId为快捷菜单元素，options为配置对象。
样例：
<script type="text/javascript">
$(function () {
$("#btnSubmit").contextMenu("sysMenu",
{ bindings:
{
‘Li3‘: function (Item) {
$(".tip").show().html("您点击了“保存”项");
},
‘Li4‘: function (Item) {
$(".tip").show().html("您点击了“退出”项");
}
}
});
});
</script>
具体站点：http://www.blogjava.net/supercrsky/articles/250091.html
http://shadowlin.iteye.com/blog/939938
http://www.open-open.com/ajax/ajax20080504120558.htm
(8).自己定义对象级插件——lifocuscolor插件 --自己定义的lifocuscolor插件能够在<ul>元素中，鼠标在表项<li>元素移动时。自己定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为：$(Id).focusColor(color) ;当中。參数Id表示<ul>元素的Id号。color表示<li>元素选中时的背景色。
样例：
<script type="text/javascript">
$(function () {
$("ul").focusColor("red")//调用自己定义的插件
})
</script>
具体站点：http://www.imooc.com/code/428
(9). 自己定义类级别插件—— twoaddresult --通过调用自己定义插件twoaddresult中的不同方法，能够实现对两个数值进行相加和相减的运算。导入插件后。调用格式分别为：$.addNum(p1,p2) 和 $.subNum(p1,p2);上述调用格式分别为计算两数值相加和相减的结果，p1和p2为随意数值。
具体站点：http://www.imooc.com/code/429
9.jQuery UI型插件
(1). 拖曳插件——draggable拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后。能够通过调用draggable()方法。实现各种拖曳元素的效果，调用格式例如以下：
$(selector). draggable({options});options參数为方法调用时的配置对象，依据该对象能够设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。
具体站点：http://www.cnblogs.com/luluping/archive/2009/08/27/1555329.html
http://www.cnblogs.com/ganqiyin/archive/2013/12/12/3471622.html
http://www.jb51.net/article/21786.htm
(2). 放置插件——droppable
除使用draggable插件拖曳随意元素外。还能够调用droppable UI插件将拖曳后的随意元素放置在指定区域中。类似购物车效果，调用格式例如以下：
$(selector).droppable({options})
selector參数为接收拖曳元素，options为方法的配置对象。在对象中，drop函数表示当被接收的拖曳元素全然进入接收元素的容器时，触发该函数的调用。
样例：
<script type="text/javascript">
var intsum=0;
$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
intsum++;
alert(intsum);
$(this)
.addClass("focus")
.find("#tip").html("");
$(".title span").html(intsum);
}
})
});
</script>
具体站点：http://blog.csdn.net/fushou/article/details/8061521
http://blog.sina.com.cn/s/blog_6d0dc2a90100qaln.html
(3). 拖曳排序插件——sortable
拖曳排序插件的功能是将序列元素（比如<option>、<li>）按任何位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：
$(selector).sortable({options});
selector參数为进行拖曳排序的元素。options为调用方法时的配置对象。
样例：
<script type="text/javascript">
$(function () {
$("ul").sortable({
delay:2,//延时2秒，防止与点击事件冲突
opacity:0.35//设置透明度
})
});
</script>
具体站点：http://hb-keepmoving.iteye.com/blog/1154618
http://www.jb51.net/article/38761.htm
(4). 面板折叠插件——accordion
面板折叠插件能够实现页面中指定区域类似“手风琴”的折叠效果。即点击标题时展开内容，再点还有一标题时，关闭已展开的内容，调用格式例如以下：
$(selector).accordion({options});
当中，參数selector为整个面板元素，options參数为方法相应的配置对象。
样例：
<body>
<div id="divtest">
<div id="accordion">
<h3>
<a href="#">白富美</a></h3>
<p>咱们结婚吧!</p>
<h3>
<a href="#">土豪族</a></h3>
<p>咱们交个朋友吧!</p>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
</body>
具体站点：http://www.cnblogs.com/sunfishlu/archive/2009/09/25/1573678.html
http://www.jeasyui.net/plugins/161.html
demo：http://www.open-open.com/ajax/Accordion.htm
(5). 选项卡插件——tabs
使用选项卡插件能够将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题相应的内容，它的调用格式例如以下：
$(selector).tabs({options});
selector參数为选项卡总体外围元素，该元素包括选项卡标题与内容，options參数为tabs()方法的配置对象，通过该对象还能以ajax方式载入选项卡的内容。
样例：
<body>
<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>
</div>
<div id="tabs-2">
<p>足球</p>
<p>散步</p>
<p>篮球</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tabs").tabs ({
//设置各选项卡在切换时的动画效果
fx: { opacity: "toggle", height: "toggle" },
event: "mousemove" //通过移动鼠标事件切换选项卡
})
});
</script>
</body>
具体站点：http://www.cnblogs.com/bestfc/archive/2009/06/08/1498737.html
http://www.jeasyui.com/documentation/tabs.php
(6). 对话框插件——dialog
对话框插件能够用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：
$(selector).dialog({options});
selector參数为显示弹出对话框的元素，通常为<div>，options參数为方法的配置对象，在对象中能够设置对话框类型、“确定”、“取消”button运行的代码等。
样例：
<body>
<div id="divtest">
<div class="content">
<span id="spnName" class="fl">张三</span>
<input id="btnDelete" type="button" value="删除" class="fr"/>
</div>
<div id=‘dialog-modal‘></div>
</div>
<script type="text/javascript">
$(function () {
$("#btnDelete").bind("click", function () { //询问button事件
if ($("#spnName").html() != null) { //假设对象不为空
sys_Confirm("您真的要删除该条记录吗？");
return false;
}
});
});
function sys_Confirm(content) { //弹出询问信息窗体
$("#dialog-modal").dialog({
height: 140,
modal: true,
title: ‘系统提示‘,
hide: ‘slide‘,
buttons: {
‘确定‘: function () {
$("#spnName").remove();
$(this).dialog("close");
},
‘取消‘: function () {
$(this).dialog("close");
}
},
open: function (event, ui) {
$(this).html("");
$(this).append("<p>" + content + "</p>");
}
});
}
</script>
</body>
具体站点：http://www.cnblogs.com/haogj/archive/2011/02/16/1956523.html
(7). 菜单工具插件——menu
菜单工具插件能够通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，同意为菜单的各个选项加入图标，调用格式例如以下：
$(selector).menu({options}); selector參数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。
样例：
<body>
<ul id="menu">
<li><a href="#">小明一中</a>
<ul>
<li><a href="#">高中部</a>
<ul>
<li><a href="#">高一(1)班</a></li>
<li><a href="#">高一(2)班</a></li>
<li><a href="#">高一(3)班</a>
<ul>
<li><a href="#">小胡</a></li>
<li><a href="#">小李</a></li>
<li><a href="#">小陈</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">初中部</a>
<ul>
<li><a href="#">初一(1)班</a></li>
<li><a href="#">初一(2)班</a></li>
<li><a href="#">初一(3)班</a></li>
</ul>
</li>
<li><a href="#">教研部</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">大明二中</a></li>
<!--将<li>元素的class属性值设为“ui-state-disabled”，可将菜单选项置为不可用状态-->
</ul>
<script type="text/javascript">
$(function () {
$("#menu").menu();
});
</script>
</body>
具体站点： Demo: http://www.cnblogs.com/xiaoyao2011/archive/2011/10/19/jqueryMenu.html
http://sc.chinaz.com/jiaoben/caidanhaohang.html
http://www.jsfoot.com/jquery/menu/
smartMenu右键自己定义上下文： http://www.zhangxinxu.com/wordpress/?p=1667
jQuery-menu-aim: http://www.cnblogs.com/naonaoye/archive/2013/03/08/2949504.html
http://www.juheweb.com/js/dh/56.html
jQuery 导航菜单: http://www.neoease.com/wordpress-menubar-6/
(8). 微调button插件——spinner
微调button插件不仅能在文本框中直接输入数值，还能够通过点击输入框右側的上下button改动输入框的值。还支持键盘的上下方向键改变输入值，调用格式例如以下：
$(selector).spinner({options});
selector參数为文本输入框元素，可选项options參数为spinner()方法的配置对象。在该对象中，能够设置输入的最大、最小值，获取改变值和设置相应事件。
样例：
<body>
<div id="divtest">
<div class="title">
选择颜色值</div>
<div class="content">
<span id="spnColor" class="input fl">
<input />
</span>
<span id="spnPrev" class="prev fr"></span>
</div>
</div>
<script type="text/javascript">
$(function () {
//定义变量
var intR = 0, intG = 0, intB = 0, strColor;
$("input").spinner({
//初始化插件
max: 10,
min: 0,
//设置微调button递增/递减事件
spin: function (event, ui) {
if (ui.value == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
},
//设置微调button值改变事件
change: function (event, ui) {
var intTmp = $(this).spinner("value");
if (intTmp < 0) $(this).spinner("value", 0);
if (intTmp > 10) $(this).spinner("value", 10);
if (intTmp == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
}
});
});
</script>
</body>
来源站点： http://www.css88.com/jquery-ui-api/spinner/
http://www.cnblogs.com/Philoo/archive/2011/10/20/jeasyui_api_spinner.html
(9). 工具提示插件——tooltip
工具提示插件能够定制元素的提示外观，提示内容支持变量、Ajax远程获取，还能够自己定义提示内容显示的位置，它的调用格式例如以下：
$(selector).tooltip({options});
当中selector为须要显示提示信息的元素。可选项參数options为tooltip()方法的配置对象。在该对象中，能够设置提示信息的弹出、隐藏时的效果和所在位置。
样例：
<body>
<div id="divtest">
<div class="title">
工具提示插件</div>
<div class="content">
<div>
<label for="name">
姓名</label>
<input id="name" name="name" title="我是土豪。欢迎与我做朋友" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("input").tooltip({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>
</body>
具体站点： http://www.jb51.net/article/19368.htm
http://www.cnblogs.com/QLeelulu/archive/2008/03/09/1097368.html
10. jQuery 工具类函数
(1).获取浏览器的名称与版本号信息在jQuery中。通过$.browser对象能够获取浏览器的名称和版本号信息，如$.browser.chrome为true。表示当前为Chrome浏览器，$.browser.mozilla为true。表示当前为火狐浏览器。还能够通过$.browser.version方式获取浏览器版本号信息。
(2). 检測浏览器是否属于W3C盒子模型
浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，还有一类为IE盒子模型，两者差别为在Width和Height这两个属性值中是否包括padding和border的值，w3c盒子模型不包括，IE盒子模型则包括，而在jQuery 中，能够通过$.support.boxModel对象返回的值。检測浏览器是否属于标准的w3c盒子模型。
(3). 检測对象是否为空
在jQuery中。能够调用名为$.isEmptyObject的工具函数。检測一个对象的内容是否为空，假设为空。则该函数返回true，否则。返回false值，调用格式例如以下：
$.isEmptyObject(obj);当中。參数obj表示须要检測的对象名称。
(4). 检測对象是否为原始对象
调用名为$.isPlainObject的工具函数，能检測对象是否为通过{}或new Object()keyword创建的原始对象，假设是，返回true。否则，返回false值。调用格式为：
$.isPlainObject (obj); 当中，參数obj表示须要检測的对象名称。
(5). 检測两个节点的包括关系
调用名为$.contains的工具函数。能检測在一个DOM节点中是否包括另外一个DOM节点，假设包括。返回true。否则，返回false值。调用格式为：
$.contains (container, contained); 參数container表示一个DOM对象节点元素，用于包括其它节点的容器，contained是还有一个DOM对象节点元素，用于被其它容器所包括。
(6). 字符串操作函数
调用名为$.trim的工具函数。能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：
$.trim (str); 參数str表示须要删除左右两边空格符的字符串。
(7). URL操作函数
调用名为$. param的工具函数。能使对象或数组依照key/value格式进行序列化编码，该编码后的值经常使用于向服务端发送URL请求，调用格式为：
$. param (obj); 參数obj表示须要进行序列化的对象，该对象也能够是一个数组。整个函数返回一个经过序列化编码后的字符串。
(8). 使用$.extend()扩展工具函数
调用名为$. extend的工具函数，能够对原有的工具函数进行扩展，自己定义类级别的jQuery插件，调用格式为：
$. extend ({options}); 參数options表示自己定义插件的函数内容。
(9). 使用$.extend()扩展Object对象
除使用$.extend扩展工具函数外，还能够扩展原有的Object对象。在扩展对象时，两个对象将进行合并。当存在同样属性名时，后者将覆盖前者，调用格式为：
$. extend (obj1,obj2,…objN); 參数obj1至objN表示须要合并的各个原有对象。
主要參考站点：慕课站点学习：http://www.imooc.com/learn/11
以上是关于jQuery 基础学习笔记总结的主要内容，如果未能解决你的问题，请参考以下文章