Tatsächlicher HTML5-Kampf und Analyse des CSS-Selektors - querySelector()

Heute werde ich Ihnen die relevanten Kenntnisse von HTML5 vorstellen. Heute werde ich hauptsächlich den neuen Selektor als Thema vorstellen. Der heute vorgestellte Selektor ist querySelector(). Ich werde es mit Ihnen teilen, indem ich die beiden Schreibmethoden von jQuery und JavaScript vergleiche. Ich hoffe, es kann für alle hilfreich sein, die HTML5 lernen möchten.

Die querySelector()-Methode empfängt einen CSS-Selektor und gibt das erste Element zurück, das mit dem Muster übereinstimmt. Wenn kein passendes Element gefunden wird, wird null zurückgegeben. Ein kleines Beispiel lautet wie folgt:

　1) Tags abrufen

JavaScript-Code

var body = document.querySelector('body');

	body.style.background = "red";

	alert(body)//[object HTMLpElement]

　 jQuery-Code

var $body = $("body");

$body.css({
	'background': "red"
});

alert($body) //[object Object]

　Vorschaueffekt

　1. JavaScript

　2

　

2) Ausweis erhalten

　

HTML-Code

<p id="box1" class="box">梦龙小站</p>
<section id="box2" class="box">梦龙小站</section>

JavaScript-Code

var box1 = document.querySelector('#box1');

	box1.innerHTML = "这是box1";

	alert(box1)//[object HTMLpElement]

jQuery-Code

var $box1 = $("#box1");

$box1.html("这是用jQuery实现的");

alert($box1)  //[object Object]

Vorschaueffekt

1. JavaScript

2. jQuery

Wenn die Methode querySelector() über den Dokumenttyp aufgerufen wird, werden übereinstimmende Elemente innerhalb des Bereichs der Dokumentelemente gefunden. Wenn Sie die Methode querySelector() über den Elementtyp aufrufen, werden übereinstimmende Elemente nur innerhalb des Bereichs der Nachkommenelemente des Elements gefunden. CSS-Selektoren können je nach Situation einfach oder komplex sein. Wenn ein nicht unterstützter Selektor übergeben wird, meldet querySelector() einen Fehler.

Dies ist die Einführung in den tatsächlichen HTML5-Kampf und die Analyse des CSS-Selektors – querySelector(). Da HTML5 mehr Erfahrung erfordert und viele Dinge enthält, werden bestimmte Wissenspunkte nacheinander eingeführt, sodass nicht unbedingt jeder Artikel sehr lang sein wird. Ich hoffe, dass jeder es verstehen kann. Der Vorteil davon besteht darin, die Suche in Zukunft zu erleichtern. Vielen Dank für Ihre Unterstützung und Liebe. Für weitere Inhalte im Zusammenhang mit HTML5 beachten Sie bitte die Aktualisierungen zum aktuellen Kampf und zur Analyse von HTML5 von Menglong Station.

Das Obige ist der Inhalt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!