jQuery小记

jQuery库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。

基础语法:$(selector).action()

//在文档完全加载之后运行jQuery执行函数,在DOM加载完成后对DOM进行操作。
$(document).ready(function(){...})
$(function(){}) 同上
$(this)当前元素

jQuery选择器允许您对HTML元素组或单个元素进行操作。

jQuery选择器基于元素的id\类\类型\属性\属性值等进行查找(基于CSS选择器)

jQuery中所有选择器都以美元符号开头:$()

页面对不同访问者的响应叫做事件。

常见 DOM 事件:

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter/mouseleave keyup focus scroll
mousedown/mouseup blur unload
hover

hover会触发两个函数:移动到元素上mouseenter,移除元素mouseleave

$().hover(
	function(){...}, //mouseenter
  function(){...}  //mouseleave
)

foucs当元素获得焦点时,发生focus事件。blur当元素失去焦点时,发生blur事件。

jQuery效果

隐藏和显示

hide/show:通过这两个方法来隐藏和显示HTML元素。

使用toggle方法来切换hide()和show()方法。

$(selector).hide(speed,'过渡函数',callback)
$(selector).show(speed,'过渡函数',callback) //参数都是可选的
$(selector).toggle(speed,'过渡函数',callback)
$(selector).fadeIn(speed,callback) //其他方法一样fadeout/fadetoggle
$(selector).fadeTo(speed,opacity,callback)//speed/opacity必须
//fadeTo方法允许渐变为给定的不透明度
$(selector).slideDown(speed,callback)//up/toggle

淡入淡出

jQuery拥有四种fade方法:fadeIn/fadeOut/fadeToggle/fadeTo

fadeToggle方法可以在fadeIn/fadeOut方法之间进行切换。

滑动

jQuery拥有的滑动方法:slideDown/slideUp/slideToggle。slideToggle在down和up之间进行切换。

动画

jQuery animate方法创建自定义的动画。

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

**params参数(必须)定义形成动画的CSS属性。CSS属性可以是多个。**speed可选

animate方法几乎可以操作所有的CSS属性。属性名要使用驼峰式。色彩动画不在核心jQuery库。可以使用相对值(+=/-=),也可以把属性的动画值设置为show/hide/toggle。动画可以是一个队列,多个动画依次执行。

jQuery stop()用于在动画或效果完成之前对它们进行停止。stop()方法适用于所有jQuery效果动画,包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd)

callback方法

callback函数在当前动画100%完成之后执行。

链(Chaining)

通过jQuery可以把动作和方法链接在一起。Chaining允许我们在一条语句中运行多个jQuery方法(同一个元素)。

用于DOM操作的jQuery方法:

  • text() 设置或返回所选元素的文本内容 ,只输出标签内的文本内容
  • html()设置或返回所选元素的内容,包括被选元素内的标签。
  • val() 设置或返回表单字段的值,用于表单元素
  • attr()设置或返回属性值,可以同时设置多个属性

text/html/val/attr同样拥有回调函数,回调函数有两个参数:被选元素列表中当前元素的下标,以及原始值。

添加/删除元素

四个添加新内容的jQuery方法:

  • append()在被选元素的结尾插入内容 仍然在该元素的内部
  • prepend()在被选元素的开头插入内容 仍然在该元素的内部
  • after()在被选元素之后插入 元素外
  • before()在被选元素之前插入 元素外

删除元素的方法:

  • remove() 删除被选元素(及其子元素) ,可以接受一个参数,对被删元素进行过滤。
  • empty()从被选元素中删除子元素

获取并设置CSS类

  • addClass() 向被选元素添加一个或多个类
  • removeClass()从被选元素删除一个或多个类
  • toggleClass()对被选元素进行添加/删除类的切换操作
  • css()设置或返回样式属性 ,可以设置多个CSS属性。

尺寸

尺寸处理方法:width/height/innerWidth/innerHeight/outerWidth/outerHeight

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hSjOK8Ep-1591951300936)(/Users/yanggongfu/Desktop/typora/前端/JS/jquery.assets/img_jquerydim.gif)]

