JQuery笔记
- http://jquery.com/
- http://jquery.cuishifeng.cn/
- http://www.w3school.com.cn/jquery/index.asp
- 【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
选择器 选择器函数:$()
-
$("*") 所有元素
-
Dom对象
-
若要通过JQuery操作Dom对象,需要将Dom对象转换为JQuery对象($(Dom对象)): $(window),$(document), $(this)。
var div1 = document.getElementById("div1"); alert($(div1 ).html());
-
同样的如果需要直接使用Dom的属性/方法时,如果现有的是一个JQuery对象,需要将它转为Dom对象(var domObj = JQueyObj[0] //或者 = JQueyObj.get(0))。
var div1 = $("#div1")[0]; alert(div1.innerHTML);
-
-
类似css中的选择方式
-
ID选择器 $("#Id")
-
css选择器 $(".className")
-
标签选择器 $("p")
-
属性选择器
- $("[href]") 选取所有带有 href 属性的元素。
- $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
- $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
- $("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素。
- $("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素
- $("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素
-
过滤选择器
- :fist $(:p:first) 第一个p元素
- :last $("p:last") 最后一个p元素
- :even 所有索引为偶数的(从0开始) ,$("tr:even") 所有偶数tr元素
- :odd 所有索引为奇数的,$("tr:odd") 所有奇数tr元素
- :eq(索引序号) 指定索引序号的元素 ,$("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
- :qt(no) 所有索引值大于给定值的元素,$("ul li:gt(3)") 列出 index 大于 3 的元素
- :lt(no) 所有索引值小于给定值的元素, $("ul li:lt(3)") 列出 index 小于 3 的元素
- :not(selector) 过滤条件取反, $("input:not(:empty)") 所有不为空的 input 元素
- :header $(":header") 所有标题元素 h1 - h6
- :animated 所有动画元素
- :contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
- :empty $(":empty") 无子(元素)节点的所有元素
- :hidden $("p:hidden") 所有隐藏的 p 元素
- :visible $("table:visible") 所有可见的表格
-
表单对象过滤选择器
- :input $(":input") 所有 input 元素
- :text $(":text") 所有 type="text" 的 input 元素
- :password $(":password") 所有 type="password" 的 input 元素
- :radio $(":radio") 所有 type="radio" 的 input 元素
- :checkbox $(":checkbox") 所有 type="checkbox" 的 input 元素
- :submit $(":submit") 所有 type="submit" 的 input 元素
- :reset $(":reset") 所有 type="reset" 的 input 元素
- :button $(":button") 所有 type="button" 的 input 元素
- :image $(":image") 所有 type="image" 的 input 元素
- :file $(":file") 所有 type="file" 的 input 元素
- :enabled $(":enabled") 所有激活的 input 元素
- :disabled $(":disabled") 所有禁用的 input 元素
- :selected $(":selected") 所有被选取的 input 元素
- :checked $(":checked") 所有被选中的 input 元素
-
多条件选择器 $("p,div,span,menuitem")
-
复合选择器
- $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素。
- $("p.intro") 所有 class="intro" 的p元素
- $("input[id][name$='man']") 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
-
层次选择器
- $("div li") 获取所有li标签后代,包括后代的后代
- $("div > li") 获取直接的后代
- $("label + input") 匹配所有跟在 label 后面的 input 元素(匹配所有紧接在 prev 元素后的 next 元素)
- $("form ~ input") 找到所有与表单同辈的 input 元素 (匹配 prev 元素之后的所有 siblings 元素)
-
其他选择器(1.9+)
- :lang $("div:lang(en)")将匹配<div lang="en"> and<div lang="en-us">(和他们的后代)
- :root 在HTML中,$(":root")选择的元素永远是元素。
- :target 例如,给定的URI http://example.com/#foo, $( "p:target" ),将选择<p id="foo">元素。
- :lang $("div:lang(en)")将匹配<div lang="en"> and<div lang="en-us">(和他们的后代
-
CSS选择器
选择器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 选择 class="intro" 的所有元素。 | 1 |
#id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有 <p> 元素。 | 1 |
element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 |
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
:link | a:link | 选择所有未被访问的链接。 | 1 |
:visited | a:visited | 选择所有已被访问的链接。 | 1 |
:active | a:active | 选择活动链接。 | 1 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
:focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
:first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
:before | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
:after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
:lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 |
element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
[attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
:root | :root | 选择文档的根元素。 | 3 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 | 3 |
:target | #news:target | 选择当前活动的 #news 元素。 | 3 |
:enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
:disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
:not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
document操作
操作样式、属性
- addClass(),removeClass(),toggleClass(),hasClass()
- css()
- attr(),removeAttr()
- prop(),针对disabled,checked, required, readonly这类,有的会写成disabled = "disabled",而有的就写一个disabled,对于后者用attr("disabled")是取不到值的。
Attribute/Property | .attr() |
.prop() |
---|---|---|
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width ( if needed over .width() ) |
√ |
html,文本,值
- html(), text(),val()
内部插入
-
append(content|fn) 向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法类似
1.fn: 返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。 -
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中
$("p").appendTo("div"); $("<p/>").appendTo("div").addClass("test").end().addClass("test2");
-
prepend(content|fn) 向所有匹配元素内部的开始处插入内容
-
prependTo(content)
外部插入
- after(content|fn) 在每个匹配的元素之后插入内容。
- before(content|fn)
- insertAfter(content) 使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。
- insertBefore(content) 使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。
包裹
-
wrap(html|ele|fn) 把匹配的元素用指定的内容或元素包裹起来。
$("p").wrap("<div class='wrap'></div>"); $("p").wrap(document.getElementById('content')); $('.inner').wrap(function() {return '<div class="' + $(this).text() + '" />';});
-
unwrap() 移除并替换指定元素的父元素。
-
wrapAll(html|ele) 将所有匹配的元素用单个元素包裹起来。
-
wrapInner(html|ele|fn) 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
替换
- replaceWith(content|fn) 用新内容替换匹配的元素。
- replaceAll(selector) 用匹配的元素替换所有匹配到的元素。
删除
- empty() 移除所有匹配的元素。
- remove([expr]) 删除匹配的元素集合中所有的子节点。
- detach([expr]) 从 DOM 中移除匹配元素集合。
复制
- clone([Even[,deepEven]])
事件
页面载入 ready(fn)
1. $(document).ready(function(){})与$(window).onload(function(){})是不一样的。前者只要在Dom元素创建完毕后就会触发,可以触发多次。
2. 简化形式 $(function(){});
3. ready() 函数不应与 <body onload=""> 一起使用。
事件切换
-
hover([over,]out)
-
toggle()
-
toggle(),切换显示/隐藏
$('td).toggle();
-
toggle([speed] ,[fn]) ,String,Function
-
toggle([speed] ,[easing] ,[fn]),String,String,Function
- speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"
- easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
- fn:在动画完成时执行的函数,每个元素执行一次。
-
toggle([switch]),Boolean
$('#foo').toggle(showOrHide); //相当于 if (showOrHide) { $('#foo').show(); } else { $('#foo').hide(); }
-
事件处理
bind() 向匹配元素附加一个或更多事件处理器 (3.0废弃)unbind() 从匹配元素移除一个被添加的事件处理器(3.0废弃)delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器(3.0废弃)undelegate() 从匹配元素移除一个被添加的事件处理器,现在或将来(3.0废弃)live() 为当前或未来的匹配元素添加一个或多个事件处理器(1.7废弃)die() 移除所有通过 live() 函数添加的事件处理程序。(1.7废弃)
-
one() 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
-
on(eve,[sel],[data],fn)
$("form").on("submit", false); $(window).on("scroll", function () { });
-
off(eve,[sel],[fn])
-
trigger(type,[data]) 在每一个匹配的元素上触发某类事件。
$("p").bind("myEvent", function (event, message1, message2) { alert(message1 + ' ' + message2); }); $("p").trigger("myEvent", ["Hello","World!"]);
-
triggerHandler(type, [data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
这个方法的行为表现与trigger类似,但有以下三个主要区别:- 第一,他不会触发浏览器默认事件。
- 第二,只触发jQuery对象集合中第一个元素的事件处理函数。
- 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。
元素事件
- blur() 触发、或将函数绑定到指定元素的 blur 事件
- change() 触发、或将函数绑定到指定元素的 change 事件
- click() 触发、或将函数绑定到指定元素的 click 事件
- dblclick() 触发、或将函数绑定到指定元素的 double click 事件
- error() 触发、或将函数绑定到指定元素的 error 事件
- focus() 触发、或将函数绑定到指定元素的 focus 事件
- keydown() 触发、或将函数绑定到指定元素的 key down 事件
- keypress() 触发、或将函数绑定到指定元素的 key press 事件
- keyup() 触发、或将函数绑定到指定元素的 key up 事件
- load() 触发、或将函数绑定到指定元素的 load 事件
- unload() 触发、或将函数绑定到指定元素的 unload 事件
- mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件
- mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件
- mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件
- mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件
- mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件
- mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件
- mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件
- resize() 触发、或将函数绑定到指定元素的 resize 事件
- scroll() 触发、或将函数绑定到指定元素的 scroll 事件
- select() 触发、或将函数绑定到指定元素的 select 事件
- submit() 触发、或将函数绑定到指定元素的 submit 事件
事件的相关参数查询
- event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
- event.pageX 相对于文档左边缘的鼠标位置。
- event.pageY 相对于文档上边缘的鼠标位置。
- event.preventDefault() 阻止事件的默认动作。
- event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
- event.target 触发该事件的 DOM 元素。
- event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
- event.type 描述事件的类型。
- event.which 指示按了哪个键或按钮。
动画
1.show([speed,[easing],[fn]])、hide([speed,[easing],[fn]])、toggle([speed],[easing],[fn])
$(selector).hide(speed,callback);$(selector).show(speed,callback);
-
fadeIn([speed],[easing],[fn])、fadeOut([speed],[easing],[fn])、fadeTo([[speed],opacity,[easing],[fn]])、fadeToggle([speed,[easing],[fn]])
-
slideDown([speed],[easing],[fn])、slideUp([speed,[easing],[fn]])、slideToggle([speed],[easing],[fn])
-
自定义
-
animate(params,[speed],[easing],[fn])1.8*
-
stop([clearQueue],[jumpToEnd])1.7*
-
delay(duration,[queueName])
-
finish([queue])1.9+
$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });
-
-
队列控制:
- clearQueue([queueName]) 对被选元素移除所有排队的函数(仍未运行的)
- delay(duration,[queueName]) 对被选元素的所有排队函数(仍未运行)设置延迟
- dequeue([queueName]) 运行被选元素的下一个排队函数
- queue(element,[queueName]) 显示被选元素的排队函数
尺寸
- width() 设置或返回元素的宽度(不包括内边距、边框或外边距)
- height() 设置或返回元素的高度(不包括内边距、边框或外边距)
- innerWidth() 返回元素的宽度(包括内边距)
- innerHeight() 返回元素的高度(包括内边距)
- outerWidth() 返回元素的宽度(包括内边距和边框)
- outerHeight() 方法返回元素的高度(包括内边距和边框)
- outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
- outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
位置
- offset() 返回第一个匹配元素相对于文档的位置。
- offsetParent() 返回最近的定位祖先元素。
- position() 返回第一个匹配元素相对于父元素的位置。
- scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
- scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
$(document).width(), $(window).width();
遍历
过滤
-
eq(index|-index) 负数表示从最后一个开始倒数
-
first()
-
last()
-
hasClass(class)
-
filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合。
- expr:String 字符串值,包含供匹配当前元素集合的选择器表达式。
- jQuery:objectobject 现有的jQuery对象,以匹配当前的元素。
- element:Expression 一个用于匹配元素的DOM元素。
- function(index) :Function一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。
-
is(expr|obj|ele|fn)
-
map(callback)
-
has(expr|ele)
-
not(expr|ele|fn)
-
slice(start,[end])
查找
- children([expr])
- closest(e|o|e)1.7* 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素
- find(e|o|e)
- next([expr])
- nextAll([expr])
- nextUntil([exp|ele][,fil]) 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。
- offsetParent() 返回第一个匹配元素用于定位的父节点。
- 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对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
$("p").add("<span>Again</span>")
-
andSelf()1.8废弃,在jQuery1.8和更高版本中应使用.addBack()。 $("div").find("p").andSelf().addClass("border"); -
addBack([selector ])1.9+ . addBack()方法导致前一组遍历堆栈中的DOM元素被添加到当前组。
-
contents() 查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
$("iframe").contents().find("body").append("I'm in an iframe!");
-
end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
数据操作函数
这些方法允许我们将指定的 DOM 元素与任意数据相关联。
- .clearQueue() 从队列中删除所有未运行的项目。
- .data() 存储与匹配元素相关的任意数据。
- jQuery.data() 存储与指定元素相关的任意数据。
- .dequeue() 从队列最前端移除一个队列函数,并执行它。
- jQuery.dequeue() 从队列最前端移除一个队列函数,并执行它。
- jQuery.hasData() 存储与匹配元素相关的任意数据。
- .queue() 显示或操作匹配元素所执行函数的队列。
- jQuery.queue() 显示或操作匹配元素所执行函数的队列。
- .removeData() 移除之前存放的数据。
- jQuery.removeData() 移除之前存放的数据。
AJAX
- $(selector).load(URL,data,callback);
- $("#div1").load("demo_test.txt #p1"); 把 jQuery 选择器添加到 URL 参数。下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 元素中
- 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
- $("#div1").load("demo_test.txt #p1"); 把 jQuery 选择器添加到 URL 参数。下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的
- $.get(URL,callback);
- $.post(URL,data,callback);
- $.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
- $.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。
- $.ajax() 执行异步 HTTP (Ajax) 请求。
-
options:Object
-
async:Boolean
-
beforeSend(XHR), 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。如果返回 false 可以取消本次 ajax 请求。
-
cache:Boolean ,dataType 为 script 和 jsonp 时默认为 false
-
complete(XHR, TS), 请求完成后回调函数 (请求成功或失败之后均调用)
-
contentType:String ,默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
-
context:Object ,设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)
-
data:String, 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式
-
dataFilter:Function,给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
-
dataType:String
-
"xml": 返回 XML 文档,可用 jQuery 处理。
-
"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
-
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
-
"json": 返回 JSON 数据 。
-
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
-
"text": 返回纯文本字符串
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});
-
-
error:Function,三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象
-
……其他参数及事件
-
- .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
- .ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
- .ajaxSend() 在 Ajax 请求发送之前显示一条消息。
- jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
- .ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
- .ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
- .ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
- jQuery.param() 创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。
- .serialize() 将表单内容序列化为字符串。
- .serializeArray() 序列化表单元素,返回 JSON 数据结构数据。
noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。避免与其他框架冲突。之后通过全名替代简写的方式来使用 jQuery。也可以创建自己的简写。
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行!");
});
});
或
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行!");
});
});
DOM 元素方法
- .get() 获得由选择器指定的 DOM 元素。
- .index() 返回指定元素相对于其他指定元素的 index 位置。
- .size() 返回被 jQuery 选择器匹配的元素的数量。
- .toArray() 以数组的形式返回 jQuery 选择器匹配的元素。