jQuery常用方法

 

　　jQuery提供一些与元素无关的工具方法，不必选中元素，就可以直接使用这些方法。如果理解原生javascript的继承原理，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例(即选中元素)后使用。把工具方法理解成像javascript原生函数那样可以直接使用的方法就行了。下面将详细介绍jQuery的常用工具方法

元素相关

【each()】

　　它是一个通用的迭代函数，可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到 length - 1。其他对象通过其属性名进行迭代

jQuery.each( collection, callback(indexInArray, valueOfElement) )

　　jQuery.each()函数和 jQuery(selector).each()不一样，后者专门用来遍历一个jQuery对象。jQuery.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。（该值也可以通过访问this关键字得到，但是JavaScript将始终将this值作为一个Object ，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是迭代的对象

$.each( ['a','b','c'], function(index,value){
    //Index #0: a
    //Index #1: b
    //Index #2: c
    console.log( "Index #" + index + ": " + value );
});

$.each( { name: "John", lang: "JS" }, function(index,value){
    //Index #name: John
    //Index #lang: JS
    console.log( "Index #" + index + ": " + value );
});

【contains()】

 　　检查一个DOM元素是另一个DOM元素的后代

jQuery.contains( container, contained )

$.contains( document.documentElement, document.body ); // true

【extend()】

　　将两个或更多对象的内容合并到第一个对象

jQuery.extend( target [, object1 ] [, objectN ] )

target: Object 一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
object1: Object 一个对象，它包含额外的属性合并到第一个参数
objectN: Object 包含额外的属性合并到第一个参数

$.extend({}, object1, object2);

jQuery.extend( [deep ], target, object1 [, objectN ] )

deep: Boolean 如果是true，合并成为递归（又叫做深拷贝）。
target: Object 对象扩展。这将接收新的属性。
object1: Object 一个对象，它包含额外的属性合并到第一个参数.
objectN: Object 包含额外的属性合并到第一个参数

$.extend(true, object1, object2);

数据相关

【data()】

　　存储任意数据到指定的元素并且/或者返回设置的值

jQuery.data( element, key, value )
jQuery.data( element, key )
jQuery.data( element )

element:Element 要关联数据的DOM对象
key: String 存储的数据名
value:Object 新数据值

$.data(document.body, 'foo', 52);
$.data(document.body, 'bar', 'test');
console.log($.data( document.body, 'foo' ));//52
console.log($.data( document.body ));//{foo: 52, bar: "test"}

【removeData()】

　　删除一个先前存储的数据片段　　

jQuery.removeData( element [, name ] )

var div = $("div");
$.data(div, "test1", "VALUE-1");
$.data(div, "test2", "VALUE-2");
console.log($.data(div));//{test1: "VALUE-1", test2: "VALUE-2"}
$.removeData(div, "test1");
console.log($.data(div));//{test2: "VALUE-2"}

类型检测

【type()】

　　type()方法用于检测javascript对象的类型

　　如果对象是undefined或null，则返回相应的“undefined”或“null”

jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"

　　如果对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同，返回相应的 [[Class]] 名字

jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" 
jQuery.type( /test/ ) === "regexp"

　　所以该方法类似于原生javascript中经过封装的Object.prototype.toString()方法

function type(obj){
    return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

【isArray()】

　　在原生javascript中，数组检测是一个经典问题，当出现网页中包含多个框架的场景时，数组检测就不再容易

　　jQuery提供了isArray()方法用来检测数组

console.log($.isArray([]));//true

【isFunction()】

　　isFunction()方法用来检测传入的参数是否为函数

console.log($.isFunction(function(){}));//true

　　如果使用原生javascript，使用typeof即可实现

console.log(typeof function(){});//"function"

【isNumeric()】

　　isNumeric()方法用来检测传入的参数是否为数字

　　[注意]参数为纯数字或数字字符串都可以

$.isNumeric("-10");  // true
$.isNumeric(-10);  // true

　　如果使用原生javascript，使用typeof即可实现，但结果稍有不同

console.log(typeof 10);//"number"
console.log(typeof '10');//"string"

【isEmptyObject()】

　　isEmptyObject()方法用来检测一个对象是否为空对象

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

【isPlainObject()】

　　isPlainObject()方法用来检测一个对象是否是原生对象，即通过 "{}" 或者 "new Object" 创建的对象

console.log($.isPlainObject({}));//true
console.log($.isPlainObject(document.documentElement));//false
console.log($.isPlainObject(new Boolean(true)));//false
console.log($.isPlainObject(true));//false

数组相关

【inArray()】

　　inArray(value, array [, fromIndex ])方法类似于原生javascript的indexOf()方法，没有找到匹配元素时它返回-1。如果数组第一个元素匹配参数，那么$.inArray()返回0

　　参数fromIndex是数组索引值，表示从哪里在开始查找。默认值是0

var arr = [1,2,3,'1','2','3'];
console.log(arr.indexOf('2'));//4
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(0));//-1

