Several basic jquery selectors

The basic selector is the most commonly used selector in jQuery and is also the simplest selector. It searches for DOM elements through element id, class and tag name.

id selector
id selector$('#id') matches an element by the given id, returning a single element

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

Corresponds to the getElementById() method of DOM, and jQuery also uses this method internally to handle the acquisition of ID

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

Element selector
Element selector$('element') is based on the given Matches elements with specified element names and returns qualified collection elements

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

corresponds to the getElementsByTagName() method of DOM, and jQuery also uses this method internally to handle the acquisition of element names

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

Class selector
Class selector$('.class') matches elements according to the given class name and returns qualified collection elements

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

corresponds to DOM’s getElementsByClassName() method, and jQuery also uses this method internally to handle the acquisition of class names

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

Wildcard selector
The wildcard selector $('*') matches all in the document element, and returns the collection element

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

corresponding to the document.all collection of the DOM

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

or the getElementsByTagName() method whose parameter is the wildcard *

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

group selection
Group selector $('selector1,selector2,...') merges the elements matched by each selector together, and returns the set element

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

corresponding to DOM's querySelectorAll( )Selector

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

The above is the detailed content of Several basic jquery selectors. For more information, please follow other related articles on the PHP Chinese website!