jquery
jquery 1.6 学习记录
core
jquery function
jquery(selector,[context])
或$(selector, [context])
描述: 接受一个包含CSS选择器的字符串用于匹配的元素集合。
上下文选择器
$('div.foo').click(function() {
$('span', this).addClass('bar');
});
由于我们限制这个span选择器的上下文为 this
, 只有在点击元素里的span将会被附加样式。
在内部,选择器上下文是使用.find()
方法的,所以 $('span', this)
等价于$(this).find('span')
。
ex:
找到所有div元素子节点为p的元素。
<script>$("div > p").css("border", "1px solid gray");</script>
找到文档中第一个表单下的所有单选框。
$("input:radio", document.forms[0]);
找到所有从一个Ajax请求中获取的XML文档中的div元素。
$("div", xml.responseXML);
jquery objects accessors
.each(function(index, element))
遍历一个jQuery对象,为每一个匹配元素执行一个函数。
<ul> <li>foo</li> <li>bar</li> </ul>
$('li').each(function(index) { alert(index + ': ' + $(this).text()); });
0: foo
1: bar
.size()
返回的jQuery对象匹配的DOM元素的数量。 return number
$("li").size()
或者$("li").length
.selector
返回传给jQuery()的原始选择器。 return String
.selector
值一般最有用的是紧随原始创作对象。因此, .live()
方法只应该在这个方案中使用。
.context
返回传给jQuery()的原始的DOM节点内容;如果没有获得通过,那么上下文将可能是该文档。 return element
.eq(index) index 一个整数,指示元素基于0的位置。
获取匹配集合中指定的元素。 return jquery
如果一个jQuery对象表示一个DOM元素的集合,.eq()
方法从集合的一个元素中构造新的jQuery对象。所提供的索引标识这个集合中的元素的位置。
.get([index])
通过jQuery对象获取对应的DOM元素。 return element,array
.index()
从匹配的元素中搜索给定元素的索引值,从0开始计数。 return number
.index(selector)
selector一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。
.index(element)
element将要用于查找的DOM元素,或者jQuery对象中的第一个元素。
.toArray() return Array
返回一个包含jQuery对象集合中的所有DOM元素的数组。
选择器
基本选择器
$("#idname")
id选择器 字符转义“\\”
$("element")
选择给定标签名的元素,ex:$("div")
$(".classname")
class选择器
$(".classname.subclassname")
<div class="classname subclassname"></div>
$("selector1, selector2")
$(".classname1,.classname2")
分层:
$("ancestor descendant")
$("form input")
$("parent > chlid")
$("ul.topnav > li")
$("prev ~ siblings")
匹配 “prev” 元素之后的所有 “siblings” 元素(兄弟元素)。
$("#prev ~ div")
$("prev + next")
基本的过滤器
$(":first")
选择第一个元素
$("tr:frist")
$(":last")
$("tr:last")
选择一个过滤和匹配当前jQuery集合在它的最后一个单独的元素
$(':not(selector)')
$('inout:not(:checked)')
.not() 方法
$(":even")
$("tr:even")
$(":odd")
$("tr:odd")
基于0的索引
$(":eq(index)")
选择一个给定索引值的元素。(从 0 开始计数)
$("td:eq(2)")
$(":gt(index)")
$("td:gt(4)")
$(":lt(index)")
$("td:lt(3)")
$(":header")
选择所有标题元素
$(":animated")
选择所有正在执行动画效果的元素
$(":focus")
选择当前获取焦点的元素
内容选择器
$(":contains(text)")
$("div:contains('word')")
$(":empty")
$("td:empty")
选择所有没有子元素的元素
$(":has(selector)")
$("div:has(p)")
选择含有选择器所匹配的至少一个元素的元素
$(":parent")
$("td:parent")
选择所有含有子元素或文本元素的父级元素
显隐过滤器
$(":hidden")
选择所有隐藏的元素
$("div:hidden")
$(":visible")
选择所有可见的元素
$("div:visible")
子过滤器
$(":nth-child(index/even/odd/equation)")
选择父元素下的第N个奇数或偶数个元素,index从1开始
$("ul li:nth-child(2)")
$(":first-child")
选择所有父级元素下的第一个子元素
$("div span:first-child")
$(":last-child")
选择所有父级元素下的最后一个子元素
$("div span:last-child")
$(":only-child")
选择所有父元素下只有一个子元素的元素
$("div button:only-child")
属性过滤器
$("[attribute]")
选择所有具有指定属性的元素,该属性可以是任何值。
$("div[id]")
$("[attribute=value]")
选择指定属性是给定值的元素。
$("input[name='name']")
$("[atrribute!=value]")
选择不存在指定属性,或者指定的属性值不等于给定值的元素。
$("input[name!='name']")
$("[attribute^=value]")
选择指定属性是以给定字符串开始的元素
$("input[name^='new']")
$("[attribute$=value]")
选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
$(""input[name$='letter'])
$("[attribute*=value]")
选择指定属性具有包含一个给定的子字符串的元素。(选择给定的属性是以包含某些值的元素)
$("input[name*='man']")
$("[attribute|=value]")
选择指定属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-” )的元素.
$("input[name|='man']")
$("[attribute~=value]")
选择指定属性用空格分隔的值中包含一个给定值的元素。
$("input[name~='hel']")
<input name="hel word"></input>
$("[attributefilter1][attributefilter2]")
选择匹配所有指定的属性筛选器的元素
$("input[id][name$='man']")
FORMS
$(":input")
选择所有 input, textarea, select 和 button 元素.
:input
选择器基本上选择所有表单控件。
$(":text")
选择所有类型为文本的元素。
$("form input:text")
$(":password")
选择所有类型为密码的元素。
$("input:password")
$(":radio")
选择所有类型为单选框的元素。
$("input:radio")
$(":checkbox")
选择所有类型为复选框的元素。
$("input:checkbox")
类似有:
$(":submit")
$(":image")
$(":reset")重置类型
$(":button")选择所有按钮元素和类型为按钮的元素。
$(":file")
表单过滤器
$(":enabled")
选择所有可用的元素。
$("input:enabled")
$(":disabled")
选择所有被禁用的元素
$(":checked")
选择所有勾选的元素。
$("input:checked")
$(":selected")
选择所有被选中的元素。
:selected
选择器为<option>
元素工作。它不适用复选框和单选框,复选框和单选框请使用:checked
。
$("select option:selected")
属性
属性
.attr(attributename) 返回String
取得第一个匹配元素的属性值。
要获取的值的属性名.
var title = $("input").attr("title")
.attr(attributename, value) 返回Jquery
为指定元素设置一个或多个属性。
要获取的值的属性名.
var title = $("input").attr("title", "hehs")
ex:<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
$('#greatphoto').attr({'alt': 'Beijing Brush Seller','title': 'photo by Kelly Clark'});
$('#greatphoto').attr('title', function() {return this.alt + ' - photo by Kelly Clark'});
.removeAttr(attributename) 返回Jquery
为匹配的元素集合中的每个元素中移除一个属性。
<input type="text" disabled="disabled" value="can't edit this" />
$("input").removeAttr("disabled")
class
.addClass(classname) 返回Jquery
为每个匹配的元素添加指定的类名
$('p').addClass('myClass yourClass');
$('p').removeClass('myClass noClass').addClass('yourClass');
$('ul li:last').addClass(function() {return 'item-' + $(this).index();});
ex:
.selected { color:blue; }
$("p:last").addClass("selected");
.hasClass(classname) 返回boolean
检查匹配的元素是否含有某个特定的类。
<div id="mydiv" class="foo bar"></div>
$('#mydiv').hasClass('foo')
true
.removeClass([classname]) 返回jquery
移除每个匹配元素的一个,多个或全部样式。
$("p:even").removeClass("blue");
.toggleClass() 返回jquery
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或价值切换属性。即:如果存在(不存在)就删除(添加)一个类。
<div class="tumble">Some text.</div>
$('div.tumble').toggleClass('bounce')
<div class="tumble bounce">Some text.</div>
$('div.tumble').toggleClass('bounce')
<div class="tumble">Some text.</div>
html
.html() 返回String
从匹配的第一个元素中获取HTML内容。
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
$('div.demo-container').html();
<div class="demo-box">Demonstration Box</div>
.html(htmlstring) 返回jquery
设置每一个匹配元素的html内容。
$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');
<div class="demo-container">
<p>All new content. <em>You bet!</em></p>
</div>
.text() 返回String
得到匹配元素集合中每个元素的文本内容结合,包括他们的后代。
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
$('div.demo-container').text()
Demonstration Box list item 1 list item 2
.text()
方法不能使用在 input 元素上。 输入的文本需要使用 .val() 方法。
.text(textString) 返回jquery
设置匹配元素集合中每个元素的文本内容为指定的文本内容。
$('div.demo-container').text('<p>This is a test.</p>');
<div class="demo-container">
<p>This is a test.</p>
</div>
.val() 返回String,Array
获取匹配的元素集合中第一个元素的当前值。
$('select.foo option:selected').val(); // 从下拉框中获取值
$('select.foo').val(); // 从一个或更多的下拉框中获取值
$('input:checkbox:checked').val(); // 从选中的复选框中获取值
$('input:radio[name=bar]:checked').val(); // 从单选选框中获取值
.val(value) 返回jquery
设置匹配的元素集合中每个元素的值。
Traversing
filter
.eq(index) return jquery
.eq(-index)
获取匹配集合中指定的元素。
.first() return jquery
获取元素集合中第一个元素。
.last() return jquery
获取元素集合中最后一个元素。
.has(selector) return jquery
保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.filter(selector) return jquery
筛选出与指定表达式匹配的元素集合。
.is(selector) return boolean
检查当前匹配的元素集合匹配一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true。
.map(callback(index, domelement)) return jquery
通过一个函数匹配当前集合中的每个元素,产生一个包含的返回值的jQuery新对象。
$(':checkbox').map(function() { return this.id; }).get().join(',');
此调用的结果是字符串, "two,four,six,eight"
.
.not(selector) return jquery
删除匹配的元素集合中元素。
$('li').not(':even').css('background-color', 'red');
.slice(start,[end]) return jquery
减少匹配元素集合由索引范围到指定的一个子集。
Tree travesal
.children([selector]) return jquery
获得每个匹配元素集合元素的子元素,选择性筛选的选择器。
.closest(selector, [context]) return jquery
从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.find(selector) return jquery
获得当前元素匹配集合中每个元素的后代,选择性筛选的选择器。
.next([selector]) return jquery
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,它检索下一个匹配选择器的兄弟元素。
.nextAll([selector]) return jquery
获得每个匹配元素集合中所有下面的同辈元素,选择性筛选的选择器。
.nextUntil([selector]) return jquery
获取每个当前元素之后所有的同辈元素,但不包括选择器匹配的元素。
.offsetParent() return jquery
返回最近的被定过位的祖先元素。(祖先元素指该元素的上级元素,即包着它的外层元素)
.parent([selector]) return jquery
获得集合中每个匹配元素的父级元素,选择性筛选的选择器。
.parents([selector]) return jquery
获得集合中每个匹配元素的祖先元素,选择性筛选的选择器
.parentsUntil([selector]) return jquery
查找当前元素的所有的前辈元素,直到遇到选择器匹配的元素为止,不包括那个匹配到的元素。
.prev([selector]) return jquery
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。
.prevAll([selector]) return jquery
获得集合中每个匹配元素的所有前面的兄弟元素,选择性筛选的选择器。
.prevUntil([selector]) return jquery
获取每个元素但不包括选择器匹配的元素的所有前面的兄弟元素。
.siblings([selector]) return jquery
获得匹配元素集合中每个元素的兄弟元素,选择性筛选的选择器。
其它
.add(selector) return jquery
添加元素到匹配的元素集合。
.andself() return jquery
添加先前的堆栈元素集合到当前组合。
.contents() return jquery
获得每个匹配元素集合元素的子元素,包括文字和注释节点。
.end() return jquery
终止在当前链的最新过滤操作,并返回匹配的元素集合为它以前的状态。
event
page load
.ready(handler)
当DOM完全加载完成时,指定一个函数来执行。 return jquery
以下三个语法全部是等价的:
$(document).ready(handler)
$().ready(handler)
(this is not recommended)$(handler)
event handling
.bind(event TYPE, [cvent data], handler(event object)) return jquery
为一个元素绑定一个处理事件。
eventType一个包含一个或多个JavaScript事件类型的字符串,比如"click"或"submit,"或自定义事件的名称。
eventData将要传递给事件处理函数的数据映射。
handler(eventObject)每当事件触发时执行的函数。
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
.unbind(eventType, handler(eventObject))
Remove a previously-attached event handler from the elements.
.one(event TYPE, [event data], handler(event object)) return jquery
附加一个处理事件到元素。处理函数在每个元素上最多执行一次。
$('#foo').one('click', function() {
alert('This will be displayed only once.');
});
.trigger(eventtype, extraparameters)
为给定的事件类型执行所有处理器和行为附加到匹配的元素
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
.triggerHandler(event, ertraParameters) return object
.delegate(selector, eventType, handler) return jquery
为所有选择器匹配的元素附加一个处理一个或多个事件,现在或将来,基于一组特定的根元素。
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
.undelegate(event, eventType, handler) return jquery
为当前选择所匹配的所有元素移除一个事件处理程序,现在或将来,基于一组特定的根元素。
$("body").undelegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
.live(eventType, handler) return jquery
附加一个事件处理器到符合目前选择器的所有元素匹配,现在和未来。
$('.clickme').live('click', function() {
// Live handler called.
});
interaction helper
.hover(handlerin(eventobject), handlerout(eventobject)) return jquery
将二个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
.toggle([duration],[callback]) return jquery
显示或隐藏匹配元素。
$('#book').toggle('slow', function() {
// Animation complete.
});
event helper
.blur(handler(eventobject)) return jquery
为 "blur" 事件绑定一个处理函数,或者触发元素上的 "blur" 事件。
一个元素失去焦点将触发blur
事件。
$('#target').blur(function() {
alert('Handler for .blur() called.');
});
.change(handler(eventobject)) return jquery
为 "change" 事件绑定一个处理函数,或者触发元素上的 "change" 事件。
一个元素的值改变的时候将触发change
事件。此事件仅限于<input>
元素,<textarea>
框和<select>
元素。对于选择框,复选框和单选按钮,当用户用鼠标作出选择,该事件立即触发,但对于其他类型元素,该事件触发将推迟到元素失去焦点。
$('.target').change(function() {
alert('Handler for .change() called.');
});
.click(handler(eventobject)) return jquery
为 "click" 事件绑定一个处理函数,或者触发元素上的 "click" 事件。
一个元素被点击时候将触发 click 事件。任何HTML元素都可以收到此事件
$('#target').click(function() {
alert('Handler for .click() called.');
});
.dbclick(handler(eventObfect)) return jquery
为 "dblclick" 事件绑定一个处理函数,或者触发元素上的 "dblclick" 事件。
.error(handler(eventObject)) return jquery
这个方法是 .bind('error', handler)
的快捷方式。
error
事件被发送到元素,比如一张图片,通过文件引用,由浏览器加载。如果没有正确装入,这个事件就会被调用。
$('#book').error(function() {
alert('Handler for .error() called.')
});
.focus(handler(eventObject))
.focus([eventData], handler(eventObject)) return jquery
为 "focus" 事件绑定一个处理函数,或者触发元素上的 "focus" 事件。
具有焦点的元素通常是通过浏览器突出显示的,比如,点线围绕的元素线。焦点是用于确定哪些元素是第一个接收键盘相关的事件。
.focusin(handler(eventObject))
.focusin([eventdata],handler(eventObect))
将一个事件函数绑定到"focusin" 事件。
focusin
事件会在元素(或者其内部的任何元素)获得焦点焦点时触发。这跟 focus 事件的显著区别在于,它可以在父元素上检测子元素获得焦点的情况(换而言之,它支持事件冒泡)。
.focusout(handler(eventObject))
.focusput([eventdata],handler(eventObect))
将一个事件函数绑定到"focusout" 事件。
.keydown(handler(eventobject))
为 "keydown" 事件绑定一个处理函数,或者触发元素上的 "keydown" 事件。
当用户在一个元素上第一次按下键盘上的键的时候,keydown
事件就会发送给这个元素。它可以绑定到任何元素,但该事件只是发送到具有焦点的元素上。在不同浏览器之间聚焦元素可以有很多,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的。
.keypress(handler(eventobject))
为 "keypress" 事件绑定一个处理函数,或者触发元素上的 "keypress" 事件。
当浏览器捕获一个元素键盘输入时keypress
就会发送个元素。这是类似keydown
事件,除了在关键重复情况。如果用户按下并按住这个键,一keydown
事件触发一次,但不同的是keypress
为每个插入的字符都触发事件。此外,组合键(如Shift)会触发keydown
事件,但不会触发keypress
事件。
.keyup(handler(eventObjct))
为 "keyup" 事件绑定一个处理函数,或者触发元素上的 "keyup" 事件。
当用户在一个元素上释放按键的时候,keydown
事件就会发送给这个元素。它可以绑定到任何元素,但该事件只是发送到具有焦点的元素上。在不同浏览器之间聚焦元素可以有很多,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的。
$('#target').keyup(function() {
alert('Handler for .keyup() called.');
});
.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] ) return jquery
载入远程 HTML 文件代码并插入至 DOM 中。
.mousedown(handler(eventObject))
.mousedown([eventdata], handler(eventObject)) return jquery
为 "mousedown" 事件绑定一个处理函数,或者触发元素上的 "mousedown" 事件。
当鼠标指针在元素上和按下鼠标键,mousedown
事件被发送到这个元素。任何HTML元素都可以收到此事件。
.mouseenter(handler(eventObject)) return jquery
为 mouse enters(鼠标进入) 事件绑定一个处理函数,或者触发元素上的 mouse enters(鼠标进入) 事件。
mouseenter
JavaScript事件是Internet Explorer专有的。由于事件的一般效用,jQuery的模拟这一事件,以便它可用于所有浏览器。当鼠标指针进入的元素时,此事件发送到一个元素。任何HTML元素都可以接受此事件。
.mouseleave( handler(eventObject) )
mouseleave
JavaScript事件是Internet Explorer专有的。由于事件的一般效用,jQuery的模拟这一事件,以便它可用于所有浏览器。当鼠标指针离开元素时,此事件发送到一个元素。任何HTML元素都可以接受此事件。
.mousemove(handler(eventobject))
当鼠标指针在元素内移动时,mousemove
事件就会被发送到这个元素,任何HTML元素都可以接受此事件。
.mouseout(handler(eventobject))
当鼠标指针离开元素时,mouseout
事件就会被发送到这个元素,任何HTML元素都可以接受此事件。
.mouseup(handler(eventobject))
当鼠标指针在元素内,并且鼠标按键被释放时,mouseup
事件就会被发送到这个元素,任何HTML元素都可以接受此事件。
.mouseover(handler(eventobject))
当鼠标指针进入元素内时,mouseover
事件就会被发送到这个元素,任何HTML元素都可以接受此事件。
.resize(handler(eventobject))
为 "resize" 事件绑定一个处理函数,或者触发元素上的 "resize" 事件。
当浏览器window的尺寸改变时,resize
事件将被绑定到window
元素:
.scroll(handler(eventobject))
为 "scroll" 事件绑定一个处理函数,或者触发元素上的 "scroll" 事件。
$('#target').scroll(function() {
$('#log').append('<div>Handler for .scroll() called.</div>');
});
.select(handler(eventobject)) return jquery
为 "select" 事件绑定一个处理函数,或者触发元素上的 "select" 事件。
当用户在一个元素中进行文本选择时,select
事件就会被发送到这个元素。此事件被限制在<input type="text">
和<textarea>
。
$('#target').select(function() {
alert('Handler for .select() called.');
});
.submit(handler(eventobject))
为 "submit" 事件绑定一个处理函数,或者触发元素上的 "submit" 事件。
当用户试图提交表单时,submit
事件将被发送到一个元素。它只能附加在<form>
元素。表单可以通过点击一个明确的<input type="submit">
, <input type="image">
, 或者 <button type="submit">
,或者当某些表单元素获取焦点时敲击Enter(回车键),都可以提交。
event object
event.currentTarget return element
在事件冒泡阶段中的当前DOM元素
$("p").click(function(event) {
alert( event.currentTarget === this ); // true
});
event.data return anything
当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind。
$("a").each(function(i) {
$(this).bind('click', {index:i}, function(e){
alert('my index is ' + e.data.index);
});
});
event.isDefaultPrevented() return boolean
根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。
$("a").click(function(event){
alert( event.isDefaultPrevented() ); // false
event.preventDefault();
alert( event.isDefaultPrevented() ); // true
});
event.isImmediatePropagationStopped() return boolean
根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。
event.isPropagationStopped() return boolean
根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。
event.namespace return string
当事件被触发时此属性包含指定的命名空间。
$("p").bind("test.something", function(event) {
alert( event.namespace );
});
$("button").click(function(event) {
$("p").trigger("test.something");
});
event.pageX return Number
鼠标相对于文档的左边缘的位置。
event.pageY return Number
鼠标相对于文档的顶部边缘的位置。
event.prevetnDefault() return undefined
阻止默认事件行为的触发。
$("a").click(function(event) {
event.preventDefault();
$('<div/>')
.append('default ' + event.type + ' prevented')
.appendTo('#log');
});
event.relatedTarget return element
在事件中涉及的其它任何DOM元素。
event.result return object
这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined
。
$("button").click(function(event) {
return "hey";
});
$("button").click(function(event) {
$("p").html( event.result );
});
event.type return string
$("a").click(function(event) {
alert(event.type); // "click"
});
event.timestamp return number
这个属性返回事件触发时距离1970年1月1日的毫秒数。
event.target return element
最初触发事件的DOM元素。
这是注册事件时的对象,或者它的子元素。通常用于比较 event.target
和 this
来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
event.which return string
针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键。
effect
basic
.show() return jquery
.show(duration,[callback])
.show([durantion], [earning],[callback])
duration '毫秒数'
callback在动画完成时执行的函数
持续时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast'
和 'slow'
分别代表200和600毫秒的延时。
$('#clickme').click(function() {
$('#book').show('slow', function() {
// Animation complete.
});
});
.hide() return jquery
隐藏匹配的元素。
sliding
.slideDown([duration], [callback]) return jquery
用滑动动画显示一个匹配元素。
持续时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast'
和 'slow'
分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400
毫秒的延时。
如果提供回调函数参数,回调函数会在动画完成的时候调用。这个对于将不同的动画串联在一起按顺序排列是非常有用的。这个回调函数不设置任何参数,但是this
是存在动画的DOM元素,如果多个元素一起做动画效果,值得注意的是每执行一次回调匹配的元素,而不是作为一个整体的动画一次。
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
// Animation complete.
});
});
.slideUp([duration], [callback])
.slideUp()
方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,弥补了显示物品的方式
.slideToggle([duration],[callback])
.slideToggle()
方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去或滑上来,看似透露或隐瞒的项目
Fading
.fadeIn([duration],[callback]) return jquery
通过淡入的方式显示匹配元素。
.fadeIn()
方法通过匹配元素的不透明度做动画效果。
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
.fadeOut([duration],[callback]) rturn jquery
通过淡出的方式显示匹配元素。
.fadeTo(duration, opacity,[callback]) return jquery
调整匹配元素的透明度。
$('#clickme').click(function() {
$('#book').fadeTo('slow', 0.5, function() {
// Animation complete.
});
});
.fadeToggle([duration], [easing],[callback]) retuen jquery
Display or hide the matched elements by animating their opacity.
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
});
custom
.animate( properties, [ duration ], [ easing ], [ callback ] )
执行一个CSS属性设置的自定义动画。
.stop( [ clearQueue ], [ jumpToEnd ] ) retur jquery
停止匹配元素当前正在运行的动画。
.delay( duration, [ queueName ] )
设置一个延时来推迟执行队列中之后的项目。
.ajax
low level interface
jQuery.ajax(url,[settings]) return jqXHR
执行一个异步的HTTP(Ajax)的请求。
url一个用来包含发送请求的URL字符串。
settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
Example: 保存数据到服务器,成功时显示信息。
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
shorthand methods
.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
载入远程 HTML 文件代码并插入至 DOM 中。
$(function(){ } )
类似python的main函数
${'#idname'}
id选择器
$('.classname')
class 选择器
一般idname为form表单的
idname $('#idname').submit(function(){})
html中idname为'idname'的元素执行submit动作时,执行function函数。
$('#idname input').not($('#idname1')).not($('#idname2')).each(function(){})
表单元素中除‘idname1’、‘idname2’外都执行function