jQueryツール関数の解析例
1. $.browser オブジェクトのプロパティ
プロパティリストMozilla Mozilla 関連ブラウザは True を返し、そうでない場合は False を返します (Firefox
Safari など) Safari 関連ブラウザ、それ以外の場合は False を返します (Safari
Opera など) Opera 関連ブラウザ、それ以外の場合は False を返します、As Operas msie Msie関連するブラウザは True を返し、それ以外の場合は false を返します (IE、360、Sogou など)
Version 対応するブラウザのバージョンに戻ります
R$(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種類あり、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 行を削除すると、 。表示されるのは 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>
構文 :$.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
})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('hello');} //该方法只有一个参数，意味着将hello方法合并到jQuery全局对象中去
});
$.hello(); //弹出 hello
})
命名空间示例：
$(function(){
$.extend({net:{}}); //扩展一个命名空间
$.extend($.net,{
hello:function(){alert('hello');} //将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里面的属性不管
})
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7722
15
1642
14
1396
52
1289
25
1233
29
jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド
Feb 27, 2024 pm 06:45 PM
jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
徹底した分析: jQuery の長所と短所
Feb 27, 2024 pm 05:18 PM
jQuery は、フロントエンド開発で広く使用されている高速、小型、機能豊富な JavaScript ライブラリです。 2006 年のリリース以来、jQuery は多くの開発者にとって最適なツールの 1 つとなっていますが、実際のアプリケーションでは、いくつかの利点と欠点もあります。この記事では、jQuery の長所と短所を詳しく分析し、具体的なコード例で説明します。利点: 1. 簡潔な構文 jQuery の構文設計は簡潔かつ明確であるため、コードの読みやすさと記述効率が大幅に向上します。例えば、
jQueryで要素の高さ属性を削除するにはどうすればよいですか?
Feb 28, 2024 am 08:39 AM
jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
jQuery における eq の役割と応用シナリオを理解する
Feb 28, 2024 pm 01:15 PM
jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します