var arr = [1,2,3,'1','2','3'];
console.log($.inArray('2',arr));//4
console.log($.inArray(3,arr));//2
console.log($.inArray(0,arr));//-1

【makeArray()】

　　makeArray()方法用于将一个类数组对象转换为真正的javascript数组

console.log($.isArray({ 0: 'a', 1: 'b', length: 2 }));//false
console.log($.isArray($.makeArray({ 0: 'a', 1: 'b', length: 2 })));//true

　　如果使用原生javascript，可以使用slice()方法将类数组对象变成真正的数组

var arr = Array.prototype.slice.call(arrayLike);

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

【unique()】

　　unique()方法用于数组去重

var $arr = [document.body,document.body];
console.log($.unique($arr));//[body]

var $arr = [1,2,1];
console.log($.unique($arr));//[2,1]

　　使用原生javascript实现如下

Array.prototype.norepeat = function(){
    var result = [];
    for(var i = 0; i < this.length; i++){
        if(result.indexOf(this[i]) == -1){
            result.push(this[i]);
        }
    }
    return result;
}

var arr = [1,2,1];
console.log(arr.norepeat());//[1,2]
var arr = [document.body,document.body];
console.log(arr.norepeat());//[body]

【grep()】

　　查找满足过滤函数的数组元素。原始数组不受影响

jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )
array: Array 用于查询元素的数组。
function: Function() 该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素，第二个参数是该元素的索引值。该函数应返回一个布尔值。this将是全局的window对象。
invert: Boolean 如果“invert”为false，或没有提供，函数返回一个“callback”中返回true的所有元素组成的数组，。如果“invert”为true，函数返回一个“callback”中返回false的所有元素组成的数组。

　　$.grep()方法会删除数组必要的元素，以使所有剩余元素通过过滤函数的检查。该测试是一个函数传递一个数组元素和该数组内这个的索引值。只有当测试返回true，该数组元素将返回到结果数组中。

　　该过滤器的函数将被传递两个参数：当前正在被检查的数组中的元素，及该元素的索引值。该过滤器函数必须返回'true'以包含在结果数组项

var result = $.grep( [0,1,2], function(n,i){
   return n > 0;
 });
console.log(result);//[1, 2]

var result = $.grep( [0,1,2], function(n,i){
   return n > 0;
 },true);
console.log(result);//[0]

【merge()】

　　合并两个数组内容到第一个数组

jQuery.merge( first, second )

console.log($.merge( [0,1,2], [2,3,4] ));//[0, 1, 2, 2, 3, 4]

其他

【proxy()】

　　proxy()方法接受一个函数，然后返回一个新函数，并且这个新函数使用指定的this

　　proxy()方法类似于bind()，但并不相同。区别在于，bind()方法是改变原函数的this指向，而proxy()方法是新建一个函数，并使用参数中的this指向，原函数的this指向并无变化

var a = 0;
function foo(){
    console.log(this.a);
}
var obj = {
    a:2
};
foo();//0
$.proxy(foo,obj)();//2
foo();//0

　　proxy()方法支持多种参数传递方式

function foo(a,b){
    console.log(a+b);   
}

$.proxy(foo,document)(1,2);//3
$.proxy(foo,document,1,2)();//3
$.proxy(foo,document,1)(2);//3

　　在绑定事件时一定要合理使用proxy()方法的参数传递方式，否则事件还没有发生，可能函数已经被调用了

$(document).click($.proxy(foo,window,1,2))

【trim()】

　　jQuery.trim()函数用于去除字符串两端的空白字符

