Heim > Artikel > Web-Frontend > $selector – wie man DOM in JQuery-Objekte kapselt

$selector – wie man DOM in JQuery-Objekte kapselt

jackloveOriginal: 2018-06-11 23:01:292328Durchsuche

Vorwort: Wenn es um JQuery geht, muss ich über die leistungsstarke Auswahlfunktion von JQuery sprechen. Diese Funktion ist sehr leistungsstark und das Sizzle-Modul ist separat für Freunde, die nur die Auswahlfunktion verwenden müssen. (In diesem Artikel geht es nicht um die leistungsstarken Funktionen von JQuery-Selektoren. Lassen Sie uns zunächst darüber sprechen, wie JQuery DOM-Elemente in JQuery-Objekte kapselt.)

Dom-Objekte und JQuery-Objekte

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

Laufergebnis:

Wir können den Unterschied darin erkennen, dass $() das DOM-Objekt in ein JQuery-Objekt kapselt und das DOM-Objekt auch in JQuery[0] gespeichert ist Deshalb sagen wir, dass wir zum Konvertieren von Jquery-Objekten in DOM-Objekte nur jquery[0] oder jquery.get(0) verwenden müssen.

2. JQuery simulieren – basierend auf der ID, JQuery-Objekt kapseln

Lassen Sie es uns zunächst vereinfachen und einen Teil des Prozesses der Kapselung von JQuery-Objekten betrachten

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

②Ausgabeergebnis: (Geöffnet im Firefox-Browser)

Was hier beachtet werden muss, ist , Chrome-Browser weist einige Unterschiede in der Anzeige auf

jquery zeigt das Klassen-Array-Objekt an bilden.

③, Analyse

Für diejenigen, die den obigen Code nicht verstehen, empfehle ich Ihnen, den Artikel zu lesen, den ich zuvor geschrieben habe [jquery-Quellcode]Einige Probleme müssen gelöst werden, bevor mit dem Erlernen des Quellcodes begonnen wird.

Regulärer Abgleich Ich habe den regulären Ausdruck direkt in den Quellcode kopiert. Sie können das Ergebnis der regulären Ausdrucksverarbeitung ausgeben, um es anzuzeigen.

3. JQuery simulieren – entsprechend dem Tag-Namen das JQuery-Objekt kapseln

Geben Sie den Code direkt ein

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

Ausgabeergebnis:

Dies ist nur eine einfache Simulation, die JQ-Verarbeitung ist alles andere als einfach, JQuery trifft auch viele Urteile (im folgenden Artikel wird dieses Problem weiter behandelt). Sie können das prevObject-Attribut auch im JQuery-Objekt finden, das das Suchobjekt der vorherigen Ebene speichert. Schauen Sie sich einfach das Beispiel unten an, um es zu verstehen.

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

In diesem Artikel wird erläutert, wie der $-Selektor DOM einkapselt Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

css3 animierte Navigationsleiste 3D

Grundlegende Verwendung der Anforderungsbibliothek

Das Frontend ruft die WeChat-Zahlungsschnittstelle auf

Das obige ist der detaillierte Inhalt von$selector – wie man DOM in JQuery-Objekte kapselt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Beispielcode für die einfache Entwicklung von Karusselldiagrammen mit nativen JS-KomponentenNächster Artikel：Beispielcode für die einfache Entwicklung von Karusselldiagrammen mit nativen JS-Komponenten

In Verbindung stehende Artikel

Mehr sehen