jQuery学习笔记9 - jQuery的辅助工具属性和方法

jQuery的辅助工具属性和方法

jQuery还为我们提供了许多的辅助工具方法，以便于我们进行各种常用的代码逻辑处理。
例如：

检测用户浏览器的指定特性。
判断指定变量的类型。
操作指定DOM元素的函数队列。
操作指定DOM元素上的任意附加数据。
去除字符串两侧的连续空白字符、解析JSON字符串等。

方法	版本	描述
浏览器检测属性——用于检测浏览器的特性和bug信息
jQuery.boxModel	1.0~1.3~1.8	检测浏览器是否使用标准盒模型渲染当前页面。请使用jQuery.support.boxModel替代。
jQuery.browser	1.0~1.3~1.9	以对象形式返回用户浏览器的相关信息。
jQuery.support	1.3	以对象形式返回用户浏览器的特性或bug信息。
遍历方法——用于遍历数组元素或对象属性
jQuery.each()	1.0	遍历对象属性或数组元素，并执行指定的回调函数。
jQuery.map()	1.0	遍历对象属性或数组元素，执行指定的回调函数，并返回以函数的返回值组成的结果数组。
jQuery.grep()	1.0	遍历对象属性或数组元素，执行指定的过滤函数，并返回过滤后的结果数组。
each()	1.0	遍历当前jQuery对象匹配的所有DOM元素，并执行指定的回调函数。
map()	1.2	遍历当前jQuery对象匹配的所有DOM元素，执行指定的回调函数，并返回以函数的返回值组成的结果数组。
附加数据、函数队列操作方法
data()	1.0	获取或设置匹配元素上的指定附加数据。
removeData()	1.0	删除匹配元素上指定的附加数据。
queue()	1.2	获取或设置匹配元素上的指定函数队列。
dequeue()	1.2	移除每个匹配元素的指定队列中的第一个函数，并执行被移除的函数
clearQueue()	1.4	清空匹配元素上的指定函数队列。
扩展方法——用于扩展全局jQuery对象或jQuery实例对象的属性和方法
jQuery.extend()	1.2	扩展全局jQuery对象的属性和方法。
jQuery.fn.extend()	1.2	扩展jQuery原型对象的属性和方法，以便于实例对象使用。
遍历方法——用于遍历数组元素或对象属性
jQuery.contains()	1.4	判断指定元素内是否包含另一个元素。
jQuery.globalEval()	1.0.4	全局性地执行一段JavaScript代码。
jQuery.inArray()	1.2	在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
jQuery.isArray()	1.3	判断指定参数是否是一个数组。
jQuery.isEmptyObject()	1.4	判断指定参数是否是一个空对象。
jQuery.isPlainObject()	1.4	判断指定参数是否是一个纯粹的对象。
jQuery.isFunction()	1.2	判断指定参数是否是一个函数。
jQuery.isNumeric()	1.7	判断指定参数是否是一个数字值。
jQuery.isWindow()	1.4.3	判断指定参数是否是一个窗口。
jQuery.isXMLDoc()	1.1.4	判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档。
jQuery.makeArray()	1.2	将一个类数组对象转换为真正的数组对象。
jQuery.noop()	1.4	一个空函数，它什么也不做。
jQuery.now()	1.4.3	返回当前时间距1970年1月1日午夜所经过的毫秒数。
jQuery.parseHTML()	1.2	手动触发元素上的任意事件，但不会触发元素的默认事件行为，也不支持事件冒泡。
jQuery.parseJSON()	1.4.1	将格式完好的JSON字符串转为与之对应的JavaScript对象。
jQuery.parseXML()	1.5	将字符串解析为对应的XML文档。
jQuery.trim()	1.0	去除字符串两端的空白字符。
jQuery.type()	1.4.3	确定JavaScript内置对象的类型，并返回小写形式的类型名称。
jQuery.unique()	1.1.3	根据元素在文档中出现的先后顺序对DOM元素数组进行排序，并移除重复的元素。

