ホームページ > 記事 > ウェブフロントエンド > jQueryツール関数の解析例

jQueryツール関数の解析例

高洛峰オリジナル: 2016-12-03 10:53:581005ブラウズ

1. $.browser オブジェクトのプロパティ

プロパティリストMozilla Mozilla 関連ブラウザは True を返し、そうでない場合は False を返します (Firefox

Safari など) Safari 関連ブラウザ、それ以外の場合は False を返します (Safari

Opera など) Opera 関連ブラウザ、それ以外の場合は False を返します、As Operas msie Msie関連するブラウザは True を返し、それ以外の場合は false を返します (IE、360、Sogou など)

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

W3C の場合はブール値を返しますボックスモデルが使用された場合は true を返し、それ以外の場合は false を返します。

ボックスモデルには2種類あり、1つはW3Cボックスモデル、もう1つはIEボックスモデルです。 2 つの基本的な違いは、W3C ボックスモデルにはパディングとボーダーが含まれず、コンテンツの高さと幅のみを参照するのに対し、IE ボックスモデルにはパディングとボーダーが含まれることです。

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

上記の例では、先頭の 2 行を削除すると、db59b29944cb0b88d6ad198bb7f2842a 68ccb177a5de0ef9542dde7d35bae727。表示されるのは IE ボックスモデルです。

配列とオブジェクトの操作

3. $.each()

このツール関数は、指定された配列の走査を完了するだけでなく、ページ内の要素の走査も実現できます。

文法: $.each(obj,fn(para1,para2)) obj は走査される配列またはオブジェクト、fn は走査される各要素に対して実行されるコールバック関数、para1 は配列のシリアル番号または属性を表します。 para2 は要素とオブジェクトのプロパティを表します。

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

要素トラバーサル

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

条件を満たす要素をフィルタリングし、新しい配列を返します

構文 :$.grep(Arrar ,fn( value ,index)); コールバック関数のパラメータの順序に注意してください。最初のパラメータは値、2 番目のパラメータはインデックスです。

$.grep(Arrar,fn(value,index),[bool]); 3番目のパラメータは反転するかどうかを示し、trueは反転することを意味し、falseは反転しないことを意味します。 If 検索された要素が配列内に存在する場合、検索された要素のインデックスが返されます

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

$.isArray(obj) パラメータが配列かどうかを検出します

$.isFunction(obj) パラメータが配列であるかどうかを検出します。関数

$.isEmptyObject(obj) パラメータが空のオブジェクトかどうかを検出する

$.isPlainObject(obj) パラメータが純粋なオブジェクトであるかどうか、つまり、オブジェクトが{}またはnew Object( ) キーワード。

$.contains(container,contained) DOMノードに別のDOMノードが含まれているかどうかを検出します。「はい」の場合は true を返し、そうでない場合は false を意味します。パラメーターは jQuery オブジェクトではなく DOM オブジェクトであることに注意してください。

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

10. $.param()

URL文字列にシリアル化

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

11. $.makeArray()

プロパティをコピー配列または配列のようなものオブジェクトを新しい配列 (実際には配列) に変換し、新しい配列を返します。

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

Twelve, $.merge()

この関数は 2 つの配列または配列のようなオブジェクトを受け入れ、2 番目のパラメーターを最初のパラメーターに追加し、最初のパラメーターを返し、最初の配列になります。変更されますが、2 番目のものは変更されません。

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

13. $.parseJSON()

この関数はJSON形式の文字列を解析し、解析結果(オブジェクト)を返します。 JSON.parse() と同様に、注意: jQuery は JSON 解析関数のみを定義し、シリアル化関数は定義しません。

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

14. $.proxy()

Functionオブジェクトのbind()メソッドと同様に、最初のパラメータとして関数を、2番目のパラメータとしてオブジェクトを受け取り、新しい関数を返します。 , この関数は、2 番目のパラメーターオブジェクトのメソッドとして呼び出されます。

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

Fifteen, $.unique(array)

要素配列内の重複要素を削除します

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

　省略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で2つの変数の値を交換するための7つの解決策次の記事：JavaScriptで2つの変数の値を交換するための7つの解決策

続きを見る

jQueryツール関数の解析例

関連記事