《JQuery实战》第4-9章

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《JQuery实战》第4-9章相关的知识,希望对你有一定的参考价值。

第四章 事件

命令

定义

参数

返回

bind(eventType,data,listener)

在包装集的所有元素上建立函数,作为指定事件类型的事件处理程序

eventType是事件类型的名称;data(可选)是调用者提供的数据;listener是函数

包装集

one(eventType,data,listener)

在包装集的所有元素上建立函数,作为指定事件类型的事件处理程序。一旦执行,事件处理程序就被自动删除

eventType是事件类型的名称;data(可选)是调用者提供的数据;listener是函数

包装集

unbind(eventType,listener)

从包装集的所有元素上删除可选的已传递参数所指定的事件处理程序。如果不提供参数,则删除所有。

eventType是事件类型的名称;listener是函数

包装集

toggle(listenerOdd,listenerEven)

从包装集的所有元素上建立一对click事件处理程序,每当触发click事件就相互切换

listenerOdd充当所有奇数次点击的click事件处理程序;listenerEven充当所有偶数次点击的click事件处理程序

包装集

第五章 用动画和效果来装扮页面

命令

定义

参数

返回

hide(speed,callback)

使包装集的所有元素变为隐藏状态

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,就不产生动画;callback(可选)是在动画完成时调用的函数;

包装集

show(speed,callback)

使包装集的所有元素变为显示状态

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,就不产生动画;callback(可选)是在动画完成时调用的函数;

包装集

toggle(speed,callback)

在任何隐藏的包装集元素上执行show(),在任何非隐藏的包装集元素上执行hide()

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,就不产生动画;callback(可选)是在动画完成时调用的函数;

包装集

fadeOut(speed,callback)

对包装集里任何非隐藏的元素的不透明度逐渐降低到0%

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,则默认normalcallback(可选)是在动画完成时调用的函数;

包装集

fadeIn(speed,callback)

对包装集里任何隐藏的元素的不透明度逐渐提高到初始值

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,则默认normalcallback(可选)是在动画完成时调用的函数;

包装集

fadeTo(speed,opacity,callback)

从当前的设置到opacity所指定的新设置,调整包装集中所有元素的不透明度

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,则默认normalopacity是不透明度,取值范围是0.01.0callback(可选)是在动画完成时调用的函数;

包装集

slideDown(speed,callback)

通过从上到下逐渐扩大元素的垂直面积,使包装集里任何隐藏的元素显示

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,则默认normalcallback(可选)是在动画完成时调用的函数;

包装集

slideUp(speed,callback)

通过从下往上逐渐减小元素的垂直面积,使包装集里任何显示的元素隐藏

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,则默认normalcallback(可选)是在动画完成时调用的函数;

包装集

slideToggle(speed,callback)

在任何隐藏的包装集元素上执行slideDown(),在任何非隐藏的包装集元素上执行slideUp()

