>  기사  >  데이터 베이스  >  몇 가지 기본 jquery 선택기

몇 가지 기본 jquery 선택기

零到壹度
零到壹度원래의
2018-03-20 16:59:091401검색

기본 선택자는 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(&#39;test&#39;).style.color = &#39;red&#39;;

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(&#39;p&#39;),function(item,index,arr){
    item.style.color = &#39;red&#39;;
});

클래스 선택기
클래스 선택기 $('.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(&#39;test&#39;),function(item,index,arr){
    item.style.color = &#39;red&#39;;
});

와일드카드 선택기
와일드카드 선택기 $('*')는 클래스 이름의 모든 요소와 일치합니다. 문서 및 반환 컬렉션 요소

$(&#39;*&#39;).css(&#39;margin&#39;,&#39;0&#39;);

는 DOM

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

의 document.all 컬렉션 또는 getElementsByTagName() 메서드

Array.prototype.forEach.call(document.getElementsByTagName(&#39;*&#39;),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(&#39;.a,#b,a&#39;),function(item,index,arr){
    item.style.color = &#39;red&#39;;
});
의 querySelectorAll() 선택기에 해당합니다.

위 내용은 몇 가지 기본 jquery 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.