　　这个函数很简单，没有多余的参数用法

console.log($.trim("    hello, how are you?    "));//'hello, how are you?'

 【noop()】

　　一个空函数

jQuery.noop() 此方法不接受任何参数

　　当你仅仅想要传递一个空函数的时候，就用他吧

　　这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行

【now()】

　　返回一个数字，表示当前时间

jQuery.now() 这个方法不接受任何参数

　　$.now()方法是表达式(new Date).getTime()返回数值的一个简写

【parseHTML()】

　　将字符串解析到一个DOM节点的数组中

jQuery.parseHTML( data [, context ] [, keepScripts ] )
data : String 用来解析的HTML字符串
context (默认: document): Element DOM元素的上下文，在这个上下文中将创建的HTML片段。
keepScripts (默认: false): Boolean 一个布尔值，表明是否在传递的HTML字符串中包含脚本。

　　jQuery.parseHTML 使用原生的DOM元素的创建函数将字符串转换为一组DOM元素，然后，可以插入到文档中。

　　默认情况下，如果没有指定或给定null or undefined，context是当前的document。如果HTML被用在另一个document中，比如一个iframe，该frame的文件可以使用

var result = $.parseHTML( "hello, my name is jQuery");
$('div').append(result);

数据操作

【data()】

　　该方法用于在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

data( key, value )
data( obj )
data( key )
data()

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });

console.log($("body").data("foo"));//52
console.log($("body").data());//{foo: 52, bar: Object, baz: Array(3)}

　　如果使用原生javascript，相当于

document.body.foo = 52;
console.log(document.body.foo);//52

【removeData()】

　　removeData()方法允许移除用.data()绑定的值。当带name参数调用的时候，.removeData()将删除那个特有的值，当不带任何参数的时候，所有的值将被移除。从jQuery的内部.data() 缓存不影响任何在文档中的HTML5的data-属性，使用.removeAttr()可以移除这些属性

　　当使用.removeData("name")时，如果没有这个属性名字是在内部数据缓存，jQuery将试图在元素上找到一个 data-的属性。为了避免重复查询 data- 属性，将这个名称设置为无论是null 或 undefined的值(例如 .data("name", undefined))，而不是使用.removeData()

removeData( [name] ) // [name]:String 要移除的存储数据名
removeData( [list] ) // [list]:Array,String 一个数组或空间分隔的字符串命名要删除的数据块

$('body').data("test1", "VALUE-1")
         .data("test2", "VALUE-2");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}
$('body').removeData("test1");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}

　　如果使用原生javascript，相当于

document.body.foo = 52;
console.log(document.body.foo);//52
delete document.body.foo;
console.log(document.body.foo);

队列操作

【queue()】

　　显示或操作匹配的元素上已经执行的函数队列

queue( [queueName ] ) //queueName : String 一个含有队列名的字符串。默认是 fx，标准的动画队列
queue( [queueName ], newQueue ) //newQueue:Array 一个替换当前列队内容的函数数组
queue( [queueName ], callback( next ) )//callback( next ):Function() 将要添加到队列中的新函数。当该函数被调用时，会从弹出队列中的下一个元素

var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);
var n = div.queue('fx');
console.log(n.length);//2

【clearQueue()】

　　从列队中移除所有未执行的项

clearQueue( [queueName ] )

集合操作

【each()】

　　遍历一个jQuery对象，为每个匹配元素执行一个函数

each( function(index, function(index, Element)) )

$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

【add()】

　　add()方法添加元素到匹配的元素集合。add()方法的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用

add( selector )
add( elements )
add( html )
add( jQuery object )
add( selector, context )

$('li').add('p')
$('li').add('<p id="new">new paragraph</p>')

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<div>div</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('li').add('div').css('background', 'lightgreen');
})
</script>

【get()】

　　通过检索匹配jQuery对象得到对应的DOM元素

get( [index ] ) index:Number 从0开始计数，用来确定获取哪个元素

$( "li" ).get( 0 )

【index()】

　　从匹配的元素中搜索给定元素的索引值，从0开始计数

index( [selector或element] )

　　如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

　　如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置。

　　如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

$('#bar').index();
listItem.index('li');
$('li').index($('li:gt(0)'));

【toArray()】

