jQuery学习（二）

最新推荐文章于 2022-06-26 21:47:26 发布

大辉狼

最新推荐文章于 2022-06-26 21:47:26 发布

阅读量1k

点赞数

分类专栏：前端的Skill 文章标签： jquery callback function 浏览器服务器 object

本文链接：https://blog.csdn.net/wph_1129/article/details/5993290

版权

前端的Skill 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

提高篇 - jQuery中的事件机制

$(document).ready(function)页面载入事件。等同于$。

$("Element").bind("type",[data],function) 表示为某一个元素绑定特定的事件 type：事件类型 data：返回类型（可选） function：普通的就js方法或者JQuery 方法。

$("Element").live(“type”,function) 表示为某一个元素绑定特定的事件，（推荐使用此方法代替上面的bind）

$("Element").unbind([type],function) 表示删除为某一个元素所绑定的某个特定事件。

$("Element").one("type",[data],function) 表示为某一元素绑定一次性的特定事件。ps：与bind方法相似，但是功能差距很大，因为这个事件是一次性的，如果在一个页面中不刷新，绑定的这个事件只能使用一次。

$("Element").trigger("type",[data]) 表示在每个匹配的元素上绑定事件。示例：$("form:first").trigger("submit")表示页面中的第一个form表单提交。我们知道一般将按钮放在form中，点击此按钮才会提交他所在的form表单，如果使用此方法，即使按钮在表单区域之外，也同样会使其提交。另外如果这个按钮有浏览器默认的事件，它也会执行，你设置的事件也会执行。如果要阻止默认事件，那么此方法返回false或者使用下面的的方法都可。

$("Element").triggerHandler("type",[data]) 表示在每个匹配的元素上绑定某类事件,但不会执行浏览器默认的事件

jQuery速成 - 鼠标事件与交互

$("Element").hover(over,out) 表示鼠标悬停事件，当鼠标移入移出选定元素的时候分别触发over和out事件 over：function out：function

$("Element").toggle(function,function) 表示与上面的方法雷同，当鼠标第一次点击的时候触发前者，当鼠标第二次点击的时候触发后者。

鼠标单击：

$("Element").click()

$("Element").click(function)

鼠标双击：

$("Element").dblclick()

$("Element").dblclick(function)

鼠标点击前后：

$("Element").mousedown(function) 表示当鼠标点击后触发，从表面上看类似click事件，其实有本质上的区别。

$("Element").mouseup(function) 表示当鼠标点击释放的时候触发。就是鼠标点击了元素当你松开鼠标按键的时候触发。

鼠标的移动：

$("Element").mouseover(function) 表示鼠标移入选定的元素时触发。

$("Element").mouseout(function) 表示鼠标移出选定的元素时触发。

$("Element").mouseenter(function) 表示当鼠标在移入选定的元素范围的时候触发。与mouseover有很大的区别就是它不冒泡的事

件，点击子元素的时候不会触发父级元素。

$("Element").mouseleave(function) 表示当鼠标移出选定的元素范围的时候触发。与mouseenter一样，不是冒泡事件。

jQuery速成 - 焦点事件

$("Element").focus() 表示触发每一个匹配元素获得焦点事件。

$("Element").focus(function) 表示获取的标签元素事件会在获得焦点的时候触发，既可以是鼠标行为，也可以是按tab键导航触发的行为，并且绑定一个处理方法。

$("Element").blur() 表示每一个匹配元素失去焦点时触发。

$("Element").blur(function) 表示获取的标签元素事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的行为，并且绑定一个处理方法。

$("Element").change() 表示触发每一个匹配元素改变时事件。

$("Element").change(function) 表示在每一个匹配元素的change事件中绑定一个处理函数。

jQuery速成 - 键盘事件

$("Element").keydown() 表示当键盘按下的时候触发此事件。

$("Element").keydown(function) 表示当键盘按下的时候触发此事件，并绑定一个处理方法。

$("Element").keypress() 表示当键盘按下的时候触发此事件。

$("Element").keypress(function) 表示当键盘按下的时候触发此事件，并绑定一个处理方法。

ps：虽然从表面上理解keypress与keydown是一个意思，但二者的本质区别是：系统由keydown返回键盘的代码, 然后由TranslateMessage函数翻译成字符, 由keypress返回字符值. 因此在keydown中返回的是键盘的代码, 而keypress返回的是ASCII字符. 所以根据你的目的, 如果只想读取字符, 用keypress, 如果想读各键的状态, 用keydown。

$("Element").keyup() 表示当键盘按键释放的时候触发。

$("Element").keyup(function) 表示当键盘按键释放的时候触发并绑定一个处理方法。

$("Element").load(type,function) 表示在元素后面绑定一个处理函数，当元素内容加载完毕后自动调用。就如同每次写jQuery的时候都写jQuery，$(document).reday()或者$的方式差不多。
type：事件类型 function:函数体

