いくつかの基本的な jQuery セレクター

基本セレクターは、jQuery で最も一般的に使用されるセレクターであり、要素 ID、クラス、タグ名を通じて DOM 要素を検索します。

id selector
id selector $('#id') は、指定された ID を持つ要素と一致し、単一の要素を返します

<p id="test">测试元素</p><script>//选择id为test的元素并设置其字体颜色为红色$(&#39;#test&#39;).css(&#39;color&#39;,&#39;red&#39;);</script>

は、jQuery 処理によって内部的にも使用される DOM の getElementById() メソッドに対応します。 IDの取得

document.getElementById('test').style.color = 'red';

Element selector
Element selector $('element') は、指定された要素名に従って要素を照合し、条件を満たす要素のセットを返します

<p>1</p>
<p>2</p>
<script>//选择标签名为p的元素并设置其字体颜色为红色$(&#39;p&#39;).css(&#39;color&#39;,&#39;red&#39;);
</script>

DOMのgetElementsByTagName()メソッドに相当, そして、このメソッドは、要素名の取得を処理するために jQuery によって内部的にも使用されます

Array.prototype.forEach.call(document.getElementsByTagName('p'),function(item,index,arr){
    item.style.color = 'red';
});

クラス セレクター
クラス セレクター $('.class') は、指定されたクラス名に従って要素を照合し、条件を満たすセット要素を返します。条件

<p class="test">1</p>
<p class="test">2</p>
<script>//选择class为test的元素并设置其字体颜色为红色$(&#39;.test&#39;).css(&#39;color&#39;,&#39;red&#39;);
</script>

DOM の getElementsByClassName() メソッドに相当し、jQuery も内部でこのメソッドを使用してクラス名の取得処理を行います

Array.prototype.forEach.call(document.getElementsByClassName('test'),function(item,index,arr){
    item.style.color = 'red';
});

ワイルドカード セレクター
ワイルドカード セレクター $('*') は、次のすべての要素に一致しますコレクション要素

$('*').css('margin','0');

は、DOM

Array.prototype.forEach.call(document.all,function(item,index,arr){
    item.style.margin = 0;});

または getElementsByTagName() メソッドの document.all コレクションに対応します

Array.prototype.forEach.call(document.getElementsByTagName('*'),function(item,index,arr){
    item.style.margin = 0;});

グループ セレクター
グループ セレクター $('selector1,selector2,...' ) パラメータはワイルドカード * 各セレクターに一致する要素はマージされ、コレクション要素

<p class="a">1</p>
<span id="b">2</span>
<a href="#">3</a><script>//选择符合条件的元素并设置其字体颜色为红色$(&#39;.a,#b,a&#39;).css(&#39;color&#39;,&#39;red&#39;);
</script>

は DOM

Array.prototype.forEach.call(document.querySelectorAll('.a,#b,a'),function(item,index,arr){
    item.style.color = 'red';
});

の querySelectorAll() セレクターに対応します

以上がいくつかの基本的な jQuery セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。