기본 선택자는 jQuery에서 가장 일반적으로 사용되는 선택자이자 가장 간단한 선택자이기도 합니다. 요소 ID, 클래스 및 태그 이름을 통해 DOM 요소를 찾습니다.
id selector
id selector $('#id')는 주어진 ID를 가진 요소와 일치하고 단일 요소를 반환합니다.
<p id="test">测试元素</p><script>//选择id为test的元素并设置其字体颜色为红色$('#test').css('color','red');</script>
는 jQuery 처리에서 내부적으로 사용되는 DOM의 getElementById() 메서드에 해당합니다. ID 획득
document.getElementById('test').style.color = 'red';
Element selector
Element selector $('element')는 주어진 요소 이름에 따라 요소를 일치시키고 조건에 맞는 요소 집합을 반환합니다
<p>1</p> <p>2</p> <script>//选择标签名为p的元素并设置其字体颜色为红色$('p').css('color','red'); </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的元素并设置其字体颜色为红色$('.test').css('color','red'); </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;});
의 document.all 컬렉션 또는 getElementsByTagName() 메서드
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>//选择符合条件的元素并设置其字体颜色为红色$('.a,#b,a').css('color','red'); </script>
는 DOM
Array.prototype.forEach.call(document.querySelectorAll('.a,#b,a'),function(item,index,arr){ item.style.color = 'red'; });의 querySelectorAll() 선택기에 해당합니다.
위 내용은 몇 가지 기본 jquery 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!