首页 专题 H5案例 前端导航 UI框架

JQuery学习笔记整理:工具类

作者:TG 日期: 2016-10-30 阅读: 1119
jQuery还提供了很多辅助工具方法,使用这些方法可以很方便的进行操作js代码逻辑。

使用方法会在后面一一给出例子:

each()  用于遍历指定的对象和数组,并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。

map()  用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。

boxModel  检测当前页面中浏览器是否使用标准盒模型渲染页面(从1.8版本开始,此属性已经移除)

browser  用来获取useragent的包含标志,读取自 navigator.userAgent。(从1.9版本开始,此属性已经移除)

support  它们代表了不同的浏览器功能或错误存在的属性集合。当他们不再需要在内部以提高页面的启动性能时,这些特定属性可能会被删除。

contains()  检查一个DOM元素是另一个DOM元素的后代。

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

$.fn.extend()  一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。

globalEval()  在全局上下文下执行一些JavaScript代码。

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

inArray()  在数组中查找指定值并返回它的索引(如果没有找到,则返回-1)。

isArray()  检测变量是一个数组。

isEmptyObject()  检测对象是否为空(不包含任何属性)。

isPlainObject()  测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的)

isFunction()  检测变量是否为一个Javascript 函数。

isNumeric()  检测变量是否是一个数字。

isWindow()  检测变量是否为一个window对象。

makeArray()  转换一个类似数组的对象成为真正的JavaScript数组。

noop()  一个空函数

now()  返回一个数字,表示当前时间。

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

parseJSON()  接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。

parseXML()  解析一个字符串到一个XML文档。

trim()  去掉字符串起始和结尾的空格。

type()  确定JavaScript内置对象的类型,并返回小写形式的类型名称。

unique()  删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组。


(1)each()
each()用于遍历指定的对象和数组,并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。

$.each( object, callback)

$.each()函数将根据每个成员(对象的属性或数组的元素)循环调用函数callback。每次调用函数callback时,$.each()函数都会将callback函数内部的this引用指向当前正在迭代的成员,并为其传入两个参数,第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数),第二个参数是当前迭代成员(与this的引用相同)

var arr = {name:'tg',age:1};   

$.each(arr,function(index,value){   

  console.log(this == value);   

  console.log(index + ':' +value);   

});


// true 

// name:tg  

// true 

// age:1


(2) map()
map()方法和each()方法的用法一样,只不过它会根据处理结果来封装为新的数组返回。

$.map( object, callback);

$.map()函数将根据每个成员(对象的属性或数组的元素)循环调用函数callback。每次调用函数callback时,$.map()函数都会将callback函数内部的this引用指向当前正在迭代的成员,并为其传入两个参数,第一个参数是当前迭代成员(与this的引用相同),第二个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)

注意:map()和each()回调函数传入参数虽然都是一个是当前迭代成员,一个是索引,但两者的位置含义不一样。


每次执行callback函数的返回值将作为结果数组中的一个元素,如果函数的返回值为null或undefined,则不会被添加到结果数组中。


var arrs = [1,'tg',3];   

var numberArray = $.map(arrs,function(value,index){   

  if(typeof value === 'number'){   

    return value;   

  };   

});   

console.log(numberArray);

// [1,3]


(3)support

它们代表了不同的浏览器功能或错误存在的属性集合。当他们不再需要在内部以提高页面的启动性能时,这些特定属性可能会被删除。

$.support

support的全部属性:http://www.jquery123.com/jQuery.support/


(4)contains()

contains()方法检查一个DOM元素是另一个DOM元素的后代。

$.contains( element, element )

两个参数都是Element类型(第一个是祖先元素,第二个是后代元素),返回布尔值。

<div class="box"><div class="child"></div></div>

<div class="item"></div>


var parent = document.querySelector('.box');   

var child = document.querySelector('.child');   

var item = document.querySelector('.item');   

console.log($.contains(parent,child));   // true

console.log($.contains(parent,item));  // false


(5)extend()

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

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

参数说明:

 deep : 可选/Boolean类型指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。  

 target : Object类型目标对象,其他对象的成员属性将被复制到该对象上。  

 object1 : 可选/Object类型第一个被合并的对象。  

 objectN : 可选/Object类型第N个被合并的对象。


var arr1 = {name:'tg'};   

var arr2 = {name:'ab',age:1};   

var arr3 = $.extend(arr1,arr2);   

