$selector -- DOM を jquery オブジェクトにカプセル化する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

$selector -- DOM を jquery オブジェクトにカプセル化する方法

jacklove

Jun 11, 2018 pm 11:01 PM

dom

前書き: jquery に関して話さなければならないのは、jquery の強力なセレクター機能です。この機能は非常に強力で、セレクター機能のみを使用する必要がある友人のためにシズルモジュールが別に分離されています。 (この記事では jquery セレクターの強力な機能については説明しませんが、まず jquery が DOM 要素を jquery オブジェクトにカプセル化する方法について説明します)

1. Dom オブジェクトと jquery オブジェクト

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">测试</p>
<script>
	var oBox = document.getElementById(&#39;box&#39;);
	var oBox2 = document.querySelector(&#39;#box&#39;);
	var $Box = $(&#39;#box&#39;);
	
	console.log(oBox);
	console.log(oBox2);
	console.log($Box);
</script>
</body>
</html>

操作結果:

このことから、$() は DOM オブジェクトを jquery オブジェクトにカプセル化し、DOM オブジェクトも jquery[0] に格納されることがわかります。 jquery オブジェクトを DOM オブジェクトに変換するには、jquery[0] または jquery.get(0) を使用するだけでよいと言われるのはこのためです。

2. jquery をシミュレートします -- ID に従って jquery オブジェクトをカプセル化します

まず単純化して、カプセル化のプロセスの一部を見てみましょうjQueryのレートを上げるオブジェクト

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">测试</p>
<script>
	var $Box = $(&#39;#box&#39;);
	console.log(&#39;这是jquery对象&#39;);
	console.log($Box);
	
	
	console.log(&#39;------分界线------&#39;);
	(function(window,undefined){  
		var jQ = function(selector){  
			return new jQ.fn.init(selector);  
		};  
		jQ.fn = jQ.prototype = {  
			jquery:&#39;2.0.0&#39;,     //jquery版本号信息
			constructor: jQ,    //添加构造器属性
			length:0,			//初始length属性
			selector:&#39;&#39;,		//初始selector属性
			init: function(selector){
				var match, elem, rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
				match = rquickExpr.exec( selector );
				//console.log(match);	//正则匹配找出id的值
				if ( !selector ) {	//如果selector为&#39;&#39;,null,undefind直接退出操作
					return this;
				}
				elem = document.getElementById(match[2]);
				this[0] = elem;
				this.context=document;
				this.length = 1;
				this.selector = selector;
				
				return this;
			} 
		}   
		jQ.fn.init.prototype = jQ.fn;  
		  
		window.$$ = jQ;    	
	})( window );  
	
	console.log(&#39;这是模拟的对象&#39;);
	console.log($$(&#39;#box&#39;));   //输出封装的对象
</script>
</body>

②出力結果：（Firefoxブラウザで開いたもの）

なお、chromeブラウザでは表示に多少の違いがあります

jquery は配列のようなオブジェクト形式を表示します。

③、分析

上記のコードが理解できない人は、以前に書いた記事[jqueryソースコード]を参照することをお勧めしますソースコードの学習を始める前に解決してください。

正規表現の場合は、ソースコード内の正規表現を直接コピーして、正規表現処理の結果を出力して確認することができます。 3. jquery をシミュレートします -- タグ名に基づいて jquery オブジェクトをカプセル化します

コードに直接移動します

<body>
<ul class="list"> 
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
    <li>测试4</li>
</ul>
<script>
	
	console.log(&#39;这是jquery对象&#39;);
	var aLi1 = $(&#39;li&#39;);
	console.log(aLi1);
	
	
	console.log(&#39;------分界线------&#39;);
	(function(window,undefined){  
		var jQ = function(selector,context){  
			return new jQ.fn.init(selector, context);  
		};  
		jQ.fn = jQ.prototype = {  
			jquery:&#39;2.0.0&#39;,     //jquery版本号信息
			constructor: jQ,    //添加构造器属性
			length:0,			//初始length属性
			selector:&#39;&#39;,		//初始selector属性
			init: function(selector, context){
				var match, elem;
				
				if ( !selector ) {	//如果selector为&#39;&#39;,null,undefind直接退出操作
					return this;
				}
				elem = document.getElementsByTagName(selector);
				for(var i =0,len=elem.length; i<len; i++){
					this[i] = elem[i];
				}
				this.context=document;
				this.length = elem.length;
				this.selector = selector;
				
				return this;
			} 
		}   
		jQ.fn.init.prototype = jQ.fn;  
		  
		window.$$ = jQ;    	
	})( window );  
	
	console.log(&#39;这是模拟的对象&#39;);
	console.log($$(&#39;li&#39;));   //输出封装的对象
</script>
</body>

出力結果:

これは単なるシミュレーションです。JQ の処理は単純ではなく、JQuery も多くの判断を行います (この問題については、次の記事で引き続き説明します) ）。 jquery オブジェクトで prevObject 属性を見つけることもできます。これにより、前のレベルの検索オブジェクトが保存されます。以下の例を見て理解してください。

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<ul class="list"> 
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
    <li>测试4</li>
</ul>
<script>
	var aLi1 = $(&#39;li&#39;);
	console.log(aLi1);
	
	var aLi2 = $(&#39;li&#39;,&#39;.list&#39;);
	console.log(aLi2);
	
	var aLi3 = $(&#39;.list&#39;).find(&#39;li&#39;);
	console.log(aLi3);
</script>
</body>

この記事では、$selector が DOM を jquery オブジェクトにカプセル化する方法について説明します。関連コンテンツの詳細については、php 中国語 Web サイトを参照してください。

関連する推奨事項:

css3 アニメーションナビゲーションバー 3D

リクエストライブラリの基本的な使用方法

フロントエンドは WeChat 支払いインターフェイスを呼び出します

以上が$selector -- DOM を jquery オブジェクトにカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLとReact：マークアップとコンポーネントの関係Apr 12, 2025 am 12:03 AM

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1）HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2）ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3）コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4）コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5）パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

ReactとFrontend：インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

反応コンポーネント：HTMLで再利用可能な要素を作成しますApr 08, 2025 pm 05:53 PM

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1）コンポーネントの定義：関数またはクラスを使用して、反応要素を返します。 2）レンダリングコンポーネント：Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3）マルチプレックスコンポーネント：データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。

厳密なモードの目的を反応しますApr 02, 2025 pm 05:51 PM

React Strictモードは、追加のチェックと警告をアクティブにすることにより、Reactアプリケーションの潜在的な問題を強調する開発ツールです。これは、レガシーコード、安全でないライフサイクル、および副作用を特定するのに役立ち、現代の反応の実践を促進します。

断片の使用法を使用しますApr 02, 2025 pm 05:50 PM

反応フラグメントにより、余分なDOMノードなしで子供をグループ化すること、構造、パフォーマンス、アクセシビリティが向上します。それらは、効率的なリストレンダリングの鍵をサポートしています。

反応調整プロセスApr 02, 2025 pm 05:49 PM

この記事では、Reactの和解プロセスについて説明し、DOMを効率的に更新する方法について詳しく説明しています。重要な手順には、調整のトリガー、仮想DOMの作成、拡散アルゴリズムの使用、最小限のDOM更新の適用が含まれます。また、Perfoをカバーしています

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。