$("Element").unload(function) 上面的函数相反表示在每一个匹配元素的卸载事件中绑定一个处理函数。比如页面卸载的时候弹出一个警告框。示例：$(document).unload( function () { alert("Bye now!"); } );

$("Element").resize(function) 表示当窗口大小发生改变的时候触发。示例：$(window).resize(function(){alert("你正在试图改变窗口的大小");});

$("Element").scroll(function) 表示当滚动条发生改变的时候触发示例：$(window).scroll(function(){alert("你正在试图改变滚动条");});

$("Element").select() 表示触发每一个匹配元素的select事件，这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。示例：触发所有input元素的select事件，$("input").select();

$("Element").select(function) 表示当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。

$("Element").submit() 表示函数会调用执行绑定到submit事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。示例：$("form:first").submit(); 表示第一个form提交的时候触发。

$("Element").submit(function) 表示在每一个匹配元素的submit事件中绑定一个处理函数。

$("Element").error() 表示这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。

$("Element").error(function) 表示对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。

jQuery速成 - 动画实现的基本方法

$("Element").show()将不可见元素设为可见。

$("Element").show(speed,[callback]) speed为显示速度，推荐为600毫秒为佳 speed：时间，单位毫秒 callback:回调函数（可选）。

$("Element").hide() 将某个元素设置为隐藏。

$("Element").hide(speed,[callback]) speed为显示的速度，推荐为600毫秒为佳 speed：时间，callback：回调函数（可选）。

$("Element").toggle() 切换元素的显示状态，如果元素是可见的，切换为隐藏的；如果是隐藏的，切换为可见的。

$("Element").toggle(speed,[callback]) speed为显示的速度，推荐为600毫秒为佳 speed：时间，callback：回调函数（可选）。

jQuery速成 - 元素的渐隐渐显

