这周学习的JavaScript。
课程名:JavaScript入门篇
课程地址:慕课网 http://www.imooc.com/learn/11
现整理笔记如下:
- jQuery 环境搭建:
- 引用jQuery文件库: <script language="javascript" type="text/javascript" src="1.9.0/jquery.js"></script>( 假设该文件下载后保存在项目文件夹Jscript中)
- jQuery 基础选择器:(基本与CSS选择器相同,但注意7~9的三个层级选择器是CSS选择器中没有的)
- ID选择器: $("#my_id")
- element(元素)选择器:$("elementName")
- .class(类)选择器:$(".class")
- *选择器:$("*")
- 注:
- 由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。
- 可以使用
$(“div *”)
的方式获取<div>元素的所有子元素-详见层次选择器
- 注:
- sele1,sele2,seleN选择器(多项选择器):$(“sele1,sele2,seleN”)
- ance desc(后代)选择器:$("ance desc")
- 其中ance desc是使用空格隔开
的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。
即CSS选择器中的”后代选择器“
- 其中ance desc是使用空格隔开
- parent>child(子)选择器: $(“parent > child”)
- 即CSS选择器中的子选择器;
- prev+next(层次)选择器: $(“prev + next”)
- 参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
- prev~siblings(层次)选择器: $(“prev ~ siblings”)
- 注:
- 参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。
- 区别于prev+next选择器:选取prev元素后面全部相邻的元素,而非一个
- 获取的是同一辈中的所有后面的元素;
- 注:
- jQuery 过滤性选择器( 该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个/多个元素):
- :first过滤选择器:( 想得到一组相同标签元素中的第1个元素)
- 语法:$("li:first") 即选择第一个li标签
- 注:
:first
过滤选择器的功能是获取第一个元素,常常与其它选择器一起使用,获取指定的一组元素中的第一个元素。- 所谓的一组元素是“同一个父标签的同一辈元素”
- :last过滤选择器:
- :eq(index)过滤选择器: ( 从一组标签元素数组中,灵活选择任意的一个标签元素)
- 语法:$("li:eq(2)") 即选择li标签中的第3个
- 注:参数index从0开始
- :contains(text)过滤选择器:选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象。
- 语法:$("li:contains('文本')")
- 注:
- 其中参数
text
表示页面中的文字(即innerHTML)。 - 参数中的text是用单引号括起来的,而整个是用双引号括起来的,不能乱,否则无效;
- 其中参数
- :has(selector)过滤选择器: 功能是获取选择器中包含指定元素名称的全部元素
- 语法:$("li:has('p')") 即选择包含p标签的li元素
- 注:区别于:contains(text)选择器,一个参数是元素名称,一个参数是文本内容
- :hidden过滤选择器: 功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。
- 语法:$("input:hidden")
- 注:仅是获取元素而已,不改变元素原本的hidden属性
- :visible过滤选择器: 获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。
- [attribute=value]属性选择器:
- 语法:$("li[title='我最爱']") 即选择所有title属性=“我最爱”的li标签
- 注:
- 其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
- []里面用的是“=”号,而不是“==”号,区别开逻辑运算
- []里面的单引号可以省略不写
- [attribute!=value]属性选择器: 获取不包含属性名,或者与属性名和属性值不相同的全部元素
- 语法:$("li[title!='我最爱']")
- 注:不包含属性名的也会被选择出来,而不只是属性名和属性值不相等的元素
- [attribute*=value]属性选择器: 获取属性值中包含指定内容的全部元素
- :first-child子元素过滤选择器: 获取每个父元素中返回的首个子元素
- 注:
- 其child所针对的是其父元素的child,即本元素的兄弟元素,而非本元素的child
- 选择li标签中的第一个标签应该是:$("li:first-child"),而非$("il:first-child")
- 注:
- :last-child子元素过滤选择器:
- 注意:
- 过滤选择器必须要搭配其他选择器应用,即“:”之前必须有选择器,否则针对的是所有元素;
- “:”之前不能有空格,即前面的选择器应紧挨着“:”,否则过滤选择器无效;
- :first过滤选择器:( 想得到一组相同标签元素中的第1个元素)
- jQuery 表单选择器:
- :input:返回全部的表单元素, 不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素,因此,它选择的表单元素是最广的。
- 语法: $("#frmTest :input")
- :text: 获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。
- 语法: $("#frmTest :text")
- 注: 只获取单行的文本输入框元素,对于<textarea>区域文本、按钮元素无效
- :password表单密码选择器:获取表单中全部的密码输入文本框元素。
- :radio单选按钮选择器: 取表单中的全部单选按钮元素
- :checkbox复选框选择器: 快速定位并获取表单中的复选框元素。
- :submit提交按钮选择器:
- 语法:$("#frmTest input:submit")
- 注:语法与其他表单选择器不同,还要个input,别忘记写
- :image图像域选择器: 当一个<input>元素的“type”属性值设为“image”时,该元素就是一个图像域,使用
:image
选择器可以快速获取该类全部元素- 注: 只能获取<input>图像域,而不能获取<img>格式的图像元素。
- :button表单按钮选择器: 能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。
- 注:要注意选取的范围,是两类最普通的按钮元素,如submit按钮就无法获取;
- :checked选中状态选择器: 调用:checked可以获取处于选中状态的全部元素。适用于单选、复选框
- :selected选中状态选择器: 只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。
- 注:”:“前有空格,表单选择器不同于上面的过滤选择器冒号前没有空格
- :input:返回全部的表单元素, 不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素,因此,它选择的表单元素是最广的。
- jQuery 操作DOM元素:
- attr()控制元素属性:
- 设置或者返回元素的属性,其中
attr(属性名)
格式是获取元素属性名的值,attr(属性名,属性值)
格式则是设置元素属性名的值。
- 设置或者返回元素的属性,其中
- html()和text()操作元素的内容:
- 使用
html()
和text()
方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。 - 二者区别:
html()
方法可以获取元素的HTML内容,因此,原文中的格式代码也被一起获取,而text()
方法只是获取元素中的文本内容,并不包含HTML格式代码。
- 使用
- addClass()和css()操作元素的样式:
- 通过
addClass()
和css()
方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。 - 语法:
- $("#content").addClass("样式1 样式2...")
- $("#content").css({"background-color":"red","color":"white"});要注意有多项时的书写格式-大括号括、冒号
- 二者区别:
- 通过
addClass()
方法为<div>元素增加了样式名称,从而改变了<div>元素的背景和文字颜色,增加多个样式名称时,要用空格隔开。 -
css()方法和addClass方法用法类似,只是需要去设置具体样式了。
- 通过
- 通过
- removeAttr(name)和removeClass(class)移除属性和样式:
- 分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名
- append()向元素内追加内容:
- 向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。
- 语法:
var $html = "<div id='test' title='hi'>我是调用函数创建的</div>";
("body").append(rethtml());
- appendTo()向被选元素内插入内容:
- 语法: $(content).appendTo(selector)
- 注:
- 参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。
- 参数content可以使通过选择器选择出来的元素,也可以使string;
- before()和after()在元素前后插入内容: 使用
before()
和after()
方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容- 语法:
$(selector).before(content)
$(selector).after(content)
- 注: 其中参数content表示插入的内容,该内容可以是元素或HTML字符串。
- ?after()方法和appendTo()有什么区别?
- 语法:
- clone()方法复制元素: 可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,
- 语法:$("selector").clone()
- 注:
- 其中参数selector可以是一个元素或HTML内容。
- 适用clone()方法复制元素,是连其title等元素也一起复制的;
- replaceWith()和replaceAll()替换内容: 都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同
- 语法:
$(selector).replaceWith(content)
$(content).replaceAll(selector)
- 注:
- 替换后旧元素完全被新元素取代;
- 从字面意思即可看出二者区别;
- 语法:
- wrap()和wrapInner()包裹元素和内容:
- 语法:
$(selector).wrap(wrapper)
$(selector).wrapInner(wrapper)
- 参数说明: 参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
- 注:
- 二者区别: 前者用于包裹元素本身,后者则用于包裹元素中的内容
- wrap()即为被选择的元素添加了一个父级标签;
- 语法:
- each()遍历元素: 遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号
- 语法: $(selector).each(function(index))
- 参数说明: 参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。
- eg:
$("span").each(function (index) { if (index == 1) { $(this).attr("class", "red"); } });
- remove()和empty()删除元素:
- 语法:
- $("selector").remove(不填/指定元素eg:".red")
- $(selector).empty()
- 二者区别:
remove()
方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()
方法则只删除所选元素的子元素,而元素本身不删除;
- 语法:
- attr()控制元素属性:
- jQuery 事件与应用:
- 页面加载时触发ready()事件:
- 语法:
$(document).ready(function(){})
等价于$(function(){});
注:
ready()
事件类似于onLoad()
事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()
可以写多个,按顺序执行
- 语法:
- 适用bind()方法绑定元素的事件:
- 语法:$(selector).bind(event,[data] function)
- 参数说明: 参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
- 疑问?为什么要用bind()事件绑定click事件,而不直接在标签里定义click事件?
- 注:
- event 包括如下:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
- 这里用的都是javascript里面的事件方法,而不是JQuery里面的,JQuery里面的事件方法均在JavaScript前面多了一个“on”,比如onclick,onblur 等等
- 使用hover()方法切换事件: 当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切实效果
- 语法:$(selector).hover(over,out)
- 参数说明:over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
- 使用toggle()方法绑定多个函数: 可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,
- 语法: $(selector).toggle(fun1(),fun2(),funN(),...)
- 注:
- 绑定的函数是依次执行的,再循环往复
- toggle()方法支持目前主流稳定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。
- 使用unbind()方法移除元素绑定的事件:
- 语法: $(selector).unbind(event,fun)
- 参数说明:
- 参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。
- 如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
- 使用one()方法绑定元素的一次性事件: 可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次
- 语法: $(selector).one(event,[data],fun)
- 参数说明: 参数event为事件名称,data为触发事件时携带的数据-即所需要触发的函数所需要的参数,fun为触发该事件时执行的函数。
- 调用trigger()方法手动触发指定的事件: 可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件,总之,该事件必须能执行
- 语法: $(selector).trigger(event)
- 文本框的focus()和blur()事件:
- 下拉列表框的change事件: 当一个元素的值发生变化时,将会触发
change
事件 - 调用live()方法绑定元素的事件:
- 语法: $(selector).live(event,[data],fun)
- 参数说明: 参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
- 注:
- 与bind()区别:与
bind()
方法相同,live()
方法与可以绑定元素的可执行事件,除此相同功能之外,live()
方法还可以绑定动态元素,即原本不在body中,而是使用代码增加的元素; - 从 jQuery 1.7 开始,不再建议使用 .live() 方法。1.9不支持.live(),本节代码编辑器里的js引用版本改为了1.8。
- 与bind()区别:与
- 页面加载时触发ready()事件:
- jQuery 动画特效
- 调用show()和hide()方法显示和隐藏元素:
- 语法:
$(selector).hide(speed,[callback])
$(selector).show(speed,[callback])
- 参数说明: 参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
- 语法:
- 调用toggle()方法实现动画切换效果: 如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素
- 语法: $(selector).toggle(speed,[callback])
- 参数说明: 其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
- 调用slideUp()和sildeDown()方法实现滑动效果: 前者用于向上滑动元素,后者用于向下滑动元素
- 语法:
$(selector).slideUp(speed,[callback])
$(selector).slideDown(speed,[callback])
- 注:
slideDown()
仅适用于被隐藏的元素;slideup()
则相反。- 滑动与淡入淡出的区别:滑动改变元素的高度,淡入淡出改变元素的透明度。
- 语法:
- 使用slideToggle()方法实现图片“变脸”效果: 使用
slideToggle()
方法可以切换slideUp()
和slideDown()
,即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动- 语法: $(selector).slideToggle(speed,[callback])
- 使用fadeIn()和fadeOut()方法实现淡入淡出效果: 前者淡入隐藏的元素,后者可以淡出可见的元素
- 语法:
$(selector).fadeIn(speed,[callback])
$(selector).fadeOut(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参数为动画完成时执行的回调函数名。
- 注:
- 用于制作移动位置的动画时: 在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。
- 使用stop()方法停止当前所有动画效果: 方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,
- 语法: $(selector).stop([clearQueue],[goToEnd])
- 参数说明: 其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
- 使用delay()方法延时执行动画效果:
- 语法: $(selector).delay(duration)
- 参数说明: 参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行
- 调用show()和hide()方法显示和隐藏元素:
- jQuery 实现Ajax应用
- 使用load()方法异步请求数据:
- 语法: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文件:
- 语法:
jQuery.getScript(url,[callback])
- 或
$.getScript(url,[callback])
- 语法:
- 使用get()方法以GET方式从服务器获取数据:
- 语法: $.get(url,[callback])
- 使用psot()方法以POST方式从服务器获取数据: 与
get()
方法相比,post()
方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面- 语法: $.post(url,[data],[callback])
- eg:
$.post("http://www.imooc.com/data/check_f.php",{num:$("#txtNumber").val()},function (data) {});
- 使用serialize()方法序列化表单元素: 可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串, 各元素间通过&号相联,直接可用于ajax请求
- 语法: $(selector).serialize()
- 参数说明: selector参数是一个或多个表单中的元素或表单元素本身
- 使用ajax()方法加载服务器数据: 使用
ajax()
方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值- 语法:
jQuery.ajax([settings])
- 或
$.ajax([settings])
- 参数说明: 参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。
- 语法:
- 使用ajaxSetup()方法设置全局Ajac默认选项: 可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值
- 语法:
jQuery.ajaxSetup([options])
- 或
$.ajaxSetup([options])
- 语法:
- 使用ajaxStart()和ajaxStop()方法: 绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数
- 语法:
$(selector).ajaxStart(function())
$(selector).ajaxStop(function())
- 注:可用于添加个loading...的等待动画or文字说明
- 语法:
- 使用load()方法异步请求数据:
- jQuery常用插件
- 表单验证插件--validate: 该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,
- 语法: $(form).validate({options})
- 参数说明: form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。
- 表单插件--form: 通过表单form插件,调用
ajaxForm()
方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据- 语法: $(form). ajaxForm ({options})
- 注:就是调用个表单插件的ajax而已;
- 图片灯箱插件--lightBox: 该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片
- 语法: $(linkimage).lightBox({options})
- 参数说明: 其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
- eg:
$(".divPics a").lightBox({ overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度});
- 图片放大镜插件--jqzoom: 在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的
jqzoom()
方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,即淘宝时的查看宝贝的局部放大的效果;- 语法: $(linkimage).jqzoom({options})
- 参数说明: 其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
- cookie插件--cookie: 使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,
- 语法:
- 保存:
$.cookie(key,value)
; - 读取:
$.cookie(key)
, - 删除:
$.cookie(key,null)
- 保存:
- 参数说明: 其中参数key为保存cookie对象的名称,value为名称对应的cookie值。
- 语法:
- 搜索插件--autocomplete: 搜索插件的功能是通过插件的
autocomplete()
方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择- 语法: $(textbox).autocomplete(urlData,[options]);
- 参数说明: textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。
- 右键菜单插件--contextmenu: 右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作
- 语法: $(selector).contextMenu(menuId,{options});
- 参数说明: Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
- 自定义对象级插件--lifocusolor: 自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色
- 语法: $(Id).focusColor(color)
- 参数说明: 参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。
- 自定义类级别插件--twoaddresult: 可以实现对两个数值进行相加和相减的运算,
- 语法:
$.addNum(p1,p2)
和$.subNum(p1,p2)
- 参数说明: 上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。
- 语法:
- 表单验证插件--validate: 该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,
- jQueryUI型插件
- 拖拽插件--draggable: 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用
draggable()
方法,实现各种拖曳元素的效果- 语法: $(selector). draggable({options})
- 参数说明: options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。
- 放置插件--droppable: 除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,
- 语法: $(selector).droppable({options})
- 参数说明: selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
- 拖拽排序插件--sortable: 功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,
- 语法: $(selector).sortable({options});
- 面板折叠插件--accordion: 面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,
- 语法: $(selector).accordion({options});
- 选项卡插件--tabs: 使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,
- 语法: $(selector).tabs({options});
- 对话框插件--dialog: 对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中
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()
方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。
- 拖拽插件--draggable: 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用
- jQuery工具类函数
- 获取浏览器的名称与版本信息:
- 在jQuery中,通过
$.browser
对象可以获取浏览器的名称和版本信息,如$.browser.chrome
为true,表示当前为Chrome浏览器,$.browser.mozilla
为true,表示当前为火狐浏览器,还可以通过$.browser.version
方式获取浏览器版本信息
- 在jQuery中,通过
- 获取浏览器是否属于W3C盒子模型:
- 浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含,而在jQuery 中,可以通过
$.support.boxModel
对象返回的值,检测浏览器是否属于标准的w3c盒子模型。 - 返回true则属于W3C盒子模型,返回false则属于IE盒子模型;
- 浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含,而在jQuery 中,可以通过
- 检测对象是否为空: 在jQuery中,可以调用名为
$.isEmptyObject
的工具函数,检测一个对象的内容是否为空,如果为空,则该函数返回true,否则,返回false值- 语法: $.isEmptyObject(obj);
- 检测对象是否为原始对象: 调用名为
$.isPlainObject
的工具函数,能检测对象是否为通过{}
或new Object()
关键字创建的原始对象,如果是,返回true,否则,返回false值- 语法: $.isPlainObject (obj);
- 检测两个节点的包含关系: 调用名为
$.contains
的工具函数,能检测在一个DOM节点中是否包含另外一个DOM节点,如果包含,返回true,否则,返回false值- 语法: $.contains (container, contained);
- 字符串操作函数: 调用名为
$.trim
的工具函数,能删除字符串中左右两边的空格符,但该函数不能删除字符串中间的空格,- 语法:$.trim (str);
- URL操作函数: 调用名为
$. param
的工具函数,能使对象或数组按照key/value
格式进行序列化编码,该编码后的值常用于向服务端发送URL请求- 语法: $. param (obj);
- 参数说明: 参数obj表示需要进行序列化的对象,该对象也可以是一个数组,整个函数返回一个经过序列化编码后的字符串。
- param和serialize的区别:前者是对任意的参数进行URL地址格式的转换,而后者仅属于form提交的数据转换
- 使用$.extend()扩展工具函数: 调用名为
$. extend
的工具函数,可以对原有的工具函数进行扩展,自定义类级别的jQuery插件- 语法: $. extend ({options});
- 即自定义个 $.方法名 的函数方法
- eg:注意调用时候的格式
<script type="text/javascript">
/*------------------------------------------------------------/
功能:返回两个数中最小值
参数:数字p1,p2
返回:最小值的一个数
示例:$.MinNum(1,2);
/------------------------------------------------------------*/
(function ($) {
$.extend({
"MinNum": function (p1, p2) {
return (p1 > p2) ? p2 : p1;
}
});
})(jQuery);
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "17与18中最小的数是:";
strTmp +=$.MinNum(17, 18);
//显示在页面中
$(".tip").show().append(strTmp);
});
});
</script>
- 使用$.extend()扩展Object对象: 除使用
$.extend
扩展工具函数外,还可以扩展原有的Object
对象,在扩展对象时,两个对象将进行合并,当存在相同属性名时,后者将覆盖前者- 语法: $. extend (obj1,obj2,…objN);
- eg:
<script type="text/javascript">
$(function () {
var objInfo = { name: "" };
var objMess = { name: "白富美,", title: "欢迎与我联系!" };
var objNewInfo =$.extend(objInfo,objMess);
var strTmp = "<b>对象 白富美 合并后</b>:<br/><br/>";
strTmp += objNewInfo.name + objInfo.title;
//显示在页面中
$(".tip").show().append(strTmp);
});
</script>
- 获取浏览器的名称与版本信息: