[关闭]
@EncyKe 2015-11-16T08:49:20.000000Z 字数 14827 阅读 5543

jQuery

前端 JavaScript


一、简介

官网 参考手册
环境搭配:目前稳定版本是v1.9.0。head引入:

  1. <script language="javascript" type="text/javascript" src="1.9.0/jquery.js"></script>

二、选择器

0. 选择操作

$()就是jQuery中的函数,它的功能是获得()中指定的标签元素,也可以是函数。

注意:$()=jQuery(),前者比较常用,是后者的简写。一般只在$()与其它语言冲突时才用jQuery()

1. 基础选择器

1) id选择器:

$("#id")

2) 元素选择器:

$("element")

3) 类选择器:

$(".class")

4) 全部选择器:

$("*")

5) 多元素选择器:

类、id和元素可混用,以逗号,隔开,实现一起选择:$("sele1, sele2, seleN")

6) 层次性选择器:

$("祖元素 子元素")$("父元素>子元素")$("前元素+后元素")$("祖元素 ~ 后众兄弟元素")

2. 过滤选择器

1) :first:last过滤选择器

获取第一个或最后一个元素,常常与其它选择器一起使用;:前的元素为子元素,如li

2) :eq(index)过滤选择器

按顺序获取元素;参数index表示索引号(即整数),从0开始。

3) :contains('text')过滤选择器

获取包含指定字符串的全部元素,常与其他元素结合使用;参数text表示页面中的文字,需用''包裹。

4) :has(selector)过滤选择器

获取元素名称实现过滤;selector需用''包裹。

5) :hidden过滤选择器

获取全部不可见的元素(包括type属性值为hidden的元素)。

6) :visible过滤选择器

获取全部可见的元素,即非display:none;的元素。

7) :first-child:last-child过滤选择器

获取每个父元素中返回的首个子元素,为集合。

8) [attribute=value]属性选择器

参数attribute表示属性名称,value参数表示属性值,需用''包裹。[]前要有元素选择器等。

9) [attribute!=value]属性选择器

获取不包含属性名,或者与属性名和属性值不相同的全部元素。

10) [attribute*=value]属性选择器

获取属性值中包含指定内容的全部元素。即有含一个字符即可。

3. 表单选择器

1) :input表单选择器

获取全部的表单元素,包括所有<input><textarea><select><button>,其选择的表单元素是最广的;:前必须空格,空格前一般放置<form>的选择符。

2) :text表单文本选择器

获取表单中全部单行的文本输入框元素。

3) :password表单密码选择器

获取密码输入文本框。

4) :radio单选按钮选择器

获取表单中的全部单选按钮元素。

5) :checkbox复选框选择器

获取表单中的复选框元素。

6) :submit提交按钮选择器

获取表单中的提交按钮元素(一般一个表单中只允许有一个type="submit"的提交按钮)。

7) :image图像域选择器

获取全部图像域按钮type="image"
注意::image选择器只能获取<input>图像域,不能获取<img>

8) :button表单按钮选择器

获取<input type="button"><button>这两类按钮元素。

9) :checked选中状态选择器

获取处于选中状态的全部元素(checked="checked")。

10) :selected选中状态选择器

获取<select>下拉列表框中全部处于选中状态(selected="selected")的<option>选项元素。

三、DOM操作

1. attr()方法控制元素的属性

获取元素属性:attr("属性名")
设置元素属性:attr("属性名","属性值")

2. html()text()方法操作元素的内容

获取元素内容:两个方法的参数为空,html()text()
设置元素内容:传入参数,html("文本")text("文本")
区别:html()可获取元素的HTML内容,原文中的格式代码也被一起获取,而text()只获取元素中的文本内容,并不包含HTML格式代码。

3. css()addClass()操作元素样式

添加类名:addClass("类名")
直接设置元素样式:css("样式", "属性值")
设置多条样式声明可以css("样式1", "属性值2").css("样式2", "属性值2")或者css({"样式1":"属性值1","样式2":"属性值2"})

4. removeAttr()removeClass()移除属性和样式

语法:removeAttr("属性名")removeClass("类名")

5. append()向元素内追加内容

语法:append(content)

被追加的content参数,可以是字符、HTML元素标记(均需''包裹)或变量、返回字符串内容的函数。

6. appendTo()向被选元素内插入内容

语法:$(content).appendTo(selector)

7. before()after()在元素前后插入内容

语法:$(selector).before(content)$(selector).after(content)

表示在整个元素的前面和后面插入指定的元素或内容(含html格式)。

8. clone()复制元素

语法:$(selector).clone()

参数selector可以是一个元素或HTML内容。

9. replaceWith()replaceAll()替换内容

语法:$(selector).replaceWith(content)$(content).replaceAll(selector)

10. wrap()wrapInner()包裹元素和内容

语法:$(selector).wrap(wrapper)$(selector).wrapInner(wrapper)

参数selector为被包裹的元素,wrapper参数为包裹元素的格式。

11. each()遍历元素

遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号。
语法:$(selector).each(function(index))

参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。

  1. $("span").each(
  2. function (index)
  3. {
  4. if (index == 1)
  5. {
  6. $(this).attr("class", "red");
  7. }
  8. }
  9. );

12. remove()empty()删除元素

区别:remove()删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素;empty()则只删除所选元素的子元素。

四、事件

1. ready()页面加载时触发事件

ready()事件类似于onLoad()事件,前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发;
ready()可以写多个,按顺序执行。
语法:$(document).ready(function(){})等价于$(function(){});

2. bind()绑定元素的事件

语法:$(selector).bind(event,[data] function)

参数event为事件名称,需用''包裹,多个事件名称用空格隔开,function为事件执行的函数。

3. hover()切换事件

当鼠标移到所选元素上时,执行第一个函数,鼠标移出时,执行第二个函数,实现事件切换效果。

语法:$(selector).hover(over,out);

over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。

4. toggle()绑定多个函数

语法:`$(selector).toggle(fun1(),fun2(),funN(),...)

fun1,fun2是多个函数的名称

注意:toggle()支持目前主流稳定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。

5. unbind()移除元素绑定的事件

语法:$(selector).unbind(event,fun)

参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。

6. one()绑定元素的一次性事件

绑定元素任何有效的事件,但绑定的事件只会触发一。
语法:$(selector).one(event,[data],fun)

参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。

7. trigger()手动触发指定的事件

直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件。
语法:$(selector).trigger(event)

event参数为需要手动触发的事件名称。

8. live()绑定元素的事件

bind()相同,live()可绑定元素的可执行事件,除此相同功能之外,live()还可以绑定动态元素,即使用代码添加的元素事件。

语法:$(selector).live(event,[data],fun)

参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。

注意:从jQuery 1.7开始,不再建议使用.live()。1.9不支持.live()

五、动效

1. show()hide()显示和隐藏元素

语法:$(selector).hide(speed,[callback])$(selector).show(speed,[callback])

参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

2. toggle()实现动画切换效果

语法:$(selector).toggle(speed,[callback])

speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。

可与show()hide()配合使用。

3. 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()实现淡入淡出效果

淡入隐藏的元素或者淡出可见的元素。
语法:$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])

参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。

6. fadeTo()设置淡入淡出效果的不透明度

语法:$(selector).fadeTo(speed,opacity,[callback])

speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名。

7. animate()制作动画效果

语法:$(selector).animate({params},speed,[callback])

params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。

1) 尺寸变化

制作简单变化尺寸的动画,params参数设置widthheight值即可;

  1. $("span").animate(
  2. {
  3. width: "80px",
  4. height: "80px"
  5. },
  6. 3000, function ()
  7. {
  8. $("#tip").html("执行完成!");
  9. }
  10. );

2) 位置移动

制作移动位置的动画,必须设置被移元素position:absolute/relative。params参数设置lefttop等:

  1. left: "+=100px"

8. stop()停止当前所有动画效果

在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画。

语法:$(selector).stop([clearQueue],[goToEnd])

两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。

9. delay()延时执行动画效果

语法:$(selector).delay(duration)

参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。

六、Ajax应用

1. load()异步请求数据

通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中:
语法:load(url,[data],[callback])

 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

2. getJSON()异步加载JSON数据

通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中:
语法:jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

3. getScript()异步加载并执行JS文件

异步请求并执行服务器中的JavaScript文件:
语法:jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

4. get()以GET方式从服务器获取数据

采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据:
语法:$.get(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

5. post()以POST方式从服务器发送数据

向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面:
语法:$.post(url,[data],[callback])

参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。

6. serialize()序列化表单元素值

将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求:
语法:$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

7. ajax()加载服务器数据

该法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值:
语法:jQuery.ajax([settings])或$.ajax([settings])

参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。

8. ajaxSetup()设置全局Ajax默认选项

设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值:
语法:jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。

9. ajaxStart()ajaxStop()绑定Ajax事件

ajaxStart()用于在Ajax请求发出前触发函数,ajaxStop()用于在Ajax请求完成后触发函数:
语法:$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。

七、插件

1. 表单验证插件validate

自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,还允许自定义验证规则:
语法:$(form).validate({options})

form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

示例:

  1. $(function () {
  2. $("#frmV").validate(
  3. {
  4. /*自定义验证规则*/
  5. rules: {
  6. email:{
  7. required:true,
  8. email:true
  9. }
  10. },
  11. /*错误提示位置*/
  12. errorPlacement: function (error, element) {
  13. error.appendTo(".tip");
  14. }
  15. }
  16. );
  17. });

2. 表单插件form

调用ajaxForm()实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据:
语法:$(form). ajaxForm ({options})

form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。

3. 图片灯箱插件lightBox

用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片:
语法:$(linkimage).lightBox({options})

linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

示例:

  1. $(function () {
  2. $('div a').lightBox({
  3. overlayBgColor: "#666", //图片浏览时的背景色
  4. overlayOpacity: 0.5, //背景色的透明度
  5. containerResizeSpeed: 600 //图片切换时的速度
  6. })
  7. });

4. 图片放大镜插件jqzoom

需要准备一大一小两张一样的图片,在页面的<a>href放置小图片,<a>中的<img>跟随大图片;当鼠标在小图片中移动时,调用该插件的jqzoom()显示与小图片相同的大图片区域,从而实现放大镜的效果:
语法:$(linkimage).jqzoom({options})

linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

示例:

  1. $(function () {
  2. $("div a").jqzoom({//绑定图片放大插件jqzoom
  3. zoomWidth: 123, //小图片所选区域的宽
  4. zoomHeight: 123, //小图片所选区域的高
  5. zoomType: 'reverse' //设置放大镜的类型
  6. });
  7. });

5. cookie插件cookie

通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录:
语法:

  1. $.cookie(keyvalue);//保存
  2. $.cookie(key);//读取
  3. $.cookie(keynull);//删除

参数key为保存cookie对象的名称,value为名称对应的cookie值。

6. 搜索插件autocomplete

当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择:
语法:$(textbox).autocomplete(urlData,[options]);

textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。

示例:

  1. $(function () {
  2. var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
  3. $("#txtSearch").autocomplete(arrUserName,{
  4. minChars: 0, //双击空白文本框时显示全部提示数据
  5. formatItem: function (data, i, total) {
  6. return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
  7. },
  8. formatMatch: function (data, i, total) {
  9. return data[0];
  10. },
  11. formatResult: function (data) {
  12. return data[0];
  13. }
  14. }).result(SearchCallback);
  15. function SearchCallback(event, data, formatted) {
  16. $(".tip").show().html("您的选择是:" + (!data ? "空" : formatted));
  17. }
  18. });

7. 右键菜单插件contextMenu

绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作:
语法:$(selector).contextMenu(menuId,{options});

Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。

示例:

  1. <div id="divtest">
  2. <div class="contextMenu" id="sysMenu">
  3. <ul>
  4. <li id="Li1"><img />保存</li>
  5. <li id="Li2"><img />退出</li>
  6. </ul>
  7. </div>
  8. </div>
  1. $(function () {
  2. $(".title").contextMenu("sysMenu",
  3. { bindings:
  4. {
  5. 'Li1': function (Item) {
  6. $(".tip").show().html("您点击了“保存”项");
  7. },
  8. 'Li2': function (Item) {
  9. $(".tip").show().html("您点击了“退出”项");
  10. }
  11. }
  12. });
  13. });

8. 自定义对象级插件focusColor

可以在<ul>元素中,鼠标在<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色:
语法:$(Id).focusColor(color)

参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。

9. 自定义类级别插件

实现对两个数值进行相加和相减的运算,导入插件后:
语法:$.addNum(p1,p2)$.subNum(p1,p2)

上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。

10. 拖曳插件draggable

拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,通过调用draggable()可实现各种拖曳元素的效果:
语法:$(selector). draggable({options})

options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。

11. 放置插件droppable

可将拖曳后的任意元素放置在指定区域中:
语法:$(selector).droppable({options})

selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。

12. 拖曳排序插件sortable

将序列元素(例如<option><li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能:
语法:$(selector).sortable({options});

selector参数为进行拖曳排序的元素,options为调用方法时的配置对象,

示例:

  1. $(function () {
  2. $("ul").sortable({
  3. delay:3, //拖动延迟3秒以防与点击事件冲突
  4. opacity:0.35 //拖动元素以0.35透明度显示
  5. })
  6. });

13. 面板折叠插件accordion

点击标题时展开内容,再点另一标题时,关闭已展开的内容:
语法:$(selector).accordion({options});

参数selector为整个面板元素,options参数为方法对应的配置对象。

14. 选项卡插件tabs

可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的href属性设置选项标题对应的内容:
语法:$(selector).tabs({options});

selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。
配置对象中,通过“fx”属性设置了选项卡切换时的效果,“event”属性设置鼠标也可以切换选项卡,

示例:

  1. <div id="divtest">
  2. <div id="tabs">
  3. <ul>
  4. <li><a href="#tabs-1">最爱吃的水果</a></li>
  5. <li><a href="#tabs-2">最喜欢的运动</a></li>
  6. </ul>
  7. <div id="tabs-1">
  8. <p>橘子</p>
  9. <p>香蕉</p>
  10. <p>葡萄</p>
  11. <p>苹果</p>
  12. <p>西瓜</p>
  13. </div>
  14. <div id="tabs-2">
  15. <p>足球</p>
  16. <p>散步</p>
  17. <p>篮球</p>
  18. <p>乒乓球</p>
  19. <p>骑自行车</p>
  20. </div>
  21. </div>
  22. </div>
  23. <script type="text/javascript">
  24. $(function () {
  25. $("#tabs").tabs ({
  26. //设置各选项卡在切换时的动画效果
  27. fx: { opacity: "toggle", height: "toggle" },
  28. event: "mousemove" //通过移动鼠标事件切换选项卡
  29. })
  30. });
  31. </script>

15. 对话框插件dialog

可以用动画的效果弹出多种类型的对话框,实现JS代码中alert()confirm()函数的功能:
语法:$(selector).dialog({options});

selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

16. 菜单工具插件menu

可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标:
语法:$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素,options为menu()的配置对象。

17. 微调按钮插件spinner

能在文本框中直接输入数值,也可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值:
语法:$(selector).spinner({options});

selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。

18. 工具提示插件tooltip

可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置:
语法:$(selector).tooltip({options});

selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。

八、工具函数

1. 获取浏览器的名称与版本信息

通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome=true,表示当前为Chrome,$.browser.mozilla=true,表示当前为火狐,还可以通过$.browser.version方式获取浏览器版本信息。

示例:

  1. $(function () {
  2. var strTmp = "您的浏览器名称是:";
  3. if ($.browser.chrome) { //谷歌浏览器
  4. strTmp += "Chrome";
  5. }
  6. if ($.browser.mozilla) { //火狐相关浏览器
  7. strTmp += "Mozilla FireFox";
  8. }
  9. strTmp += "<br /><br /> 版本号是:" + $.browser.version;
  10. $(".content").html(strTmp);
  11. });

2. 检测浏览器是否属于W3C盒子模型

浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含。
而在jQuery 中,$.support.boxModel=true说明属于标准的w3c盒子模型。

3. 检测对象是否为空

$.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表示自定义插件的函数内容。

还可以扩展原有的Object对象,在扩展对象时,两个对象将进行合并,当存在相同属性名时,后者将覆盖前者:
语法:$. extend (obj1,obj2,…objN);

参数obj1至objN表示需要合并的各个原有对象。

当两个对象通过$.extend()函数扩展合并后,返回一个包含两个对象中全部属性元素的新对象,相同名称的“name”属性,前者被后者覆盖。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注