全局jQuery.each() 函数

jQuery.each()函数用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。
所谓的上下文，意即该函数内部的this指针引用了该元素。

该函数属于全局jQuery对象。

语法
jQuery.each( object, callback )

object: Object类型指定需要遍历的对象或数组。
参数object可以是对象或数组。如果是对象，则遍历该对象的每个属性；如果是数组，则遍历该数组中的每个元素。
callback: Function类型指定的用于循环执行的函数。

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

jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

示例：

// 遍历数组元素
$.each( [1, 2, 3] , function(i, item){
    alert("索引=" + i + "; 元素=" + item);  
} );

// 遍历对象属性
$.each( { name: "张三", age: 18 } , function(property, value){
    alert("属性名=" + property + "; 属性值=" + value);    
} );

var array = [];
array[2] = "Code";
array[4] = "Player";
// 会遍历索引为0、1、2、3、4的元素，其中0、1、3的元素是undefined
$.each( array , function(i, item){
    alert("索引=" + i + "; 元素=" + item);  
} );

//将所有的<li>元素的innerHTML改为"编号n"(n为1、2、3……)。
$.each( $("ul li"), function(index, element){
    // this === element
    $(element).html( "编号" + (index + 1) );  
});

全局jQuery.map() 函数

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

jQuery库中还有一个同名的实例方法map()，它仅用于对当前jQuery对象所匹配的元素进行遍历处理。

语法
jQuery.map( object, callback )

object: Array/Object类型指定的需要处理的数组或对象。
callback: Function类型指定的处理函数。

jQuery.map()函数将遍历数组的元素(或对象的属性)并分别执行函数callback，函数中的this将指向全局对象(window)。jQuery.map()还会为函数传入两个参数：其一是当前迭代的元素或属性值，其二是当前迭代项的数组索引或对象属性名。

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

示例：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}

// 遍历数组
var arr = [ "CodePlayer", 15, true ];
var result = $.map( arr, function(value, index){
    if( typeof value === "string"){
        // 如果是字符串类型，就返回null，null值将被忽略
        return null;
    }else{
        return value;
    }
} );
w( result ); // 15,true

// 遍历对象
var obj = { name: "CodePlayer", age: 18 };
var result2 = $.map( obj, function(value, key){
    return { "name": key, "value": value };     
});
w( result2 ); // [object Object],[object Object]

// 遍历jQuery对象匹配的元素
var result3 = $.map( $("[name=uid]:checked"), function(dom, key){
    return dom.value;       
});
w( result3 ); // 1,2,4

jQuery.grep() 函数

jQuery.grep()函数用于使用指定的函数过滤数组中的元素，并返回过滤后的数组。
源数组不会受到影响，过滤结果只反映在返回的结果数组中。
该函数属于全局jQuery对象。

语法
jQuery.grep( array, function [, invert ] )

array: Array类型将被过滤的数组。
function: Function类型指定的过滤函数。
invert: 可选/Boolean类型默认值为false。指定是否反转过滤结果

该函数将遍历数组元素，并执行过滤函数function。它会为function提供两个参数：其一为当前迭代的数组元素，其二是当前迭代元素在数组中的索引。
如果未指定invert参数，或该参数为false，则结果数组将包含function返回true的所有元素。如果参数invert为true，则结果数组将包含function返回false的所有元素。

示例：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}

var arr = [ 10, 25, 3, 0, -3 , 20, 6, 8, 11 ];
function filter(value, index){
    return value > 10;
}

var result = $.grep( arr, filter );
// 保留了所有大于10的元素
w( result ); // 25,20,11

var result2 = $.grep( arr, filter, true );
// 保留了所有不大于10的元素
w( result2 ); // 10,3,0,-3,6,8

jQuery.each() 函数

each()函数用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。
所谓的上下文，意即该函数内部的this指针引用了该元素。
该函数属于jQuery对象(实例)