$("Element”).fadeIn(speed,[callback]) 通过不透明的变化来实现所有匹配元素的淡入效果，并在动画完成后可选的触发一个回调函数。speed：时间，单位毫秒 callback:回调函数（可选）。

$("Element”).fadeOut(speed,[callback]) 通过不透明的变化来实现所有匹配元素的淡出效果，并在动画完成后可选的触发一个回调函数。speed：时间，单位毫秒 callback:回调函数（可选）。

$("Element”).fadeTo(speed,opacity,[callback]) 把所有匹配的元素的不透明度以渐进的方式调整到指定的不透明度，并在动画完成后可选的触发一个回调函数。speed：时间，单位毫秒 opactity：要调整到的不透明度值（0到1之间的数字，一般小数点后面保留2位）。callback：回调函数（可选）

jQuery速成 - 元素的滑动

$("Element").slideDown(speed,[callback]) 通过高度变化（向下增大）来动态显示所有匹配的元素，在显示完成后可选地触发一个回调函数。speed：时间，单位毫秒 callback：回调函数（可选）

$("Element").slideUp(speed,[callback]) 通过高度变化（像上减小）来动态地隐藏所有匹配的元素，再隐藏完成后可选地触发一个回调函数。speed：时间，单位毫秒 callback：回调函数（可选）

$("Element").slideToggle(speed,[callback]) 相当于以上两个方法的结合，展开后然后在缩小，示例：用200毫秒快速将段落滑上滑下

$("p").slideToggle(200); speed：时间，单位毫秒 callback：回调函数（可选）

jQuery速成 - 自定义动画

$("Element").animate(params[,duration[,easing[,callback]]])

[quote]用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left，如果有不懂得骆驼命名法的朋友请看三种通用CSS规范化命名的规则。

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

duration (String,Number) : (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (Function) : (可选) 在动画完成时执行的函数。

jQuery速成 - 浏览器种类及其特性的检测

$.browser.type        表示此方法用于返回浏览器内核标识。
                                  type:safari/opera/msie/mozilla
                                  type的值分别表示苹果浏览器/opera浏览器/IE浏览器/火狐浏览器

$.browser.version 表示此方法用于返回浏览器渲染引擎版本号【注意：不是浏览器的版本号】。

$.boxModel 表示此方法返回当前页面中浏览器是否使用标准盒模型渲染页面，boolean类型

jQuery速成 - 数组和对象的操作

$.each(object,function) object填写数组对象，function是遍历后的回调函数。

$.eachnd(boolean,object1,object2,[objectN]) boolean布尔值(true/false)。object与function为必填项，此方法主要用于合并两个数组，相同的下标将有第二个数组对象中的值替换第一个数组对象中相同位置的内容。

$.grep(array,function,boolean) array填写数组，function是遍历后的回调函数,boolean设置为true则从数组中排除function中符合条件的选项。

$.makeArray(object) 将【类】数组对象转换为数组对象。

$.map(array,function(i)) 将array:数组通过function:回调函数根据条件转换为一个新数组。

$.inArray(value,array) value:用于在数组中查找是否存在的条件，array待查找的数组。

$.toArray() 把jQuery集合中所有的DOM元素转换成一个数组。

$.merge(object1,object2) 此方法主要用于合并两个数组，相同的下标不会被替换。

$.unique(array) 删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。

$.parseJSON(json) 解析一个【标准的】JSON字符串。

jQuery速成 - 工具杂项

$.noop 就是一个纯粹的空参数，主要用与传递一个空参的时候使用。

$.proxy(function,object) 设置某个时间的特定域。我感觉这个jQuery方法有点像把方法跟方法体（方法的实现）分离开了，通过

proxy指定执行某个方法体。通过真正的应用，感觉这个方法真的是非常有用,返回值为Boolean。

$.contains(obj) 判断一个dom节点是否包含另一个dom节点，返回值为Boolean。

$.isArray(obj) 判断一个对象是否为数组对象，返回值为Boolean。

$.isFunction(obj) 判断一个对象是否为一个方法，返回值为Boolean。

$.isEmptyObject(obj) 判断一个对象是否为空，返回值为Boolean。

$.isPlainObject(obj) 判断一个对象是否仅仅只是一个纯粹的对象，返回值为Boolean。

$.trim(string) 去除字符串的开头与结尾的空格。

$.param() 将表单元数组对象进行序列化，个人感觉在Ajax URL传递方面比较有用。

$.error(message) 接受一个字符串，并且直接抛出一个包含这个字符串的异常。只要针对开发人员在火狐的fireBug插件中使用。

jQuery速成 - Ajax请求

$.load(url,[data],[callback]) 表示载入远程HTML 文件代码并插入至DOM中。 url：待装入HTML页面地址 data(可选)：发送至服务器的key、value(键值对)数据。callBack（可选）：载入成功时回调函数。

$.get(url,[data],[callbcak]) 简单的get请求，url：请求的HTML网页地址 data（可选）：发送至服务器的key、value（键值对）数据。callback（可选）：载入成功时的回调函数。

$.post(url,[data],[callback]) 简单的Post请求，url：请求HTML网页的网址 data（可选）：发送至务器的key、value(键值对)数据。callBack（可选）：载入成功时回调函数。

$.getJSON(url,[data],[callback]) 简单的个体请求载入JSON数据 url：请求的HTML网页地址 data（可选）：发送至服务器的key、value（键值对）数据。callback（可选）：载入成功时的回调函数。

$.getScript(url,[callback]) 简单的GET请求载入script脚本数据并执行 url：请求的HTML网页地址 data（可选）：发送至服务器的key、value（键值对）数据。callback（可选）：载入成功时的回调函数。

ps：JQuery中的回调函数意思是指某个操作执行完成后要执行的函数。

$.Ajax(options) 此方法只用于返回创建的XMLHttpRequest对象，

参数options是可选的其中键值对也都是可选的。

async: Boolean类型此键值对默认情况下为true，也就是异步请求（局部刷新）；如果设置为false，将会变成同步请求，那么此时将会锁住浏览器，用户无法对其进行其他操作，必须等待请求完毕后才会解锁。

global (Boolean类型) 表示是否触发全局，默认为触发（true），Ajax的全局设置将在后面的章节讲，设置全局则表示所有的Ajax将能够使用此全局内容，比如所有的Ajax事件都触发同一个路径。
type (String) : //(默认: "GET") 请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

cache:(Boolean类型) 设置false将不会从浏览器缓存中加载信息，用于jQuery1.2或更高的版本。

contentType:(String类型) //用于设置编码格式，默认为: "application/x-www-form-urlencoded")格式，一般推荐此格式。

ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。

processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象。

timeout (Number) : 设置置请求超时时间（毫秒）。此设置为全局设置。

dataType:(String类型) 用于设置服务器返回的数据类型，但填写的内容也是有限制的，可用值如下：
xml ：设置此值服务器端将XML文档，如果大家对Ajax比较了解，我想大家也知道Ajax中的x代表是什么了吧？因此叫做A(Asynchronous)j(javascript)a(and)x(xml)
html ：服务器返回HTML格式文档,（根据个人理解，如果按照遭上面的理解xml表示x的话，那么此类型不就表示ajah了嘛）。
script ：服务器返回【纯文本】的脚本，不会执行或进行计算。
json ：返回Json格式的文档
text ：返回纯文本

jsonp JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问，比如用户想得到["kwoojan","KwooShung"]，如果设置了jsonp那么服务器将返回callbackFunction(["kwoojan","KwooShung"])
data(String类型) 此方法至关重要，主要用于将数据发送至服务器。格式为键值对，示例：userName=学习&Address=http://www.JQuery.cn/ 那么服务器接受到的userName相对应的值就是“学习” url (String) : (默认: 当前页地址) 发送请求的地址，也就是你的data数据需要被处理的地址。

success (Function) 当Ajax请求成功时，调用此方法，一般用于解析服务器所返回的数据。

error (Function) 求失败时调用此方法。

complete (Function) 当Ajax请求完毕的时候调用此方法。

ps：这么多了，大部分纯限于理论，还是要在实际中多应用啊！