집 > 기사 > 웹 프론트엔드 > jQuery가 마스터해야 하는 API

jQuery가 마스터해야 하는 API

php中世界最好的语言원래의: 2018-03-15 17:40:361612검색

이번에는 jQuery가 마스터해야 할 API를 소개하겠습니다. jQuery API 사용 시 주의사항은 무엇인가요?

jQuery 핵심 함수 및 메서드, jQuery 속성 참조 설명서, jQuery CSS 작업, jQuery 선택기, jQuery 문서 작업, jQuery 필터 작업, jQuery 이벤트 메서드, jQuery 효과, jQuery Ajax 작업, jQuery 도구 함수, jQuery 이벤트 개체, jQuery 지연 포함 객체 및 jQuery 콜백 함수를 수집하고 사용할 수 있습니다.

jquery 핵심 기능

函数                 描述
jQuery()  这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
jQuery()1.8*  根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。
jQuery()  $(document).ready()的简写。
jQuery.holdReady()1.6+ 暂停或恢复.ready() 事件的执行。
each() 以每一个匹配的元素作为上下文来执行一个函数。
size() jQuery 对象中元素的个数。
length jQuery 对象中元素的个数。
selector  返回传给jQuery()的原始选择器。
context 返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
get()  取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
index() 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
data() 在元素上存放数据,返回jQuery对象。
removeData()1.7*  在元素上移除存放的数据
queue() 显示或操作在匹配元素上执行的函数队列
dequeue()  从队列最前端移除一个队列函数，并执行他。
clearQueue()  清空对象上尚未执行的所有队列
jQuery.fn.extend() 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
jQuery.extend() 扩展jQuery对象本身。
jQuery.noConflict() 运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

jQuery 속성

函数                描述
attr() 设置或返回被选元素的属性值。
removeAttr()  从每一个匹配的元素中删除一个属性
prop()1.6+ 获取在匹配的元素集中的第一个元素的属性值。
removeProp()1.6+  用来删除由.prop()方法设置的属性集
addClass() 为每个匹配的元素添加指定的类名。
removeClass()  从所有匹配的元素中删除全部或者指定的类。
toggleClass()  如果存在（不存在）就删除（添加）一个类。
html() 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
text() 取得所有匹配元素的内容。
val()  获得匹配元素的当前值。

jQuery CSS 작업

아래 나열된 메서드는 요소의 CSS 관련 속성을 설정하거나 반환합니다.

函数                 描述
css()1.9*  访问匹配元素的样式属性。
jQuery.cssHooks 直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。
offset()  获取匹配元素在当前视口的相对偏移。
position() 获取匹配元素相对父元素的偏移。
scrollTop() 获取匹配元素相对滚动条顶部的偏移。
scrollLeft()  获取匹配元素相对滚动条左侧的偏移。
heigh() 取得匹配元素当前计算的高度值（px）。
width() 取得第一个匹配元素当前计算的宽度值（px）。
innerHeight()  获取第一个匹配元素内部区域高度（包括内边距、不包括边框）。
innerWidth()  获取第一个匹配元素内部区域宽度（包括内边距、不包括边框）。
outerHeight()  获取第一个匹配元素外部高度（默认包括内边距和边框）。
outerWidth()  获取第一个匹配元素外部宽度（默认包括内边距和边框）。

j쿼리 선택기

函数                描述
#id 
element 
.class 
*  
selector1,selector2,selectorN  
ancestor descendant 
parent > child 
prev + next 
prev ~ siblings  
:first 
:not() 
:even  
:odd  
:eq()  
:gt()  
:lang1.9+  
:last  
:lt()  
:header 
:animated  
:focus1.6+ 
:root1.9+  
:target1.9+ 
:contains() 
:empty 
:has() 
:parent 
:hidden 
:visible  
[attribute] 
[attribute=value]  
[attribute!=value] 
[attribute^=value] 
[attribute$=value] 
[attribute*=value] 
[attrSel1][attrSel2][attrSelN] 
:first-child  
:first-of-type1.9+ 
:last-child 
:last-of-type1.9+  
:nth-child 
:nth-last-child()1.9+  
:nth-last-of-type()1.9+ 
:nth-of-type()1.9+ 
:only-child 
:only-of-type1.9+  
:input 
:text  
:password  
:radio 
:checkbox  
:submit 
:image 
:reset 
:button 
:file  
:hidden 
:enabled  
:disabled  
:checked  
:selected

j쿼리 문서 작업

