Heim > Artikel > Web-Frontend > Beispiel für die Analyse einer jQuery-Tool-Funktion

Beispiel für die Analyse einer jQuery-Tool-Funktion

高洛峰Original: 2016-12-03 10:53:581005Durchsuche

1. $.browser-Objekteigenschaften

Eigenschaftsliste Beschreibung

webkit Gibt „true“ für Webkit-bezogene Browser zurück, andernfalls wird „false“ zurückgegeben, z. B. Google und Maxthon.

Mozilla-bezogene Browser geben „true“ zurück, andernfalls geben sie „false“ zurück, wie z. B. Firefox.

Safari-bezogene Browser geben „true“ zurück, andernfalls geben sie „false“ zurück, wie z. B. Safari.

Opera Relevante Browser werden dies tun Geben Sie true zurück, andernfalls geben Sie false zurück, z. B. opera

msie　　 msie-bezogene Browser geben true zurück, andernfalls geben Sie false zurück, z. B. IE, 360, Sogou

version Geben Sie die Version des entsprechenden Browsers zurück Version

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

2. boxModel

Gibt einen booleschen Wert zurück. Wenn es sich um ein W3C-Boxmodell handelt, gibt es true zurück, andernfalls gibt es false zurück.

Box-Modelle sind in zwei Kategorien unterteilt, eine ist das W3C-Box-Modell und die andere ist das IE-Box-Modell. Der grundlegende Unterschied zwischen den beiden besteht darin, dass das W3C-Boxmodell keine Polsterung und keinen Rand enthält, sondern sich nur auf die Höhe und Breite des Inhalts bezieht, während das IE-Boxmodell Polsterung und Rand enthält.

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

Das obige Beispiel zeigt das W3C-Boxmodell an. Wenn die oberen beiden Zeilen gelöscht werden, 73dd67f0837e4b2d735e7f75eaaaaac0 02365b1742a7b6aa9068d508e4a15bdd. Was angezeigt wird, ist das IE-Box-Modell.

Array- und Objektoperationen

3. $.each()

Diese Werkzeugfunktion kann nicht nur die Durchquerung des angegebenen Arrays abschließen, sondern auch die Durchquerung von Elementen realisieren auf der Seite.

Syntax: $.each(obj,fn(para1,para2)) obj ist das zu durchlaufende Array oder Objekt, fn ist die für jedes durchlaufene Element ausgeführte Rückruffunktion, para1 stellt die Seriennummer des Arrays dar oder das Attribut des Objekts, para2 repräsentiert die Elemente des Arrays und die Eigenschaften des Objekts.

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

Elementdurchquerung

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

4. $.grep()

Elemente filtern, die die Bedingungen erfüllen, und ein neues Array zurückgeben

Syntax: $.grep(Arrar,fn(value,index)); Hinweis Die Reihenfolge der Parameter der Rückruffunktion: Der erste ist der Wert und der zweite der Index.

　　　$.grep(Arrar,fn(value,index),[bool]); Der dritte Parameter gibt an, ob invertiert werden soll, true bedeutet invertiert, false bedeutet nicht invertiert.

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

6. $.map()

Ändern Sie die Daten in der Funktion und akzeptieren Sie ein Array oder Array- like object Als Parameter

$(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　　新数组只获得了操作之后的结果
 })

7. $.inArray()

Wenn das gesuchte Element im existiert Array, das gesuchte Element wird zurückgegeben. Durchsuchen Sie den Index des Elements

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

8. $.trim()

Leerzeichen auf beiden Seiten der Zeichenfolge entfernen

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

9. Testvorgang

$.isArray(obj) Erkennen Sie, ob der Parameter ein Array ist

$. isFunction(obj)　Erkennen Sie, ob der Parameter eine Funktion ist

　　$.isEmptyObject(obj)　　Erkennen Sie, ob der Parameter ein leeres Objekt ist

　　$.isPlainObject(obj)　　Erkennen Sie, ob der Parameter ein reines Objekt ist, d. h. ob das Objekt über das Schlüsselwort {} oder new Object() erstellt wurde.

　$.contains(container,contained)Erkennen Sie, ob ein DOM-Knoten einen anderen DOM-Knoten enthält. Wenn ja, wird true zurückgegeben, andernfalls bedeutet es false. Beachten Sie, dass der Parameter ein DOM-Objekt und kein jQuery-Objekt ist.

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

10. $.param()

Serialisiert in URL-String

$ param (obj,[bool]); Der zweite Parameter ist ein optionaler Parameter, der angibt, ob

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

11 , $.makeArray ()

Kopieren Sie die Eigenschaften eines Arrays oder arrayähnlichen Objekts in ein neues Array (eigentlich ein Array) und geben Sie das neue Array zurück.

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

12. $.merge()

Diese Funktion akzeptiert zwei Arrays oder arrayähnliche Objekte und The Der zweite Parameter wird an den ersten Parameter angehängt und der erste Parameter wird zurückgegeben. Das erste Array wird geändert, das zweite jedoch nicht.

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

13. $.parseJSON()

Diese Funktion analysiert die Zeichenfolge im JSON-Format und gibt das Analyseergebnis zurück (Objekt). Ähnlich wie bei JSON.parse(), Hinweis: jQuery definiert nur eine JSON-Analysefunktion und keine Serialisierungsfunktion.

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

14. $.proxy()

Ähnlich der bind()-Methode des Funktionsobjekts, die Funktionen akzeptiert Als erster Parameter wird das Objekt als zweiter Parameter verwendet und eine neue Funktion zurückgegeben, die als Methode des zweiten Parameterobjekts aufgerufen wird.

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

15. $.unique(array)

Doppelte Elemente im Elementarray löschen

$(function () {
 var arr = [1, 2, 3, 2, 1];
 jQuery.unique(arr);
 alert(arr.join());　　//返回　　3,2,1
})

16. $.extend()

Elemente im Objekt zusammenführen

$(function(){
 var result=$.extend({},{name:"Tom",age:21}, {name:"Jerry",sex:"Boy"});
　　alert(result.name); //输出 Jerry 后面的会覆盖前面的，result始终只是一个对象
})

　省略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里面的属性不管
})

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Sieben Lösungen zum Austausch der Werte zweier Variablen in JavaScriptNächster Artikel：Sieben Lösungen zum Austausch der Werte zweier Variablen in JavaScript

In Verbindung stehende Artikel

Mehr sehen