语法
jQueryObject.each( callback )

each()函数将根据匹配到的每一个元素循环调用函数callback。每次调用函数callback时，each()函数都会将callback函数内部的this引用指向当前正在迭代的元素，并为其传入两个参数。第一个参数是当前迭代元素在匹配到的元素中的索引值(从0开始计数)，第二个参数是当前迭代元素(与this的引用相同)。
each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

示例：

//html
<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>
//javascript
//将所有的<li>元素的innerHTML改为"编号n"(n为1、2、3……)。
$("ul li").each(function(index, element){
    // this === element
    $(element).html( "编号" + (index + 1) );  
});

jQuery.map() 函数

map()函数用于处理当前jQuery对象匹配的所有元素，并将处理结果封装为新的数组。返回封装该数组的jQuery对象。

语法
jQueryObject.map( callback )

map()函数将根据匹配的所有元素遍历执行该函数，函数中的this将指向当前迭代的元素。map()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素。
每次执行callback函数的返回值将作为结果数组中的一个元素，如果函数的返回值为null或undefined，则不会被添加到结果数组中。map()函数的返回值就是封装该结果数组的jQuery对象。

示例：

//html
<input id="n1" name="uid" type="checkbox" checked="checked" value="1">
<input id="n2" name="uid" type="checkbox" checked="checked" value="2">
<input id="n3" name="uid" type="checkbox" value="3">
<input id="n4" name="uid" type="checkbox" checked="checked" value="4">
//javascript
var $checkedUid = $("[name=uid]:checked");

// 将所有匹配元素的value值封装为结果数组，并返回封装了这个结果数组的jQuery对象
var $result = $checkedUid.map( function(index, element){
    // 函数内部的this === element
    return this.value;  
} );

// 输出封装的结果数组中索引为1的元素
document.writeln( $result.get( 1 ) ); // 2

// 获取封装的整个结果数组
var array = $result.get();
document.writeln( array ); // 1,2,4

jQuery.data() 函数

data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。
通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。

该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用removeData()函数。

语法

用法一：jQueryObject.data( [ key [, value ] ])
以指定的键名key存取数据。如果指定了value参数，则表示以键名key存放值为value的数据；如果没有指定value参数，则表示读取之前以键名key存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据。
用法二：jQueryObject.data( object )
以对象形式同时传入任意多个key-value形式的数据，对象的每个属性就是键名key，属性值就是value。

注意：

data()函数的所有”存储数据”操作针对当前jQuery对象所匹配的每一个元素；所有”读取数据”操作只针对第一个匹配的元素。
data()函数的返回值是任意类型，返回值的类型取决于当前data()函数执行的是”存储数据”操作还是”读取数据”操作。
– 如果data()函数执行的是”存储数据”操作，则返回当前jQuery对象本身；如果是”读取数据”操作，则返回读取到的数据。
– 如果当前jQuery对象匹配多个元素，读取数据时，data()函数只以其中第一个匹配的元素为准。
– 如果执行data(key)函数(仅传入一个参数key)时找不到相应的数据，则返回undefined。
– 如果执行data()函数(不带任何参数)时找不到相应的数据，则返回一个空的对象(没有任何属性)。

示例：

//html
<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

//javascript
var $li = $("li");
// 同时向所有的li元素存储数据
$li.data("name", "CodePlayer");
$li.data("desc", "专注于编程开发技术分享");
$li.data("url", "http://www.365mini.com/");

var $n5 = $("#n5"); // 通过n4、n5、n6都可以读取数据
//  返回键值name所对应的数据
document.writeln( $n5.data("name") ); // CodePlayer

// 以对象形式返回所有的数据
var obj = $("#n6").data();
for(var i in obj){
    document.writeln( i + "=" + obj[i] + "<br>");   
}
/*输出：
name=CodePlayer
desc=专注于编程开发技术分享
url=http://www.365mini.com/
*/

