Jq常用函数列表
1.$().each()
语法:$(selector).each(function(index,element))
示例:
$( "li" ).each(function() { $( this ).addClass( "foo" ); });
备注:1.回调函数出发基于当前element为上下文,所以回调中this引用当前element。
2.若想提前退出循环,回调中返回false即可。
3.$(selector).each(function(index,element))专门用于jq对象的迭代,而$.each(array,function(index,element))函数可迭代任何集合。
2.$().map()
语法:$(selector).map(callback(index,domElement))
示例:
$( ":checkbox" ) .map(function() { return this.id; })
备注:1.$(selector).map(callback(index,domElement))主要用于selector封装的jq对象的处理,而$.map(array,function(element,index))主要用于处理原生对象和数组,并且在1.6版本前是只能用于arrays的,之后才可用于objects.
2.函数中this引用当前每一次迭代的DOMElement
3.返回值为jq封装的数组,调用get()可获得基础数组
3.$.grep()
语法:$.grep(array,callback(element,index),invert)
示例:
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ]; arr = jQuery.grep(arr, function( a ) { return a !== 9; });
备注:1.此函数用于过滤出满足条件的元素,回调中默认返回true满足条件。
2.若invert为false或者不提供,回调中返回true的元素才会包含到结果集中,反之,回调中返回false的项才会包含到结果集中。
3.回调中this引用全局对象。
4.$().data()
语法: $.data(DOMElement,key,value)
示例:
$("#btn1").click(function(){ $("div").data("greeting", "Hello World"); });
备注:1.value可以是除undefined以外的任何js类型。
2. 此方法不会导致循环引用,不会出现内存泄露。
3.目前不支持xml文档,因为IE不允许通过扩展属性来附加数据
4.$.data(el,"name",undefined)<=>$.data(el,"name")
5.此为较底层方法,更方便的是使用$(selector).data(key,value)
6.jq1.4-1.4.3版本.data()会完全替代所有该元素上的数据,而不是像其他版本会extends以前的数据。
5.$.isFunction(obj)
语法:$.isFunction(obj)
示例:$.isFunction(function(){})
备注:....
6.$.inArray()
语法:$.inArray(value,array,fromIndex)
示例:
$.inArray(5+5,['8','9','10',10+''])
备注:1.fromIndex可选,表示从数组的某个位置开始搜索,default=0
2.比较是遵循严格比较,如$.inArray(5+5,['8','9','10',10+''])//return -1.
7.proxy
语法:$.proxy(function,context,[additionalAuguments]);$.proxy(context,name, [additionalAuguments]);
示例:
function proxy1(){ alert(this.title); }; var proxy2 = $.proxy(proxy1,{title:'hello'}); $('a').eq(0).click(proxy2); $('a').eq(0).unbind('click',proxy2); $('a').eq(0).unbind('click',proxy1);//效果同上一行
备注:1.返回一个含有指定上下文的新函数.
2.function:上下文将要被改变的函数;context:function上下文(this)将被设置为此原生对象;name:function名字;additionArgument:附加参数。
3.尽管绑定的是$.proxy()返回的函数,在解绑时,传递原函数时,jquery也能保证准确解绑,因为事件子系统认为他们是同一个,即具有相同id。
4.为准确解绑处理函数,最好指定命名空间,比如:'click.myproxy1'。
8.prependTo(),appendTo()
语法:$(content).prependTo(target);$(target).prepend(content);$(content).appendTo(target);$(target).append(content)
示例:
$( "h2" ).prependTo( $( ".container" ) ); $( "<p>Test</p>" ).appendTo( ".inner" );
备注:1.prependTo表示将指定的content插入到目标target容器内所有子元素的前面,返回prependTo或者prepend函数前面$(content)或$(target)的一个jq对象.
2.appendTo表示将指定的content插入到目标target容器内所有子元素的后面,返回appendTo或者append函数前面$(content)或$(target)的一个jq对象.
3.$(content).prependTo(target)/$(content).appendTo(target)中target可以是html结构字符串,html标签,jq对象或者直接的选择器标识(.prependTo('.inner')).
9.add()
语法:$(selector).add(element,context)
示例:
$("h1").add("p").add("span")
备注:1.element规定要添加到已存在的元素集合的选择器表达式、jQuery 对象、一个或多个元素、HTML 片段.
2.context可选,规定选择器表达式在文档中开始进行匹配的位置
10.position(),offset()
语法:$(selector).position(),$(selector).offset()
示例:$('p').position()
备注:1.offset不管元素或者其父元素如何定位,获取到的是该元素相对于视口的偏移,带参数时:$(selector).offset(value)/$(selector).offset(function(){})用来设置所有匹配元素的偏移坐标
2.position获取的是该元素相对与最近一个拥有相对或者绝对定位的父元素的偏移位置
附源码:
jQuery.fn.extend({ offset: function( options ) { if ( arguments.length ) { return options === undefined ? this : this.each(function( i ) { jQuery.offset.setOffset( this, options, i ); }); } var docElem, win, box = { top: 0, left: 0 }, elem = this[ 0 ], doc = elem && elem.ownerDocument;//返回document if ( !doc ) { return; } docElem = doc.documentElement; // Make sure it's not a disconnected DOM node if ( !jQuery.contains( docElem, elem ) ) { return box; } // If we don't have gBCR, just use 0,0 rather than error // BlackBerry 5, iOS 3 (original iPhone) if ( typeof elem.getBoundingClientRect !== strundefined ) { box = elem.getBoundingClientRect(); } win = getWindow( doc ); return { top: box.top + ( win.pageYOffset || docElem.scrollTop ) - ( docElem.clientTop || 0 ), left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 ) }; }, position: function() { if ( !this[ 0 ] ) { return; } var offsetParent, offset, parentOffset = { top: 0, left: 0 }, elem = this[ 0 ]; // fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is its only offset parent if ( jQuery.css( elem, "position" ) === "fixed" ) { // we assume that getBoundingClientRect is available when computed position is fixed offset = elem.getBoundingClientRect(); } else { // Get *real* offsetParent offsetParent = this.offsetParent(); // Get correct offsets offset = this.offset(); if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) { parentOffset = offsetParent.offset(); } // Add offsetParent borders parentOffset.top += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true ); parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true ); } // Subtract parent offsets and element margins // note: when an element has margin: auto the offsetLeft and marginLeft // are the same in Safari causing offset.left to incorrectly be 0 return { top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true ), left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true) }; }, offsetParent: function() { return this.map(function() { var offsetParent = this.offsetParent || docElem; while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position" ) === "static" ) ) { offsetParent = offsetParent.offsetParent; } return offsetParent || docElem; }); } });