遍历

祖先
  • parent() 直接父元素
  • parents(param)被选元素的所有祖先元素,直到文档的根元素(),param参数用来过滤对祖先元素的搜索
  • parentUntil()返回介于两个给定元素之间的所有祖先元素。
后代
  • children(param)返回被选元素的所有直接子元素,param参数进行过滤
  • find()返回被选元素的后代元素,一路向下直到最后一个后代
同胞
  • siblings(param)返回被选元素的所有同胞元素,param参数进行过滤筛选
  • next/nextAll/nextUntil
  • prev/prevAll/prevUntil
过滤
  • first/last
  • eq() 返回被选元素中带有指定索引号的元素,索引从0开始。
  • filter 返回匹配的元素
  • not 返回不匹配的元素

AJAX

AJAX是与服务器进行数据交换的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

AJAX = 异步JS 和XML (Asynchronous JavaScript and XML)

jQuery load()方法是简单但强大的AJAX方法。load()方法从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback)
URL参数必须,
data参数可选,是与请求一同发送的查询字符串键值对的集合
callback参数是load方法完成后执行的回调函数,有三个参数:
responseTxt:成功调用的结果内容
statusTxt:包含调用的状态
xhr:XMLHttpRequest对象
$('div').laod('demo1.txt')//url可是是其他文件,不单单是网址

jQuery get()/post()方法用于通过GET/POST方法从服务器请求数据

$().click(function(){
  $.get(url,function(data,status){...})
})
$().click(function(){
  $.post(url,{dataParams},function(data,status){...})
})

noConflict()方法

noConflict()方法会释放对$标识符的控制,使其他脚本框架可以使用。释放控制后通过jQuery全名方式代替之前的$简写方式。noConflict()返回对jQuery的引用,可以存入变量,当做简写使用。

$.noConflict()
//可以把$符号作为变量传递给ready方法,这样可以在函数内部使用$符号。
jQuery(document).ready(function($){...})

JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

HTML中JSONP实现

<script>
  function callbackFunction(result,methodName){...}
script>
<script src='.....?jsoncallback=callbackFunction'>
script>
$.getJSON('....?jsoncallback=?',function(data){...})

技术点补充

:input 匹配所有 input, textarea, select 和 button 元素

:text 匹配所有的单行文本框

AJAX

$.ajax() 返回其创建的 XMLHttpRequest 对象。

回调函数

如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML,还可以指定 html、json、jsonp、script或者text。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

load(url, [data], [callback]) 载入远程 HTML 文件代码并插入至 DOM 中。
jQuery.get(url, [data], [callback], [type])通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
jQuery.getJSON(url, [data], [callback])通过 HTTP GET 请求载入 JSON 数据。
jQuery.getScript(url, [callback])通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
jQuery.post(url, [data], [callback], [type])通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
ajaxComplete(callback)AJAX 请求完成时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。
ajaxError(callback)AJAX 请求发生错误时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。
ajaxSend(callback)AJAX 请求发送前执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。
ajaxStart(callback)AJAX 请求开始时执行函数。Ajax 事件。
ajaxStop(callback)AJAX 请求结束时执行函数。Ajax 事件。
ajaxSuccess(callback)AJAX 请求成功时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。
jQuery.ajaxSetup([options])设置全局 AJAX 默认选项。
load(url, [data], [callback])载入远程 HTML 文件代码并插入至 DOM 中。
serialize()序列化表格内容为字符串。
serializeArray()序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。’’‘注意’’’,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

jQuery AJAX 方法:

方法 描述
$.ajax() 执行异步 AJAX 请求
$.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup() 为将来的 AJAX 请求设置默认值
$.ajaxTransport() 创建处理 Ajax 数据实际传送的对象
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript() 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param() 创建数组或对象的序列化表示形式(可用于 AJAX 请求的 URL 查询字符串)
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete() 规定 AJAX 请求完成时运行的函数
ajaxError() 规定 AJAX 请求失败时运行的函数
ajaxSend() 规定 AJAX 请求发送之前运行的函数
ajaxStart() 规定第一个 AJAX 请求开始时运行的函数
ajaxStop() 规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess() 规定 AJAX 请求成功完成时运行的函数
load() 从服务器加载数据,并把返回的数据放置到指定的元素中
serialize() 编码表单元素集为字符串以便提交
serializeArray() 编码表单元素集为 names 和 values 的数组