//移除掉n4上存储的键名为name的数据
$("#n4").removeData("name");
// 虽然$li匹配3个li元素，但是读取数据只以第一个li元素n4为准，因此返回undefined
document.writeln( $li.data("name") ); // undefined

jQuery.trim() 函数

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

该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止)。它会清除包括换行符、空格、制表符等常见的空白字符。
该函数属于全局的jQuery对象。

语法
jQuery.trim( str )
如果参数str不是字符串类型，该函数将自动将其转为字符串(一般调用其toString()方法)。如果参数str为null或undefined，则返回空字符串(“”)。

示例：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}

// 输出两侧添加双引号，以便于区分字符串边界
w( '"' + $.trim( "   CodePlayer   " ) + '"'); // "CodePlayer"
// 只会去除两端的连续空白字符
w( '"' + $.trim( "   Code Player   " ) + '"'); // "Code Player"
w( '"' + $.trim( "\r\n\t   CodePlayer   \t" ) + '"'); // "CodePlayer"


w( '"' + $.trim( "" ) + '"'); // ""
w( '"' + $.trim( 12 ) + '"'); // "12"
w( '"' + $.trim( null ) + '"'); // ""
w( '"' + $.trim( undefined ) + '"'); // ""
w( '"' + $.trim( new Object() ) + '"'); // "[object Object]"

$.browser:获取浏览器的名称与版本信息

在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，还可以通过$.browser.version方式获取浏览器版本信息。

例如，调用$.browser对象，获取浏览器名称并显示在页面中，如下图所示：

$(function () {
        var strTmp = "您的浏览器名称是：";
        if ($.browser.chrome) { //谷歌浏览器
            strTmp += "Chrome";
        }
        if ($.browser.mozilla) { //火狐相关浏览器
            strTmp += "Mozilla FireFox";
        }
        strTmp += "<br /><br /> 版本号是：" //获取版本号
               strTmp+=$.browser.version;
        $(".content").html(strTmp);
    });

jquery 1.9.0 以上版本 jquery去掉了对 $.browser 的支持,采用$.support 来判断浏览器类型

$.isPlainObject():检测对象是否为原始对象

调用名为$.isPlainObject的工具函数，能检测对象是否为通过{}或new Object()关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为：
$.isPlainObject (obj);
其中，参数obj表示需要检测的对象名称。

例如，通过$.isPlainObject()函数，检测某个指定的对象是否为原始，并将结果显示在页面中，如下图所示：

$(function () {
        var obj = "null";
        var strTmp = "您定义了一个：";
        if ($.isPlainObject(obj)) { //检测是否为原始对象
            strTmp += "原始对象";
        }
        else {
            strTmp += "非原始对象";
        }
        $(".content").html(strTmp);
    });

$. param:URL操作函数

调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：
$. param (obj);
参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。

通过调用工具函数$.param()可以将一个对象进行序列化并编码成可以在地址栏中直接执行的URL字符串。

param和serialize的区别是什么？前者是对任意的参数进行URL地址格式的转换，而后者仅属于form提交的数据转换。

例如，通过$.param()函数，对指定的对象进行序列化编码，使其成为可执行传值的URL地址，并将该地址显示在页面中，如下图所示：

$(function () {
        //基本信息对象
        var objInfo = new Object();
        objInfo.name = "白富美";
        objInfo.sex = 1;
        //序列化对象
        var objNewInfo =$.param(objInfo);
        //显示序列化后的对象
        var strTmp = "<b>对象 白富美 序列化后</b>：<br/><br/>";
        strTmp += objNewInfo;
        //显示在页面中
        $(".tip").show().append(strTmp);
    });

扩展jQuery对象的属性和方法

如果我们要开发基于jQuery的插件，我们一般需要在jQuery对象上添加自定义的属性和方法。jQuery为我们提供了两个主要的方法，以分别为全局jQuery对象或实例jQuery对象扩展自定义的属性和方法。

