前回のエッセイでは、jQuery のコンストラクターを分析しました。jQuery オブジェクトには、実際のコンストラクターであるプロトタイプ メソッド init があり、init のプロトタイプ オブジェクトとの参照関係が維持されます。インスタンスは、jQuery のインスタンスであるかのように、jQuery のプロトタイプ メソッドを通常どおり呼び出すことができます。舞台裏のコンストラクター init がどのように記述されているかを見てみましょう:
init: function( selector, context, rootjQuery ) {
...
}
このメソッドは 3 つのパラメーターを受け入れ、最初の 2 つのパラメーターは jQuery メソッドによって渡されることがわかります
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
セレクターは原則として任意の値を入力できますが、すべての値が意味を持つわけではありません。このパラメーターは未定義、DOM 要素、文字列、関数、jQuery オブジェクト、および通常の JavaScript オブジェクトのみが有効です。通常は入力されますが、値は入力されません。
に入力しないとエラーが報告されますconsole.log($());
//[コンストラクター: 関数、初期化: 関数、セレクター: ""、jquery: "1.7.1"、サイズ: 関数…]
コンテキストは、実行コンテキストまたは実行スコープとして渡すことも、DOM 要素、jQuery オブジェクト、および通常の JavaScript オブジェクトのいずれかで渡すこともできます
パラメータ rootjQuery: ドキュメント オブジェクトを含む jQuery オブジェクト。 document.getElementById() が見つからない場合に使用されます。 selector はセレクター式でコンテキストが指定されていません。 selector は関数であり、実際には $(document) です。
以下は 12 の状況に分けられ、さまざまなパラメーターに従って 1 つずつ説明されます
1.selector は false に変換できます
// Handle $(""), $(null), or $(undefined)
if ( !selector ) {
return this;
}
ソース コード内のコメントは非常にわかりやすく書かれています。これらの 3 つの状況では、何も処理せずに直接返します。
2. パラメーター セレクターは DOM 要素です
例: $(document)
// Handle $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
}
dom 要素である限り、ノード タイプが必要です。その後、このノードを jquery オブジェクトの最初の要素に変換し、それをコンテキストに割り当てます。length 属性は jQuery のプロトタイプ属性であり、デフォルトは 0 です。
// jQuery オブジェクトのデフォルトの長さは 0 です
長さ: 0、
ここに要素ができたら、length 属性を 1 に変更します。この操作を返すと、関数の実行結果は jQuery オブジェクトのままになるため、$(document).each() のようなチェーン呼び出しを実装できます。取得される最終オブジェクトは、{0:document,context:document,length:1....} に似ています。実際、DOM ノードを除くすべての状況が最終的にこの形式のオブジェクトになります。アラビア数字順に配置されているため、$(selector).get(0) の代わりに $(selector)[0] という形式を使用して DOM オブジェクトを取得できます。例:
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script src='jquery-1.7.1.js'></script>
<script>
console.log($('div'));
/*[div, div, div, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "div", constructor: function, init: function…]
0: div
1: div
2: div
context: document
length: 3
prevObject: jQuery.fn.jQuery.init[1]__proto__: jQuery[0]
selector: "div"
.
*/
</script>
</html>
3. パラメータは特殊な文字列「body」です
ドキュメントオブジェクトには body 要素が 1 つしかないため、処理のために個別にリストされます
// The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
ここには同時に満たさなければならない条件が 3 つあります。$('body',document) のような一見普通の書き方でも、コンテキストが存在してはならないという 2 番目の条件がよくわかりません。この状況では「無視」されます。」
console.log($('body',document));
/*
jQuery.fn.jQuery.init[1]
0: body
context: document
length: 1
prevObject: jQuery.fn.jQuery.init[1]
selector: "body"
__proto__: jQuery[0]
*/
結果は $('body') と同じですが、body にはコンテキストが 1 つしかなく、ドキュメントしか追加できないためかもしれません。コンテキストが文書であるかどうかを判断する必要があります。 3 番目の条件は、document.body が存在する必要があることです。では、最初の 2 つの条件は満たされるが、document.body が存在しないのはどのような状況でしょうか。 1 つ目は、js コードが html コードよりも前にロードされる場合、これは初心者がよく犯す間違いです。通常、次のように書かなければなりません。
$(function(){...})
または
$(document).ready(function(){...})
実際、これら 2 つは同じであり、同じメソッドを呼び出します。DOM はこの部分をロードして、後で分析します。このために、次のようなテスト HTML コードを作成できます:
<!doctype html>
<html>
<head>
<title></title>
<script src='jquery-1.7.1.js'></script>
<script>
$('body')
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
console.log(selector+context+document.body);
// The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
を読み込まずに実行できないようにするためのようです。
4 番目のタイプは、上記の文字列シチュエーション以外の文字列です。次の記事でさらに多くのシチュエーションを残します。以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
メモ帳++7.3.1
使いやすく無料のコードエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7417
15135952