speed(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,就不产生动画;callback(可选)是在动画完成时调用的函数;

包装集

stop()

停止当前正在运行的、包装集里的元素的所有动画

包装集

animate(properties,duration,easing,callback)

将propertieseasing参数所指定的动画应用到包装集里的所有元素上

properties是对象,表示在动画结束时所支持的CSS样式应该达到的终值;duration(可选)是表示动画的持续时间,可以是数字(毫秒数)或字符串(slownormalfast),如果省略,就不产生动画;easing(可选)是函数的名称(linearswing)表示动画的缓和效果;callback(可选)是在动画完成时调用的函数;

包装集

animate(properties,option)

将propertiesoption参数所指定的动画应用到包装集里的所有元素上

properties是对象,表示在动画结束时所支持的CSS样式应该达到的终值;options是对象,包括durationeasingcomplete是在动画完成时调用的函数、queue如果为false,动画不会加入队列而立即开始运行

包装集

第六章 JQuery实用工具函数

1、检测用户代理

标志

定义

$.browser

定义一组标志,用来显示当前的用户代理属于哪一个浏览器。Msie:IEmozilla:基于Mozilla的任何浏览器;safari:把浏览器标识为Safari基于Safari的任何浏览器;opera:把浏览器标识为Operaversion:设置为浏览器的呈现引擎的版本号

2、确定方框模型

命令

定义

$.boxModel

通过布尔类型的$.boxModel标志可以知道当前页面使用的是哪一个方框模型:如果页面使用W3C标准的方框模型,被设置为true;如果页面使用IE浏览器的方框模型(有时称为传统方框模型),被设置为false

3、使用JQuery和其他库

命令

定义

参数

返回

$.noConflict()

归还$名称的控制器给另一个库,因此允许在页面上其他库与jQuery混用。一旦这个函数被执行,jQuery功能就必须利用jQuery名称进行调用,而不能利用$名称

未定义

4、操作javascript对象和集合

命令

定义

参数

返回

$.trim(value)

从已传入的字符串里删除任何前导或尾随空白字符并返回结果

value(字符串)将被修整的字符串值。原始的字符串值不会被修改

修整之后的字符串

$.each(container,callback)

对传入的容器的每一项进行迭代,为每一项调用传入的回调函数

container:(数组|对象)一个数组,其每一项将被迭代;或一个对象,其属性将被迭代

callback:(函数)一个回调函数,为容器的各元素而被调用。如果容器是数组,则被数组的每个元素调用回调函数;如果是对象,则为对象的每个属性调用回调函数。回调函数的第一个参数是数组元素的下标或对象属性的名称,第二个参数是对应数组元素或对象属性的值。调用的函数上下文(this)被设置为与第二个参数的值相同

容器对象

$.grep(array,callback,invert)

遍历已传入的数组,为各元素分别调用回调函数

array:(数组)被遍历的数组。检查数组的各元素,决定是否收集到新数组。原始数组不会被该操作以任何方式修改

callback:(函数|字符串)一个回调函数。函数的返回值决定是否收集当前元素。如果invert参数被省略(或设置为false),函数返回true时导致当前元素被收集;如果设置为true,则函数返回false时导致当前元素被收集。函数被传入两个参数:当前元素以及当前元素在原始数组里的下标。callback参数也可以是一个字符串,该字符串会被转换为回调函数。

invert:(布尔型)如果指定为true,则反转函数的正常操作

被收集的元素所构成的数组

$.map(array,callback)

迭代已传入的数组,为数组的各元素分别调用回调函数,并把回调函数的返回值收集到新数组

array:(数组)一个数组。数组的各元素将被分别转换为新数组的各元素

callback:(函数|字符串)一个回调函数。回调函数被传入两个参数:当前元素以及当前元素在原始数组里的下标。callback参数也可以是一个字符串,该字符串会被转换为回调函数。下文讨论有关细节

包装集

$.inArray(value,array)

返回已传入的值在数组里的第一次出现时的下标

value:(对象)搜索数组时的目标值

array:(数组)将被搜索的数组

该值在数组里的第一次出现的下标;如果该值搜索不到,就返回-1

$.makeArray(object)

把已传入的类似数组的对象转换为JavaScript数组

object:(对象)将被转换的类似数组的对象(比如Nodelist

作为结果的JavaScript数组

$.unique(array)

传入DOM元素的数组,该函数就返回原始数组中的唯一的元素所构成的数组

array:(数组)将被检查的DOM元素的数组

DOM元素的数组,由原始数组中的唯一的元素所构成

$.extend(target,source1,source2,...,sourceN)

用已传入的source1...sourceN对象的属性来扩展已传入的target对象

target:(对象)目标对象,jQuery用源对象的属性来扩展目标对象的属性。jQuery用新的属性直接修改目标对象,然后把目标对象作为函数的值返回。与任何一个源对象的属性名称相同的、目标对象的任何属性,被覆盖为源对象的属性值

source1...sourceN:(对象)一个或多个源对象,这些对象的属性被添加到目标对象。如果提供多个源对象,而源对象之间存在同名属性,则处于实参列表后部的源对象优先于处在实参列表前部的源对象

扩展之后的目标对象

5、动态加载脚本

命令

定义

参数

返回

$.getScript(url,callback)

向指定的服务器发起GET请求,获取url参数所指定的脚步。(可选地)在成功地获取脚本时调用回调函数

url:(字符串)将要获取的脚本文件的URL

callback:(函数)在脚本资源已被加载和求值后调用的回调函数(可选)。给回调函数传递下列参数:从资源加载的文本;字符串success

用于获取脚本的XHRXMLHttpRequestXML HTTP请求)实例

第七章 用自定义插件来扩展JQuery

1、选项散列对象:多个可选参数被集中到单个参数(JavaScriptObject实例),Object实例的“名称/值对”作为多个可选参数。

2、日期格式器

命令

定义

参数

返回

$.formatDate(data,pettern)

对已传入日期根据提供的模式进行格式化。

data:(日期)将被格式化的日期

pattern:(字符串)用来对日期进行格式化的模式。不匹配模式标识的任何字符串被原样地复制到结果中

已格式化的日期

3、创建包装器:$.fn.wrapperFunctionName=function(params){//function body},在方法体内,函数上下文(this)引用包装集,而且可以在包装集上调用所有预定义的JQuery命令。

4、电子相册

命令

定义

参数

返回

photomatic(settings)

设置缩略图的包装集以及在settings散列对象里所标识的页面元素

settings:(对象)一个散列对象。指定电子相册的各种设置

包装集

第八章 利用Ajax与服务器交谈

命令

定义

参数

返回

load(url,parameters,callback)

有可选的参数,向指定的URL发起Ajax请求。可以指定回调函数,在请求完成时调用。响应文本将替代所有已匹配元素的内容

url:(字符串)服务器端资源的URL,正式向它而发送的请求

parameter:(对象)一个对象,其属性被序列化为正确地编码的参数以便传递到请求里。

callback:(函数)一个回调函数,在响应数据已加载到包装集元素之后被调用。传入这个函数的参数是响应文本,状态码,以及XHR实例

包装集

serialize()

根据包装集里所有的成功表单元素,创建正确格式化的、经过URI编码的查询字符串

已格式化的查询字符串

serializeArray()

把所有的成功表单控件的值都收集到对象的数组中(包含)控件的名称和值

表单数据的数组

$.get(url,parameters,callback)

利用指定的URL、带着任何已传入的参数作为查询字符串而向服务器发起GET请求

url:(字符串)将要通过GET方法进行交互的服务器端资源的URL

parameters:(对象/字符串)一个对象,其属性作为“名称/值对”用于构造查询字符串并追加到URL;或者一个预先格式化的和URL编码的查询字符串。

callback:(函数)回调函数,在请求完成时被调用。响应体作为第一个参数传递到这个回调函数,响应状态则作为第二个参数传递到这个回调函数

XHR实例

$.getJSON(url,parameters,callback)

利用指定的URL、带着任何已传入参数作为查询字符串而向服务器发起GET请求。响应被解析为JSON字符串,而作为结果的数据将被传递给回调函数

url:(字符串)将要通过GET方法进行交互的服务器端资源的URL

parame:(对象/字符串)一个对象,其属性作为“名称/值对”用于构造查询字符串并追加到URL;或者一个预格式化和URL编码的查询字符串

callback:(函数)回调函数,在请求完成时被调用。把响应体解析为JSON字符串,这个字符串的值作为第一个参数传递到这个回调函数,响应状态作为第二个参数传递到这个回调函数

XHR实例

$.post(url,parameters,callback)

利用指定的URL、带着任何包含在请求体内的已传递参数向服务器发起POST请求

url:(字符串)将要通过POST方法进行交互的服务器资源的URL

parameters:(对象/字符串)一个对象,其属性作为“名称/  值对”用于构造请求体;或者一个预先格式化和URI编码的查询字符串

callback:(函数)回调函数,在请求完成时被调用。响应体作为第一个参数传递到回调函数,状态码作为第二个参数传递到回调函数

XHR实例

$.ajax(option)

利用已传递的选项(控制如何生成请求以及如何通知回调函数)来发起Ajax请求

options:(对象)一个对象实例,其属性定义这个操作的参数

XHR实例

$.ajaxSetup(properties)

为后续的$.ajax()调用的,把传入的一组属性为默认值

properties:(对象)对象实例,其属性定义一组默认的Ajax属性。

未定义

ajaxStart(callback),

ajaxSend(callback),

ajaxSuccess(callback),

ajaxError(callback),

ajaxComplete(callback),

ajaxStop(callback)

把传入的回调函数附加到所有匹配元素上,一旦到达Ajax请求处理的指定时刻就触发回调函数

callback:(函数)将被附加的回调函数。

包装集

第九章 卓越、强大和实用的插件

1、成功控件:决定某个控件的值是否有意义,以及是否应该作为表单的一部分而被提交

2、表单插件

命令

定义

参数

返回

fieldValue(excludeUnsuccessful)

收集包装集里的所有成功表单控件的值,并且返回这些值所构成的字符串数组。如果未找到任何值,就返回一个空数组

excludeUnsuccessful:(布尔型)如果省略(或设置为true),则指定包装集里任何不成功控件被忽略

已收集的值所构成的字符串数组

formSerialize(semantic)

从已包装表单的所有成功控件的值来创建和返回适当地格式化的、已编码的查询字符串

semantic:(布尔型)如果设为true,则查询字符串里的各个值遵守各个元素的语义顺序,即在表单里元素被声明的顺序。如果为false,则为随机顺序。按语义排序将比随机排序慢得多

生成的查询字符串

fieldSerialize(excludeUnsuccessful)

从已包装表单的控件的值来创建和返回适当地格式化的、已编码的查询字符串

excludeUnsuccessful:(布尔型)如果省略(或设为true),则指定包装集的任何不成功控件被忽略

生成的查询字符串

clearForm()

清除包装集里任何控件的值,或包装集元素的后代节点

包装集

resetForm()

调用包装集里表单元素的原生reset()方法

包装集

ajaxSubmit(options)

利用包装集里表单的成功控件来生成Ajax请求。参数options可以用来指定可选的设置,或者这些设置可以默认为下表所描述的值

options:(对象|函数)一个散列对象(可选),包含如表9-1所描述的属性;如果想要设置的选项只是成功回调函数,可以直接传递成功回调函数而无需传递散列对象

包装集

ajaxForm(options)

设置目标表单以便在触发表单提交时,把提交重路由为ajaxSubmit()命令所发起的Ajax请求。传递给这个方法的参数options被传递给ajaxSubmit()调用

options:(对象|函数)一个散列对象(可选),包含如表9-1所秒速的属性;如果想要的选项只是成功回调函数,可以传递成功回调函数而不必传递散列对象

包装集

ajaxFormUnbind()

删除应用到包装集里表单上的设置,以便表单提交能够以正常方式进行

包装集

2、尺寸插件

命令

定义

参数

返回

width(),height()

返回包装集里第一个元素、窗口或文档对象的宽度。如果第一个包装元素不是窗口或文档,就调用核心jQuery命令。

返回包装集里第一个元素、窗口或文档对象的告诉,如果........(同上)

窗口、文档或元素的宽度、高度

innerWidth(),

innerHeight()

返回包装集里第一个元素的内部宽度或高度。内部尺度包括内容和应用到元素上的内边距

包装集里第一个元素的内部宽度或高度

outerWidth(),

outerHeight()

返回包装集里第一个元素的外部宽度或高度。外部尺度包括内容和应用到元素的内边距和边框

options:(对象)一个散列对象。这个散列对象接受单个选项,即外边距,指定是否应该把外边距计算进去,默认为false

包装集里第一个元素的外部宽度或高度

scrollTop(),

scrollLeft()

获取或设置窗口、文档或可滚动内容的尺度。滚动元素是包含内容的元素(带有CSS样式值为overflowoverflox-xoverflow-yscrollauto特性)

value:(数组)设置滚动顶边或左边尺寸的值,以像素为单位。无法识别的值被默认为0。如果省略,则获取并返回顶边或左边滚动尺寸的当前值

如果提供value参数,则返回包装集。否则,返回被请求的尺寸

offsetParent

返回包装集里第一个元素的偏移父元素(定位上下文)。这是带有relativeabsoluteposition值、离得最近的祖先元素,或<body>元素(如果没有找到那样的祖先元素)。这个方法只该应用到可见元素上.

偏移父元素

offset(options,results)

返回包装集里第一个元素的偏移信息。在默认情况下,返回相应于<body>元素的偏移信息,而偏移信息的计算方法由options参数的设置进行控制

options:(对象)一个散列对象,包含控制offset方法如何执行计算机的设置。

results:(对象)一个可选的对象。用来接收offset方法的结果。如果省略,则创建新对象、填充结果并作为offset方法的值而返回;如果指定,则给传入的对象增加结果属性,并从offset方法返回包装集。

如果指定results对象,则返回包装集;如果不指定,则返回results对象。

3、实时查询插件

命令

定义

参数

返回

livequery(event,listener)

建立一个函数作为指定事件类型的事件处理程序,既在匹配集里所有的元素上,也在随后与匹配集的选择器相匹配的任何元素上

Event:(字符串)为哪一个事件类型建立监听器。与jQuerybind()命令所使用的那组事件类型相同

Listener:(函数)将要建立为事件监听器的函数。每个调用的函数上下文(this)是当前的匹配元素

包装集

livequery(onmatch,onmismatch)

为匹配集建立回调函数,在元素进入或脱离匹配选择器的状态时调用

Onmatch:(函数)指定一个函数作为匹配监听器。这个函数为进入匹配状态的任何元素(建立为函数上下文)而被调用。如果在调用这个方法时任何现有元素匹配选择器,则这个函数会为每个这个的元素而被立即调用

Onmismatch:(函数)指定一个(可选的)函数作为不匹配监听器。这个函数为脱离匹配状态的任何元素(建立为函数上下文)而被调用。如果省略,则不建立任何不匹配监听器

包装集

$.livequery.run()

强制Live Query执行元素的全局求值:触发任何适当的监听器。如果变化是在jQuery方法的控制之外实现的,这个函数就能派上用场

未定义

expire(),

expire(event,listener),

expire(onmatch,onmismatch)

删除与匹配集的选择器相关联的监听器

Event:(字符串)指定要取消绑定的事件类型的事件监听器。如果不指定监听器,所有该事件类型的监听器将被删除

Listener:(函数)如果指定,则只有特定的监听器从选择器中取消绑定(为特定的事件类型)

Onmatch:(函数)指定将从选择器中取消绑定的匹配监听器

Mismatch:(函数)(可选地)指定将从选择器中取消绑定的不匹配的监听器

包装集

4、UI插件

命令

定义

参数

返回

draggable(options)

根据指定的选项,使包装集的元素变得可拖动

Options:(对象)包含多个选项的散列对象。这些选项被应用于可拖动元素,如表9-2所描述。如果不指定选项,则元素可以在窗口内各处自由地拖动

包装集

draggableDestroy()

删除包装集元素的可拖动性

包装集

draggableDisable()

挂起包装集的可拖动元素的可拖动性,而不删除可拖动性信息或选项

包装集

draggableEnable()

对于被draggableDisable()禁用了可拖动的包装集里任何可拖动元素,还原可拖动性

包装集

droppable(options)

把包装集里的元素建立为可放置元素(可放置元素,是指上面可以放置可拖动元素的元素)

Options:(对象)应用于可放置元素的各种选项。

包装集

droppableDestroy()

删除包装集里所有元素的作为可放置元素的功能

包装集

droppableDisable()

挂起包装集可放置元素的可放置性,而不删除可放置性的信息或选项

包装集

droppableEnable()

还原已被droppableDisable()所禁用的包装集里任何可放置元素的可放置性

包装集

以上是关于《JQuery实战》第4-9章的主要内容,如果未能解决你的问题,请参考以下文章

《jQuery实战(第二版)》读书笔记

PHP职场之面试实战指南-面试技巧考官思路

20200109 《jQuery基础教程》归档

《锋利的jQuery(第2版)》笔记-第1章-认识jQuery

第4章WEB04- JQuery篇

锋利的jQuery第2版学习笔记45章