HTML5の実戦とCSSセレクターの解析 - querySelector()

今日はHTML5の関連知識を紹介します。 今日は主に新しいセレクターをテーマに紹介します。今日紹介するセレクターは querySelector() です。 jQueryとJavaScriptの2つの書き方を比較しながらシェアしていきます。 HTML5 を学習しようとしているすべての人に役立つことを願っています。

querySelector() メソッドは CSS セレクターを受け取り、パターンに一致する最初の要素を返します。一致する要素が見つからない場合は、null が返されます。小さな例は次のとおりです:

1) タグを取得

JavaScriptコード

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

	body.style.background = "red";

	alert(body)//[object HTMLpElement]

jQueryコード

var $body = $("body");

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

alert($body) //[object Object]

プレビュー効果JavaScript

2) ID取得

HTMLコード

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

JavaScriptコード

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

	box1.innerHTML = "这是box1";

	alert(box1)//[object HTMLpElement]

jQuery コード

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

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

alert($box1)  //[object Object]

プレビュー効果

1、JavaScript

2、jQuery

querySelector() メソッドがドキュメント タイプ、一致する要素はその中で見つかります文書要素の範囲。要素タイプを介して querySelector() メソッドを呼び出す場合、一致する要素は要素の子孫要素の範囲内でのみ見つかります。 CSS セレクターは、状況に応じて単純にも複雑にもなります。サポートされていないセレクターが渡された場合、querySelector() はエラーを報告します。
HTML5の実戦とCSSセレクター - querySelector()の解析を紹介します。 HTML5 は経験が必要で内容が多いことを考慮し、具体的な知識ポイントを 1 つずつ紹介するため、1 つの記事は必ずしも長くはなりません。これを行うことの利点は、将来の検索を容易にすることです。 HTML5 に関連するその他のコンテンツについては、Menglong Station からの HTML5 の実戦と分析に関する最新情報にご注目ください。

上記は内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。