属性

  • attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。
  • addClass(class|fn(index,class)) 为每个匹配的元素添加指定的类名。 fn的两个参数:index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
  • removeClass([class|fn])从所有匹配的元素中删除全部或者指定的类。 fn的两个参数:index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
  • toggleClass(class|fn[,sw])如果存在(不存在)就删除(添加)一个类。
  • html([val|fn])取得第一个匹配元素的html内容。
  • text([val|fn])取得/设置所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
  • val([val|fn|arr])获得匹配元素的当前值。

CSS

css(name|pro|[,val|fn])访问/设置匹配元素的样式属性。

offset([coordinates])获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。

position()获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

scrollTop([val])获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

scrollLeft([val])获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。

height([val|fn])|width([val|fn])取得第一个匹配元素当前计算的高/宽度值(px)。

innerHeight()|innerWidth()获取第一个匹配元素内部区域高度(包括补白、不包括边框)。

outerHeight([options])|outerWidth([options])获取第一个匹配元素外部高度(默认包括补白和边框)。options设置为 true 时,计算边距在内。

文档处理

append(content|fn)向每个匹配的元素内部追加内容。

appendTo(content)把所有匹配的元素追加到另一个指定的元素元素集合中。

prepend(content)向每个匹配的元素内部前置内容。

prependTo(content)把所有匹配的元素前置到另一个、指定的元素元素集合中。

after(content|fn)在每个匹配的元素之后插入内容。函数必须返回一个html字符串。

before(content|fn)在每个匹配的元素之前插入内容。函数必须返回一个html字符串。

insertAfter(content)把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

insertBefore(content)把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

wrap(html|element|fn)把所有匹配的元素用其他元素的结构化标记包裹起来。

unwrap()这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

wrapAll(html|ele)将所有匹配的元素用单个元素包裹起来

wrapInner(htm|element|fnl)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

replaceWith(content|fn)将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll(selector)用匹配的元素替换掉所有 selector匹配到的元素。

empty()删除匹配的元素集合中所有的子节点。

remove([expr])从DOM中删除所有匹配的元素。

detach([expr])从DOM中删除所有匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

clone([Even[,deepEven]])克隆匹配的DOM元素并且选中这些克隆的副本。

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素。所以,要选择先前选中的元素,需要使用end()方法。

筛选

eq(index|-index)获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1为倒数第一个。
first() | last()获取第一个/最后一个元素
hasClass(class)检查当前的元素是否含有某个特定的类,如果有,则返回true。
filter(expr|obj|ele|fn)筛选出与指定表达式匹配的元素集合。
is(expr|obj|ele|fn)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
map(callback)将一组元素转换成其他数组
has(expr|ele)保留包含特定后代的元素,去掉那些不含有指定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。
not(expr|ele|fn)从匹配元素的集合中删除与指定表达式匹配的元素
slice(start, [end])选取一个匹配的子集
children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。children()只考虑子元素而不考虑所有后代元素。
closest(expr|object|element)jQuery 1.3新增。从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
find(expr|obj|ele)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。
nextAll([expr])查找当前元素之后所有的同辈元素。
nextUntil([exp|ele][,fil])查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。
offsetParent()返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。
parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。
parentsUntil([expr|element][,filter])查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll([expr])查找当前元素之前所有的同辈元素

prevUntil([exp|ele][,fil])查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止。
siblings([expr])同辈元素的元素集合。
add(expr|ele|html|obj*[,con]*)把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
andSelf()/addBack()
end()回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数–‘add’, ‘andSelf’, ‘children’, ‘filter’, ‘find’, ‘map’, ‘next’, ‘nextAll’, ‘not’, ‘parent’, ‘parents’, ‘prev’, ‘prevAll’, ‘siblings’ and ‘slice’–再加上 Manipulation 中的 ‘clone’。
contents()查找匹配元素内部所有的子节点(包括文本节点)。