函数                描述
append()  向每个匹配的元素内部追加内容。
appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend()  向每个匹配的元素内部前置内容。
prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中。
after() 在每个匹配的元素之后插入内容。
before()  在每个匹配的元素之前插入内容。
insertAfter()  把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap()  这个方法将移出元素的父元素。
wrapall()  将所有匹配的元素用单个元素包裹起来
wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
replaceWith()  将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll()  用匹配的元素替换掉所有 selector匹配到的元素。
empty() 删除匹配的元素集合中所有的子节点。
remove()  从DOM中删除所有匹配的元素。
detach()  从DOM中删除所有匹配的元素。
clone() 克隆匹配的DOM元素并且选中这些克隆的副本。

j쿼리 필터 작업

函数               描述
eq()  获取第N个元素
first() 获取第一个元素
last() 获取最后一个元素
hasClass() 检查当前的元素是否含有某个特定的类，如果有，则返回true。
filter()  筛选出与指定表达式匹配的元素集合。
is()1.6*  根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
map()  将一组元素转换成其他数组（不论是否是元素数组）
has()  保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not()  删除与指定表达式匹配的元素
slice() 选取一个匹配的子集
children() 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
closest()1.7*  从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。
find()1.6* 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextall()  查找当前元素之后所有的同辈元素。
nextUntil()1.6* 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
offsetParent() 返回第一个匹配元素用于定位的父节点。
parent()  取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents()  取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
parentsUntil()1.6* 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevall()  查找当前元素之前所有的同辈元素
prevUntil()1.6* 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
siblings() 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
add()  把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
andSelf()  加入先前所选的加入当前元素中
contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
end()  回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

j쿼리 필터 작업

函数               描述
eq()  获取第N个元素
first() 获取第一个元素
last() 获取最后一个元素
hasClass() 检查当前的元素是否含有某个特定的类，如果有，则返回true。
filter()  筛选出与指定表达式匹配的元素集合。
is()1.6*  根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
map()  将一组元素转换成其他数组（不论是否是元素数组）
has()  保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not()  删除与指定表达式匹配的元素
slice() 选取一个匹配的子集
children() 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
closest()1.7*  从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。
find()1.6* 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextall()  查找当前元素之后所有的同辈元素。
nextUntil()1.6* 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
offsetParent() 返回第一个匹配元素用于定位的父节点。
parent()  取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents()  取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
parentsUntil()1.6* 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevall()  查找当前元素之前所有的同辈元素
prevUntil()1.6* 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
siblings() 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
add()  把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
andSelf()  加入先前所选的加入当前元素中
contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
end()  回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

jQuery 이벤트 메소드

函数              描述
ready() 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
on()1.7+  在选择元素上绑定一个或多个事件的事件处理函数。
off()1.7+  在选择元素上移除一个或多个事件的事件处理函数。
bind() 为每个匹配元素的特定事件绑定事件处理函数。
one()  为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
trigger()  在每一个匹配的元素上触发某类事件。
triggerHandler()  这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
unbind()  bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
live()1.7- jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
die()1.7-  从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)
delegate() 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
undelegate()1.6*  删除由 delegate() 方法添加的一个或多个事件处理程序。
hover() 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
toggle()  用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
blur() 当元素失去焦点时触发 blur 事件。
change()  当元素的值发生改变时，会发生 change 事件。
click() 触发每一个匹配元素的click事件。
dblclick() 当双击元素时，会发生 dblclick 事件。
error() 当元素遇到错误（没有正确载入）时，发生 error 事件。
focus() 当元素获得焦点时，触发 focus 事件。
focusin()  当元素获得焦点时，触发 focusin 事件。
focusout() 当元素失去焦点时触发 focusout 事件。
keydown()  当键盘或按钮被按下时，发生 keydown 事件。
keypress() 当键盘或按钮被按下时，发生 keypress 事件。
keyup() 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseenter()  当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
mouseleave()  当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
mousemove() 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout() 当鼠标指针从元素上移开时，发生 mouseout 事件。
mouseover() 当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseup()  当在元素上放松鼠标按钮时，会发生 mouseup 事件。
resize()  当调整浏览器窗口的大小时，发生 resize 事件。
scroll()  当用户滚动指定的元素时，会发生 scroll 事件。
select()  当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit()  当提交表单时，会发生 submit 事件。
unload()  在当用户离开页面时，会发生 unload 事件。

jQuery effect

函数                 描述
show() 显示隐藏的匹配元素。
hide() 隐藏显示的元素
toggle()  用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
slideDown() 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp()  通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
slideToggle()  通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
fadeIn()  通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
fadeOut()  通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
fadeTo()  把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
fadeToggle()  通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
animate()1.8*  用于创建自定义动画的函数。
stop()1.7* 停止所有在指定元素上正在运行的动画。
delay() 设置一个延时来推迟执行队列中之后的项目。
finish()1.9+  停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
jQuery.fx.off  关闭页面上所有的动画。
jQuery.fx.interval 设置动画的显示帧速。

