前边的话

  jQuery提供部分与元素非亲非故的工具方法,不必选兰月素,就足以直接选择那一个艺术。要是知道原生javascript的继续原理,那么就能分晓工具方法的实质。它是概念在jQuery构造函数上的方法,即jQuery.method(),所以能够平昔使用。而那三个操作成分的法子,是概念在构造函数的prototype对象上的办法,即jQuery.prototype.method(),所以必须扭转实例(即选瓜时素)后接纳。把工具方法知情成像javascript原生函数那样能够直接行使的秘籍就行了。上边将详细介绍jQuery的常用工具方法

 

要素相关

【each()】

  它是一个通用的迭代函数,能够用来无缝迭代对象和数组。数组和好像数组的对象通过三个尺寸属性(如二个函数的参数对象)来迭代数字索引,从0到
length – 一。别的对象通过其属性名进行迭代

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()】

   检查3个DOM元素是另1个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()】

  删除3个在先储存的数额片段  

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"

  如果目的有1个里面包车型客车[[Class]]和2个浏览器的内置对象的
[[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中,数组检查测试是3个经文难题,当出现网页中含有三个框架的风貌时,数组检验就不再轻便

  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()方法,未有找到相配成分时它回到-一。假设数组第2个因素匹配参数,那么$.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()方法会删除数组供给的要素,以使全体剩余成分通过过滤函数的自笔者批评。该测试是三个函数字传送递1个数组成分和该数组内那么些的索引值。唯有当测试重临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()方法接受贰个函数,然后回来3个新函数,并且那个新函数使用钦命的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() 此方法不接受任何参数

  当您一味想要传递2个空函数的时候,就用她吗

  那对一部分插件小编很有用,当插件提供了3个可选的回调函数接口,那么只要调用的时候从不传递这么些回调函数,就用jQuery.noop来代表施行

【now()】

  重返2个数字,表示近日岁月

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

  $.now()方法是表明式(new Date).getTime()再次来到数值的一个简写

【parseHTML()】

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

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

jQuery.parseHTML 使用原生的DOM成分的成立函数将字符串转变为1组DOM成分,然后,能够插入到文书档案中。

  私下认可意况下,假若未有点名或加以null or undefinedcontext是当下的document。假使HTML被用在另1个document中,比如二个iframe,该frame的文件能够运用

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

【parseJSON()】

  接受三个标准格式的 JSON 字符串,并再次回到解析后的 JavaScript 对象

jQuery.parseJSON( json )

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

 

相关文章

网站地图xml地图