事件

ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。请确保在 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。$(document).ready(function(){}) === $(function(){})

on(events,[selector],[data],fn)在选择元素上绑定一个或多个事件的事件处理函数。
off(events,[selector],[fn])在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序。
one(type,[data],fn)为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。在每个对象上,这个事件处理函数只会被执行一次。
trigger(type,[data])在每一个匹配的元素上触发某类事件。stopPropagation()阻止冒泡。
triggerHandler(type, [data])这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
live(type, [data], fn)jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。阻止默认事件行为和事件冒泡,返回 false.

事件委托:.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

die(type, [fn])从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)。**注意:为了保证 .die() 能正确工作,所使用的选择器必须与初始化 .live() 时所使用的选择器保持一致。从 jQuery 1.7 开始,不再建议使用 .die() (以及它的互补方法 .live())。请使用 .off() 来代替,用于移除通过 .on() 绑定的事件处理。
delegate(selector,[type],[data],fn)指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。jQuery 3.0中已弃用此方法,请用 on()代替。
undelegate([selector,[type],fn])删除由 delegate() 方法添加的一个或多个事件处理程序。jQuery 3.0中已弃用此方法,请用 off()代替。
hover([over,]out)当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
blur([[data],fn])当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的.
change([[data],fn])当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
click([[data],fn])触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
dblclick([[data],fn])当双击元素时,会发生 dblclick 事件。
error([[data],fn])当元素遇到错误(没有正确载入)时,发生 error 事件。
focus([[data],fn])当元素获得焦点时,触发 focus 事件。
focusin([data],fn)当元素获得焦点时,触发 focusin 事件。focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn)当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn])当键盘或按钮被按下时,发生 keydown 事件。
keypress([[data],fn])当键盘或按钮被按下时,发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。
keyup([[data],fn])当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown([[data],fn])当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
mouseenter([[data],fn])当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
mouseleave([[data],fn])当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
mousemove([[data],fn])当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标
mouseout([[data],fn])当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
mouseover([[data],fn])当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseup([[data],fn])当在元素上放松鼠标按钮时,会发生 mouseup 事件。与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
resize([[data],fn])当调整浏览器窗口的大小时,发生 resize 事件。
scroll([[data],fn])当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
select([[data],fn])当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
submit([[data],fn])当提交表单时,会发生 submit 事件。该事件只适用于表单元素。
unload([[data],fn])在当用户离开页面时,会发生 unload 事件。

具体来说,当发生以下情况时,会发出 unload 事件:

  • 点击某个离开页面的链接
  • 在地址栏中键入了新的 URL
  • 使用前进或后退按钮
  • 关闭浏览器
  • 重新加载页面

效果

show([speed,[easing],[fn]])显示隐藏的匹配元素。
hide([speed,[easing],[fn]])隐藏显示的元素。
toggle([speed],[easing],[fn])用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。无参数描述:对表格切换显示/隐藏。
slideDown([speed],[easing],[fn])通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
slideUp([speed,[easing],[fn]])通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
slideToggle([speed],[easing],[fn])通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
fadeIn/fadeOut/fadeToggle/fadeTo
animate(params,[speed],[easing],[fn])用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在运行的动画。
delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目。
finish( [queue ] )停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。
jQuery.fx.off关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。当把这个属性设成false之后,可以重新开启所有动画。
jQuery.fx.interval设置动画的显示帧速。

工具