jQuery ajax 연산

函数          描述
$.ajax()  通过 HTTP 请求加载远程数据。
load() 载入远程 HTML 文件代码并插入至 DOM 中。
$.get()  通过远程 HTTP GET 请求载入信息。
$.getJSON()  通过 HTTP GET 请求载入 JSON 数据。
$.getScript() 通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
$.post()  通过远程 HTTP POST 请求载入信息。
ajaxComplete() AJAX 请求完成时执行函数。Ajax 事件。
ajaxError() AJAX 请求发生错误时执行函数。Ajax 事件。
ajaxSend() AJAX 请求发送前执行函数。Ajax 事件。
ajaxStart() AJAX 请求开始时执行函数。Ajax 事件。
ajaxStop() AJAX 请求结束时执行函数。Ajax 事件。
ajaxSuccess()  AJAX 请求成功时执行函数。Ajax 事件。
$.ajaxPrefilter()	Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().
$.ajaxSetup() 设置全局 AJAX 默认选项。
serialize() 序列化表格内容为字符串。
serializearray()  序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

다음으로 jQuery의 공통 구문과 인터페이스를 살펴보겠습니다.

jQuery 공통 구문 그리고 인터페이스

프로그램을 작성하든 API 문서를 읽든 항상 Dom 객체와 jQuery 래퍼 세트를 구별하는 데 주의를 기울이세요.

1. Dom 객체

전통적인 JavaScript 개발에서는 다음과 같이 Dom 객체를 먼저 얻습니다.

var p = document.getElementById("testp"); 
var ps = document.getElementsByTagName("p");

document.getElementById 메소드를 사용하여 ID를 기반으로 단일 Dom 객체를 얻거나 문서를 사용합니다. HTML 태그 Name을 기반으로 하는 getElementsByTagName 메소드는 Dom 객체의 컬렉션을 가져옵니다.

또한 이벤트 함수에서는 메서드 함수에서 이를 사용하여 이벤트를 트리거하는 객체를 참조하거나 이벤트 객체의 대상(FF) 또는 srcElement(IE6)를 사용하여 이벤트를 트리거한 Dom 객체를 얻을 수 있습니다.

여기에서 얻은 것은 Dom 객체이며 Dom 객체에도 입력, p, 범위 등과 같은 다양한 유형이 있습니다. Dom 개체에는 제한된 속성과 메서드만 있습니다

2. jQuery 패키징 세트

jQuery 패키징 세트는 Dom 개체의 확장이라고 할 수 있습니다. jQuery의 세계에서는 하나이든 그룹이든 모든 객체가 jQuery 패키징 세트로 캡슐화됩니다. 예를 들어 요소가 포함된 jQuery 패키징 세트를 가져오는 경우:

var jQueryObject = $("#testp");

jQuery 패키징 세트는 객체로 함께 호출됩니다. jQuery 래퍼 세트에는 다양한 속성 및 메서드 집합이 있습니다. jQuery 관련 속성 및 메서드는 그림 6-3에 나와 있습니다. 3. Dom 객체와 jQuery 객체의 변환

(1) Dom을 jQuery 패키징 세트로

jQuery에서 제공하는 기능을 사용하려면 먼저 jQuery 패키징 세트를 구성해야 합니다. 이 기사에 소개될 jQuery 선택기를 사용하여 다음과 같은 jQuery 래퍼 세트를 직접 구성할 수 있습니다.

$("#testp");

위 명령문으로 구성된 래퍼 세트에는 ID testp를 가진 하나의 요소만 포함됩니다. 또는 다음과 같은 Dom 요소를 얻었습니다.

var p = document.getElementById("testp");

위 코드에서 p는 Dom 요소입니다. Dom 요소를 jQuery 패키징 세트로 변환할 수 있습니다.

var domToJQueryObject = $(p);

(2) Dom 개체로 설정된 jQuery 패키징

jQuery 패키징 세트 컬렉션이므로 인덱서를 통해 해당 요소에 액세스할 수 있습니다.

var domObject = $("#testp")[0];

인덱서를 통해 반환되는 것은 더 이상 jQuery 래퍼 세트가 아니라 Dom 개체입니다! Each()와 같은 jQuery 패키지 세트의 일부 순회 메소드는 순회 함수에서 다음과 같은 Dom 요소이기도 합니다.

$("#testp").each(function() { alert(this) })

jQuery 메소드를 사용하여 Dom 객체를 작동하려면, 위에서 소개한 방법을 사용하세요. 방법을 변환하세요:

$("#testp").each(function() { $(this).html("修改内容") })

이 기사의 사례를 읽으신 후 방법을 마스터하셨다면 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!