實例解析jQuery工具函數(shù)
一、$.browser對象屬性
屬性列表 說明
webkit webkit相關(guān)瀏覽器則返回true,否則返回false,如google,傲游。
mozilla mozilla相關(guān)瀏覽器則返回true,否則返回false,如火狐
safari safari相關(guān)瀏覽器則返回true,否則返回false,如safari
opera opera相關(guān)瀏覽器則返回true,否則返回false,如opera
msie msie相關(guān)瀏覽器則返回true,否則返回false,如IE,360,搜狗
version 返回對應(yīng)瀏覽器的版本
$(function () {
if ($.browser.msie) {
alert("IE瀏覽器");
}
if ($.browser.webkit) {
alert("webkit瀏覽器");
}
if ($.browser.mozilla) {
alert("mozilla瀏覽器");
}
if ($.browser.safari) {
alert("safari瀏覽器");
}
if ($.browser.opera) {
alert("opera瀏覽器");
}
alert($.browser.version);
})
二、boxModel
返回一個布爾值,如果是W3C盒子模型則返回true,否則返回false。
盒子模型分兩類,一類是W3C盒子模型,一類是IE盒子模型。兩者的根本區(qū)別在于W3C的盒子模型不包括padding與border,僅指content的Height和Width,而IE盒子模型 包含padding與border。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
if ($.support.boxModel) {
alert("W3C盒子模型!");
}
else {
alert("IE盒子模型!");
}
})
</script>
</head>
<body>
</body>
</html>
上面的例子彈出W3C盒子模型,如果刪除掉頂部的兩行,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
$(function () {
var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, value) {
document.write(index + ":");
document.write(value + "<br/>");
});
})
輸出:
0:1
1:2
2:3
3:4
4:5
$.each()遍歷數(shù)組。
$(function () {
var arr = { "張三": "23","李四": 22,"王五": "21" };
$.each(arr, function (index, value) {
document.write(index + ":");
document.write(value + "<br/>");
});
})
輸出:張三:23
李四:22
王五:21
元素遍歷
<head>
<title></title>
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("p").each(function () {
$(this).css("background-color", "red");
});
//一下三行代碼與以上三行效果一樣
//$.each($("p"), function () {
// $(this).css("background-color", "red");
//})
})
</script>
</head>
<body>
<p>我是第一個P</p>
<p>我是第二個P</p>
<p>我是第三個P</p>
<p>我是第四個P</p>
<p>我是第五個P</p>
</body>
</html>
四、$.grep()
篩選符合條件的元素,返回一個新數(shù)組
語法:$.grep(Arrar,fn(value,index)); 要注意下回調(diào)函數(shù)的參數(shù)的順序,第一個是值,第二個是索引。
$.grep(Arrar,fn(value,index),[bool]); 第三個參數(shù)表示是否取反,true表示取反,false表示不取反。
$(function () {
var arr = [2, 5, 34, 22, 8];
var arr1 = $.grep(arr, function(value, index) {
return index <= 2 && value < 10;
})
document.write(arr1.join()); //輸出2,5
})
六、$.map()
改變函數(shù)內(nèi)的數(shù)據(jù),接受一個數(shù)組或類數(shù)組對象作為參數(shù)
$(function () {
var arr = [2, 5, 34, 22, 8];
var arr1 = $.map(arr, function (value, index) {
if (value > 5 && index < 3) {
return value - 10;
}
})
document.write(arr.join() + "<br/>"); //2,5,34,22,8 可以看到原數(shù)組不改變
document.write(arr1.join()); //24 新數(shù)組只獲得了操作之后的結(jié)果
})
七、$.inArray()
如果數(shù)組中存在被搜索元素,則返回被搜索元素的索引
$(function () {
var arr = [1, 2, 3, 4, 5];
alert($.inArray(4,arr)); //彈出 3
})
八、$.trim()
去除字符串兩邊的空格
$(function () {
var str = " 你在他鄉(xiāng)還好嗎? ";
document.write("11" + str + "11" + "<br/>"); //輸出 11 你在他鄉(xiāng)還好嗎? 11
document.write("11" + $.trim(str) + "11"); //輸出 11你在他鄉(xiāng)還好嗎?11 //加個11是為了看清楚差別。
})
九、測試操作
$.isArray(obj) 檢測參數(shù)是否是數(shù)組
$.isFunction(obj) 檢測參數(shù)是否是一個函數(shù)
$.isEmptyObject(obj) 檢測參數(shù)是否是一個空對象
$.isPlainObject(obj) 檢測參數(shù)是否是一個純粹對象,即對象是否通過{}或new Object()關(guān)鍵字創(chuàng)建。
$.contains(container,contained) 檢測一個DOM節(jié)點是否包含另一個DOM節(jié)點。是則返回true否則表示false。注意參數(shù)是DOM對象并非jQuery對象。
$(function () {
var arr = [1, 2, 3, 2, 1];
document.write(jQuery.isArray(arr)); //返回true
var str = "123";
document.write(jQuery.isArray(str)); //返回false
})
$(function () {
var f = fun1;
alert($.isFunction(fun1)); //返回true
})
function fun1() { }
$(function () {
var obj1 = {};
var obj2 = { name: "張飛" };
alert($.isEmptyObject(obj1)); //返回true obj1是空對象
alert($.isEmptyObject(obj2)); //返回false obj2不是空對象
})
$(function () {
var obj1 = {};
var obj2 = { name: "張飛" };
var obj3 = new Object();
var obj4 = null;
alert($.isPlainObject(obj1)); //true 通過{}創(chuàng)建
alert($.isPlainObject(obj2)); //true 通過{}創(chuàng)建
alert($.isPlainObject(obj3)); //true 通過new Object()創(chuàng)建
alert($.isPlainObject(obj4)); //flase 不是通過{}或new Object()創(chuàng)建
})
$(function () {
alert($.contains($("#div1")[0],$("#p1")[0])); //返回true,注意參數(shù)是DOM對象,并非jQuery對象
})
十、$.param()
序列化成url字符串
$.param(obj,[bool]); 第二個參數(shù)為可選參數(shù),表示是否淺層序列化
$(function () {
var man = { Name: "張飛", Age: 23 };
var str = $.param(man);
document.write(str); //Name=%E5%BC%A0%E9%A3%9E&Age=23
var str1 = decodeURI(str);
document.write("<br>" + str1); //Name=張飛&Age=23
})
十一、$.makeArray()
將數(shù)組或類數(shù)組對象的屬性復(fù)制到一個新的數(shù)組(真的是數(shù)組)中,并返回該新數(shù)組。
var arr = [1,3,5,7,9];
$(function () {
var arr1 = $.makeArray(arr);
document.write(arr1.join()); //輸出 1,3,5,7,9
})
十二、$.merge()
該函數(shù)接受兩個數(shù)組或類數(shù)組對象,將第二個參數(shù)附加到第一個參數(shù)上面,返回第一個參數(shù),第一個數(shù)組會修改,第二個不會。
var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 8, 10];
$(function () {
var arr3 = $.merge(arr1, arr2);
document.write(arr1.join() + "<br/>"); //1,3,5,7,9,2,4,6,8,10
document.write(arr2.join() + "<br/>"); //2,4,6,8,10
document.write(arr3.join() + "<br/>"); //1,3,5,7,9,2,4,6,8,10
})
十三、$.parseJSON()
該函數(shù)會解析JSON格式的字符串,并返回解析結(jié)果(對象)。 類似于JSON.parse(),注意:jQuery只定義了JSON解析函數(shù),并沒有定義序列化函數(shù)。
var man = { name: "張三", age: 23 };
var str = JSON.stringify(man);
document.write(str + "<br/>"); //{"name":"張三","age":23}
var man1 = $.parseJSON(str);
document.write(man1.name + man1.age); //張三23
十四、$.proxy()
類似于Function對象的bind()方法,接受函數(shù)作為第一個參數(shù),對象作為第二個參數(shù),并返回一個新函數(shù),該函數(shù)會作為第二個參數(shù)對象的方法調(diào)用。
$(function () {
var obj = {
name: "John",
test: function () {
alert(this.name); //當id為test的按鈕點擊時,彈出姓名
$("#test").unbind("click", obj.test); //并取消事件綁定(下次再點擊不會彈出姓名)
}
};
$("#test").click(jQuery.proxy(obj, "test")); //綁定object對象里面的方法test
})
十五、$.unique(array)
刪除元素數(shù)組中的重復(fù)元素
$(function () {
var arr = [1, 2, 3, 2, 1];
jQuery.unique(arr);
alert(arr.join()); //返回 3,2,1
})
十六、$.extend()
合并對象中的元素
$(function(){
var result=$.extend({},{name:"Tom",age:21}, {name:"Jerry",sex:"Boy"});
alert(result.name); //輸出 Jerry 后面的會覆蓋前面的,result始終只是一個對象
})
省略dest參數(shù),extend方法原型中的dest參數(shù)是可以省略的,如果省略了,則該方法就只能有一個src參數(shù),而且是將該src合并到調(diào)用extend方法的對象中去。
要特別注意的一點是:后面的值會覆蓋前面同名的值。
$(function(){
$.extend({
hello:function(){alert('hello');} //該方法只有一個參數(shù),意味著將hello方法合并到j(luò)Query全局對象中去
});
$.hello(); //彈出 hello
})
命名空間示例:
$(function(){
$.extend({net:{}}); //擴展一個命名空間
$.extend($.net,{
hello:function(){alert('hello');} //將hello方法綁定到命名空間net里去
})
$.net.hello(); //通過net命名空間調(diào)用方法
})
拷貝方法原型:
extend(boolean,dest,src1,src2,src3...)
其中第一個參數(shù)boolean表示是否進行深層拷貝。
$(function(){
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",country:"USA"} },
{ last: "Resig", location: {state: "MA",country:"China"} } );
alert(result.location.state); //輸出 MA
//result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}
var result=$.extend( false, {},
{ name: "John", location: {city: "Boston",country:"USA"} },
{ last: "Resig", location: {state: "MA",country:"China"} } );
alert(result.location.city); //輸出 undefined
//result={name:"John",last:"Resig",location:{state:"MA",county:"China"}} 注意沒有city,只是合并了location,location里面的屬性不管
})
以上就是本文的全部內(nèi)容,希望對大家有所幫助,同時也希望多多支持腳本之家!