jQuery.extend()

jQuery.extend()扩展Object对象

jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象。
该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上。
该函数属于全局jQuery对象。

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

参数	描述
deep	可选/Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该”属性对象”的属性也将进行合并。
target	Object类型目标对象，其他对象的成员属性将被复制到该对象上。
object1	可选/Object类型第一个被合并的对象。
objectN	可选/Object类型第N个被合并的对象。

如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

示例：

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
    document.body.innerHTML += "<br/>" + html;
}
var x = { name:"CodePlayer" };
var y = { age: 18 };
var z = { site: "www.365mini.com"  };

// y和z的属性将被合并复制到对象x上
var obj = $.extend( x, y, z );
w( obj === x ); // true
w( obj.name ); // CodePlayer
w( obj.age ); // 18
w( obj.site ); // www.365mini.com

//如果多个被合并对象有相同的属性，则后者会覆盖之前的属性。
var x = { name:"CodePlayer", age: 20 };
var y = { age: 18 };
var z = { site: "www.365mini.com", age: 21  };

var obj = $.extend( x, y, z );
// 三个对象都有age属性，以最靠后的对象z为准
w( obj.age ); // 21

//如果只为该函数指定一个参数，则表示省略target参数，target参数默认为jQuery对象本身。
var x = { 
    sayHi: function(){
        alert("这是新增的测试方法");
    }
};
// 只有一个参数，则表示省略target参数，target参数默认为jQuery对象本身
var obj = $.extend( x );
w( obj === $ ); // true
obj.sayHi(); // 这是新增的测试方法

使用$.extend()扩展工具函数

调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：
$. extend ({options});
参数options表示自定义插件的函数内容。

例如，调用$.extend()函数，自定义一个用于返回两个数中最大值的插件，并在页面中将插件返回的最大值显示在页面中，如下图所示：

<script type="text/javascript">
    /*------------------------------------------------------------/
    功能：返回两个数中最小值
    参数：数字p1,p2
    返回：最小值的一个数
    示例：$.MinNum(1,2);
    /------------------------------------------------------------*/
    (function ($) {
        $.extend({
            "MinNum": function (p1, p2) {
                return (p1 > p2) ? p2 : p1;
            }
        });
    })(jQuery);
    $(function () {
        $("#btnShow").bind("click", function () {
            $(".tip").html("");
            var strTmp = "17与18中最小的数是：";
            strTmp +=$.MinNum(17, 18);
            //显示在页面中
            $(".tip").show().append(strTmp);
        });
    });
</script>

jQuery.fn.extend()

jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。

jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。
该函数属于jQuery的原型对象(jQuery.fn)。

语法
jQuery.fn.extend( object )

object: Object类型指定的对象，该对象的每个属性都将被复制到jQuery的原型对象上，从而提供新的jQuery实例方法。

jQuery.fn.extend()函数的返回值是Object类型，返回jQuery的原型对象(即jQuery.fn)。
示例：

//html
姓名：<input id="name" name="name" type="text" >
<br>
<input name="opt" type="checkbox" value="A">A
<input name="opt" type="checkbox" value="B">B
<input name="opt" type="checkbox" value="C">C
<input name="opt" type="checkbox" value="D">D
<br>
<input id="btn" type="button" value="点击">

//javascript
var obj = {
    site: "CodePlayer",
    check: function(){
        // 扩展到jQuery原型上后，这里的this表示当前jQuery对象
        this.prop("checked", true);
        return this;
    },
    isEmpty: function(){
        return !$.trim( this.val() );
    }
};

// 将对象obj的属性和方法扩展到jQuery的原型对象上，以便于jQuery实例对象调用。
$.fn.extend( obj );
$("#btn").click(function(){
    if( $("#name").isEmpty() ){
        alert("姓名不能为空!");
        return false;
    }
    $("[name=opt]").check( ); // 全选复选框
    
    alert( $("body").site ); // CodePlayer
});