jQuery 基础学习笔记总结(一)

原创 2015年07月10日 11:13:26

Jquery 学习笔记 总结

感想:

此前在做网站时用到过jquery相关,特别是Ajax相关技术,可是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料主要的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉很麻烦的东西,通过Jquery的函数和插件都很容易的实现了并且效果极佳。这里只是简单的介绍下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单选按钮选择器
(5). :checkbox复选框选择器
(6). :submit提交按钮选择器
(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()方法就可以很容易做到,即如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素,它的调用格式是:$(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请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:load(url,[data],[callback])参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。


(2).使用getJSON()方法异步加载JSON格式数据--使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为:jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]);其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。


(3).使用getScript()方法异步加载并执行js文件--使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:jQuery.getScript(url,[callback])或$.getScript(url,[callback]);参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。


(4). 使用get()方法以GET方式从服务器获取数据--使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:$.get(url,[callback]);参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。


(5). 使用post()方法以POST方式从服务器发送数据--与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:$.post(url,[data],[callback]);参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。


(6). 使用serialize()方法序列化表单元素值--使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:$(selector).serialize();其中selector参数是一个或多个表单中的元素或表单元素本身。(调用表单元素本身的serialize()方法,将表单中元素全部序列化,生成标准URL编码,各元素间通过&号相联。)


(7). 使用ajax()方法加载服务器数据 --使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:jQuery.ajax([settings])或$.ajax([settings]);其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。


(8). 使用ajaxSetup()方法设置全局Ajax默认选项--使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:jQuery.ajaxSetup([options])或$.ajaxSetup([options]);可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。
例子:(使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后,在两次调用ajax请求服务器txt文件时,只需要设置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方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:$(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 --该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:$(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参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
例子:
<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 () { //询问按钮事件
                    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). 微调按钮插件——spinner
微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:
$(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,
   //设置微调按钮递增/递减事件
   spin: function (event, ui) {
if (ui.value == 8)
   spnPrev.style.backgroundColor = "red";
else
   spnPrev.style.backgroundColor = "green";
   },
   //设置微调按钮值改变事件
   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()关键字创建的原始对象,如果是,返回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基础学习笔记

1.jQuery是什么:           JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器,jQuery2.0...

jQuery Mobile基础 学习笔记

1.了解jQuery Mobile 1.认识与下载jQuery Mobile 认识jQuery Mobile 1.jQuery Mobile:     jQuery Mobile是jQuery在手机上...

jQuery学习笔记一--基础核心

一、    代码风格       “$”是jQuery当中最重要且独有的对象:jQuery对象。所以我们在页面元素选择或执行功能函数的时候可以这么写:       ...

jQuery基础课程学习笔记

这周学习的JavaScript。 课程名:JavaScript入门篇 课程地址:慕课网 http://www.imooc.com/learn/11 现整理笔记如下: jQuery ...

jQuery基础学习笔记第一讲之函数触发

常用的 jQuery 事件方法

jQuery学习笔记(一)--基础的DOM和CSS操作

一.DOM 简介 由于课程是基于JavaScript 基础上完成的,这里我们不去详细的了解DOM 到底是什么。 只需要知道几个基本概念: 1.D 表示的是页面文档Document、O 表示对象,...

jQuery学习笔记(二)基础事件

一.绑定事件 在JavaScript 课程的学习中,我们掌握了很多使用的事件,常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseove...

jQuery学习笔记之选择器(继基础核心篇)

常规选择器     1、$('input[属性]').val();获取表单内容 表单选择器     :input 选取所有input button select textarea元素     ...

jQuery、AJAX基础学习笔记

XMLHttpRequest发送请求 request.open(“GET”,”get.php”, true); request.send();request.open(“POST”, “post....

jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器

$()就是jQuery中的函数,它的功能是获得()中指定的标签元素。如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素,也可能是函数。 在j...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)