jQuery.each(object, [callback])通用遍历方法,可用于遍历对象和数组。不同于遍历 jQuery 对象的 $().each() 方法,此方法可用于遍历任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
jQuery.extend([deep], target, object1, [objectN])用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
jQuery.grep(array, callback, [invert])使用过滤函数过滤数组元素。此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
jQuery.when(deferreds)
jQuery.makeArray(obj)将类数组对象转换为数组对象。类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。
jQuery.map(arr|obj,callback)将一个数组中的元素转换到另一个数组中。作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。
jQuery.inArray(value,array,[fromIndex])确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 )。
jQuery.toArray()把jQuery集合中所有DOM元素恢复成一个数组。
jQuery.merge(first,second)合并两个数组返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique()
jQuery.unique(array)删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。在jQuery 3.0以上版本该方法已被弃用,请使用 jQuery.uniqueSort()方法
jQuery.uniqueSort(array)$.uniqueSort()函数通过搜索的数组对象,排序数组,并移除任何重复的节点。
jQuery.parseJSON(str)接受一个JSON字符串,返回解析后的对象。在jQuery 3.0 及以后版本中,该方法已被删除,请使用原生方法 JSON.parse(str)
jQuery.noop一个空函数当你仅仅想要传递一个空函数的时候,就用他吧。
jQuery.proxy(function,context)
jQuery.contains(container,contained)一个DOM节点是否包含另一个DOM节点。检测一个元素是否包含另一个元素
jQuery.type(obj)检测obj的数据类型。
jQuery.isFunction(obj)测试对象是否为函数。jQuery 3.3中已废弃
jQuery.isEmptyObject(obj)jQuery 1.4 新增。测试对象是否是空对象(不包含任何属性)。
jQuery.isPlainObject(obj)测试对象是否是纯粹的对象(通过 “{}” 或者 “new Object” 创建的)。
jQuery.trim(str)去掉字符串起始和结尾的空格。
jQuery.param(obj,[traditional])将表单元素数组或者对象序列化。是.serialize()的核心方法。按照key/value对序列化普通对象。
jQuery.error(message)接受一个字符串,并且直接抛出一个包含这个字符串的异常。
$.fn.jquery代表 jQuery 版本号的字符串。

事件对象

event.currentTarget 在事件冒泡阶段中的当前DOM元素
event.data 当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind。
event.pageX 鼠标相对于文档的左边缘的位置。
event.pageY 鼠标相对于文档的顶部边缘的位置。
event.preventDefault()阻止默认事件行为的触发。
event.result这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined 。
event.stopImmediatePropagation()阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。除了阻止元素上其它的事件处理函数的执行,这个方法还会通过在内部调用 event.stopPropagation() 来停止事件冒泡。
event.stopPropagation()防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。
event.target 最初触发事件的DOM元素。这是注册事件时的对象,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
event.timeStamp这个属性返回事件触发时距离1970年1月1日的毫秒数。
event.which针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。

延迟对象 defer

deferred.done(doneCallbacks[,doneCallbacks])当延迟成功时调用一个函数或者数组函数.该参数可以是一个函数或一个函数的数组。当延迟成功时,doneCallbacks被调用。回调执行是依照他们添加的顺序。一旦deferred.done()返回延迟对象,延迟对象的其它方法也可以链接到了这里,包括增加.done()方法。
deferred.fail(failCallbacks[,failCallbacks])当延迟失败时调用一个函数或者数组函数。
deferred.isRejected()|deferred.isResolved() 延迟的对象可以有三种状态:未解决(unresolved),解决(resolved),或拒绝(rejected);使用deferred.isResolved()来判断延迟对象是否在解决状态 。这些方法主要用于调试时非常有用。
deferred.then(doneFilter [, failFilter ] [, progressFilter ])添加处理程序被调用时,递延对象得到解决或者拒绝。
deferred.promise([type],[target])
$().done(function(){}).fail(function(){})
$().then(...)

回调函数

callbacks.add(callbacks)回调列表中添加一个回调或回调的集合。
callbacks.disable()禁用回调列表中的回调
callbacks.empty()从列表中删除所有的回调.
callbacks.fire(arguments)调用回调列表中的回调.
callbacks.fired()用给定的参数调用所有的回调。
callbacks.fireWith([context][,args])访问给定的上下文和参数列表中的所有回调
callbacks.has(callback)确定是否提供的回调列表
callbacks.lock()锁定一个回调列表,以避免进一步的修改列表状态
callbacks.locked()确定是否已被锁定的回调列表。
callbacks.remove(callbacks)删除回调或回调回调列表的集合。
jQuery.callbacks(flags)

你可能感兴趣的:(前端)