首頁 > 文章 > web前端 > 實例解析jQuery工具函數

實例解析jQuery工具函數

高洛峰原創: 2016-12-03 10:53:581005瀏覽

一、$.browser物件屬性

　　屬性列表　　　　　　　　　　　　　　　　　相關瀏覽器則回傳true，否則回傳false，如google，傲遊。

　 mozilla　　　　　　 mozilla相關瀏覽器則回傳true，否則回傳false，如火狐

opera　　　　　　 opera相關瀏覽器則回傳true，否則回傳false，如opera

msie　　　　　　　 msie相關瀏覽器則回傳true，否則回傳false,如IE，360，搜尋狗

〠 reee

二、boxModel

　　回傳一個布林值，如果是W3C盒子模型則回傳true，否則回傳false。

　　盒子模型分兩類，一類是W3C盒子模型，一類是IE盒子模型。兩者的根本差異在於W3C的盒子模型不包括padding與border，僅指content的Height和Width，而IE盒子模型　　包含padding與border。

$(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);
})

　　上面的範例彈出W3C盒子模型，如果刪除掉頂部的兩行，//W3C//DTD XHTML 1.0TYPE html/ .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 。則彈出的是IE盒子模型。

數組和物件的操作

三、$.each()

　　此工具函數不僅能夠完成指定數組的遍歷，也能夠實現頁面中元素的遍歷。

　　語法：$.each(obj,fn(para1,para2))　　obj要遍歷的數組或對象，fn為每個遍歷元素執行的回調函數，para1表示數組的序號或對象的屬性，para2表示數組的元素和物件的屬性。

<!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>

$(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()遍历数组。

元素遍歷

$(function () {
  var arr = { "张三": "23","李四": 22,"王五": "21" };
  $.each(arr, function (index, value) {
  document.write(index + ":");
  document.write(value + "<br/>");
  });
 })
　　　　输出：张三:23
　　　　　　　李四:22
　　　　　　 王五:21

〜)

　　　　語法：$.grep(Arrar,fn(value ,index));　　要注意下回呼函數的參數的順序，第一個是值，第二個是索引。

　　　　　　　$.grep(Arrar,fn(value,index),[bool]);　　第三個參數表示是否取反，true表示取反，false表示不取反。

<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>

六、$.map()

改變函數內的數據，接受一個陣列或類別陣列物件作為參數

$(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
 })

　如果陣列中存在被搜尋元素，則傳回被搜尋元素的索引

$(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　　可以看到原数组不改变
  document.write(arr1.join());　　　　　　　 //24　　新数组只获得了操作之后的结果
 })

八、$.trim()

　　　　$.isArray(obj)　　　　檢測參數是否為陣列

　　　　$.isFunction(obj)　　檢測參數是否為函數檢測參數是否為函數。　檢測參數是否為空物件

　　　　$.isPlainObject(obj)　　　檢測參數是否為純粹對象，即物件是否透過{}或new Object()關鍵字建立。

　　　　$.contains(container,contained)　　偵測一個DOM節點是否包含另一個DOM節點。是則回傳true否則表示false。注意參數是DOM物件並非jQuery物件。

$(function () {
 var arr = [1, 2, 3, 4, 5];
 alert($.inArray(4,arr));　　//弹出 3
})

十、$.param()

　層序列化

$(function () {
 var str = " 你在他乡还好吗？ ";
 document.write("11" + str + "11" + "<br/>");　　//输出 11 你在他乡还好吗？ 11
 document.write("11" + $.trim(str) + "11");　　　//输出 11你在他乡还好吗？11　　　　//加个11是为了看清楚差别。
})

十一、$.makeArray()

　　將數組或類別數組物件的屬性複製到一個新的數組(　　組將數組或類別物件的屬性複製到一個新的數組是數組真的是數組一個新數組。

$(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　　通过{}创建
 alert($.isPlainObject(obj2));　　//true　　通过{}创建
 alert($.isPlainObject(obj3));　　//true　　通过new Object()创建
 alert($.isPlainObject(obj4));　　//flase　　不是通过{}或new Object()创建
})
$(function () {
 alert($.contains($("#div1")[0],$("#p1")[0]));　　//返回true，注意参数是DOM对象，并非jQuery对象
})

十二、$.merge()

　　此函數接受兩個陣列或類別陣列對象，將第二個參數附加到第一個參數上面，返回第一個參數，第一上面，返回第一個參數個數組會修改，第二個不會。

$(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
})

十三、$.parseJSON()

　　此函數會解析JSON格式的字串，並傳回解析結果()。類似JSON.parse()，注意:jQuery只定義了JSON解析函數，並沒有定義序列化函數。

var arr = [1,3,5,7,9];
$(function () {
 var arr1 = $.makeArray(arr);
 document.write(arr1.join());　　//输出 1,3,5,7,9
})

十四、$.proxy()

　　類似於Function物件的bind()方法，接受函數作為第一個參數，物件是第二個參數，並傳回一個新函數，該物件作為第一個參數函數會作為第二個參數物件的方法呼叫。

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
})

十五、$.unique(array)

　　刪除元素數組中的重複元素

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

$(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
　　})

　省略dest参数,extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去。

　　要特别注意的一点是：后面的值会覆盖前面同名的值。

$(function(){
 $.extend({
 hello:function(){alert(&#39;hello&#39;);}　　//该方法只有一个参数，意味着将hello方法合并到jQuery全局对象中去
 });
 $.hello(); //弹出 hello
})

　　命名空间示例：

$(function(){
 $.extend({net:{}}); //扩展一个命名空间
 $.extend($.net,{
 hello:function(){alert(&#39;hello&#39;);} //将hello方法绑定到命名空间net里去
 })
 $.net.hello(); //通过net命名空间调用方法
})

　拷贝方法原型：

extend(boolean,dest,src1,src2,src3...)

其中第一个参数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里面的属性不管
})

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript交換兩個變數值的七種解決方案下一篇：JavaScript交換兩個變數值的七種解決方案

看更多

實例解析jQuery工具函數

相關文章