　　返回一个包含jQuery对象集合中的所有DOM元素的数组

toArray() 这个方法不接受任何参数

//[<li id="foo">, <li id="bar">]
alert($('li').toArray());

索引过滤

　　索引选择器是jQuery过滤选择器的一部分。与此同时，也存在功能相似的索引相关的方法，包括eq()、first()、last()

【eq()】

　　eq()方法匹配元素的集合为指定的索引的哪一个元素。eq()方法可以接受一个整数作为参数，以0为基数。若整数为负数，则从集合中的最后一个元素开始计数　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>
<script>
$('#btn1').click(function(){
    $('li').eq(0).css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').eq(-1).css('border','1px solid blue');    
})
$('#btn3').click(function(){
    $('li').eq(2).css('border','1px solid green');    
})
</script>

【first()】

　　first()方法获取匹配元素集合中第一个元素，该方法不接受参数

【last()】

　　last()方法获取匹配元素集合中最后一个元素，该方法不接受参数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
$('#btn1').click(function(){
    $('li').first().css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').last().css('border','1px solid blue');    
})
</script>

【end()】

　　终止在当前链的最新过滤操作，并返回匹配的元素的以前状态

end() 这个方法不接受任何参数

　　end() 方法主要用于 jQuery 的链式属性中。当没有使用链式用法时，我们通常只是调用变量名上的前一个对象，所以我们不需要操作栈。使用 end() 时，我们可以一次性调用所有需要的方法

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

　　在上面的代码中，首先在链式用法中只在第一个列表中查找样式为 foo 的项目，并将其背景色变成红色。然后 end() 返回调用 find() 之前的状态。因此，第二次 find() 将只会查找 <ul class="first"> 中的 '.bar'，而不是继续在 <li class="foo"> 中进行查找，结果是将匹配到的元素的背景色变成绿色

内容过滤

　　jQuery选择器中包括内容过滤选择器，而jQuery中也存在功能类似的内容过滤的方法，包括has()、filter()、is()、not()、map()、slice()

【has()】

　　has()方法用于筛选匹配元素集合中有相匹配的选择器或DOM元素的后代元素的父元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
    </li>
    <li>list item 3</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('li').has('ul').css('border', '1px solid lightblue');
})
</script>

【map()】

　　map()方法通过一个函数匹配当前集合中的每个元素

　　作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input value="text">
<input value="text">
<input value="text">
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('input').map(function(index,dom){
        dom.value += index;
    });
})
</script>

【filter()】

　　filter()方法从匹配的元素集合中筛选出指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('li').filter(':even').css('border','1px solid lightgreen')
})
</script>

　　filter()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素保留；否则，该元素在匹配集合中被去除 

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('li').filter(function(index,dom){
        if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')
            return true;
        }
    })
})
</script>    

【not()】

　　not()方法与filter()方法正好相反，它从匹配的元素集合中移除指定的元素，参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('li').not(':even').css('border','1px solid lightgreen')
})
</script>

　　not()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素被去除；否则，该元素在匹配集合中保留

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('li').not(function(index,dom){
        if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')
            return true;
        }
    })
})
</script>

【is()】

　　is()方法用于判断当前元素是否与参数相匹配，如果匹配，则返回true；否则，返回false。参数可以是一个选择器，DOM元素，jQuery对象或函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
$('li').click(function(){
    if($(this).is(':contains("2")')){
        $(this).css('border','1px solid black')
    }
})
</script>    

　　is()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回true，is()方法也返回true，如果函数返回false，is()方法也返回false

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<div id="result"></div>
<script>
var i = 0;
$('li').click(function(){
    ++i;
    if($(this).is(function(index,dom){
        $('#result').html(dom.innerHTML);
        if(i%2){
            return true;    
        }
    })){
         $(this).css('border','1px solid black')
    }
})
</script>

【slice()】

　　slice()方法根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象　

　　slice(start[,end])方法接受两个参数：start和end

　　start是一个整数，从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数

　　end是一个整数，从0开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从start开始，一直到最后

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
    $('li').slice(2,4).css('background', 'red');
})
</script>

【parseJSON()】

　　接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象

jQuery.parseJSON( json )

var obj = jQuery.parseJSON('{"name":"John"}');
console.log(obj.name === "John");//true