console.log(arr3);


// {name: "ab", age: 1}

如果有同名属性,则以最后一个为主。


(6)$.fn.extend()

$.fn.extend()是jQuery扩展方法,可以将一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。

$.fn.extend( object )

$.fn.property = value;

$.fn.functionName = function(){}

例子:

$.fn.author = 'tg';   

$.fn.isCurrentAuthor = function(name){   

  if(name === 'tg'){   

    return true;   

  };   

  return false;   

};   

var obj = {   

  age: 1   

};   

$.fn.extend(obj);   


console.log($('body').author);   // "tg"

console.log($('body').age);    // 1

console.log($('.body').isCurrentAuthor('tg'));  // true


(7)globalEval()

globalEval() 在全局上下文下执行一些JavaScript代码。

$.globalEval( code );

例子:

var name = 'tg';   

function test(){   

  var name = 'tg2'        

  eval('console.log(name);');        

  $.globalEval('console.log(name);');   

};   

test();


// tg2

// tg


(8)grep()

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

$.grep( array, function [, invert ] );

参数:

 array :将被过滤的数组。  

 function : 指定的过滤函数, 它提供两个参数:第一个为当前迭代的数组元素,第二个是当前迭代元素在数组中的索引

 invert : 可选的Boolean类型,默认值为false。指定是否反转过滤结果。


var arr = [1,-1,2,-3];   

var grep = $.grep(arr,function(value,index){   

  return value > 0;   

});   


console.log(grep);  // [1, 2]


(9)inArray()

inArray()用来在数组中查找指定值并返回它的索引(如果没有找到,则返回-1)。

$.inArray( value, array [, fromIndex ] );

参数:

 value :用于查找的值

 array : 指定被查找的数组

 fromIndex : 可选,指定从数组的指定索引位置开始查找


注意:如果有多个相同的值,只会查找到第一个值的索引。可判断是否等于-1来确定是否存在指定值。

var arr = [1,-1,2,-3,1];   


console.log($.inArray(1,arr));  // 0


(10)判断数据类型方法

isArray() 检测变量是一个数组。  

isEmptyObject() 检测对象是否为空(不包含任何属性)。  

isPlainObject() 测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的)  

isFunction() 检测变量是否为一个Javascript 函数。  

isNumeric() 检测变量是否是一个数字。  


(11)isWindow()

isWindow() 检测变量是否为一个window对象。

$.isWindow( window );   // true  


(12)makeArray()

makeArray()用来转换一个类似数组的对象成为真正的JavaScript数组。

$.makeArray( object );

例子:

var obj = {name:'tg',age:1};   

console.log($.isArray(obj));   // false

var arr = $.makeArray(obj);   

console.log($.isArray(arr));  // true


(13) now()

now() 返回一个数字(时间戳),表示当前时间。

$.now();  // 1477884817100


(14)解析字符串

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

$.parseHTML( htmlString [, context ] [, keepScripts ] )

参数:

 htmlString : 需要解析并转为DOM节点数组的HTML字符串。  

 context :(Element)指定在哪个Document中创建元素,默认为当前文档的document。  

 keepScripts : 指定传入的HTML字符串中是否包含脚本,默认为false。


var str = '<div class="item">123<span>31</span></div>'; 

var html = $.parseHTML(str); 

$('.box').append(html);


// <div class="box"><div class="item">123<span>31</span></div></div>


parseJSON() 接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。

$.parseJSON( jsonString );

jsonString必须是标准格式的JSON字符串,例如:属性名称必须加双引号、字符串值也必须用双引号。

  例子:

var obj = $.parseJSON('{"name": "tg","age": 1}');   

console.log(obj.name); // "tg"


parseXML() 解析一个字符串到一个XML文档。



(15)trim()

trim()用来去掉字符串起始和结尾的空格。

$.trim( string );

例子:

var value = ' tg ';   

console.log(value);    // "  tg  "

console.log($.trim(value));  // "tg"


(16) type()

type()方法用来确定JavaScript内置对象的类型,并返回小写形式的类型名称。

$.type( object );

例子:

$.type(true);  // boolean

$.type( 2 );   // number


(17)unique()

unique方法用来删除数组中重复元素。

$.unique( array );

注意:只处理删除DOM元素数组,而不能处理字符串或者数字数组。







关注”全栈技术杂货铺“

全栈技术杂货铺