In-depth study of the first part of the jQuery selector series-Basic selector and hierarchical selector, jquery Selector

In-depth study of the first part of the jQuery selector series-Basic selector and hierarchical selector, jquery Selector
* Directory [1] id selector [2] element selector [3] class selector [4] wildcard selector [5] group selector [6] descendant selector [7] Front of sibling Selector

Selector is the foundation of jQuery. In jQuery, event processing, DOM traversal, and ajax operations depend on the selector. The jQuery selector fully inherits the CSS style. The two statements are very similar, but they have different effects. The CSS selector finds the element and adds the style, while the jQuery selector finds the element and adds the behavior. JQuery selectors can be divided into four types: Basic selector, hierarchical selector, filter selector, and form selector. For each type of selector, in addition to the jQuery selector syntax, the corresponding CSS selector and DOM selector syntax are also provided. Only by comparison can we get a deeper understanding. This article is the first in the jQuery selector series-Basic selector and hierarchical selector.

 

Basic Selector

The basic selector is the most common selector in jQuery and the simplest selector. it searches for DOM elements by element id, class, and tag signature.

 

[1] id Selector

Id selector $ ('# id') matches an element with a given id and returns a single element.

<Div id = "test"> test element </div> <script> // select the element whose id is testand set its font color to red ('{test'}.css ('color', 'red'); </script>

Id selector corresponding to CSS

#test{color:red}

Corresponds to the getElementById () method of DOM, and jQuery uses this method internally to obtain the ID.

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

 

[2] element Selector

Element selector $ ('element') matches an element based on the given element name and returns a set element that meets the condition.

<Div> 1 </div> <div> 2 </div> <script> // select the element whose Tag Name Is div and set its font color to red ('div'0000.css ('color', 'red'); </script>

Element selector corresponding to CSS

div{color:red}

Corresponds to the getElementsByTagName () method of DOM. jQuery also uses this method internally to obtain element names.

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

 

[3] class selector

Class selector $ ('. class') matches an element based on the given class name and returns a set element that meets the condition.

<Div class = "test"> 1 </div> <div class = "test"> 2 </div> <script> // select classfor test's element and set its font color to Red ('.test'example .css ('color ', 'red'); </script>

Class selector corresponding to CSS

.test{color:red}

Corresponds to the getElementsByClassName () method of DOM, which is also used internally by jQuery to obtain class names.

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

 

[4] wildcard Selector

The wildcard selector $ ('*') matches all elements in the document and returns the set element.

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

Specifies the CSS wildcard selector.

* {margin:0}

Document. all set corresponding to DOM

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

Or the getElementsByTagName () method with the wildcard * Parameter

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

 

[5] group Selector

Group selector $ ('selector1, selector2,... ') combines the elements matched by each selector and returns the collection element.

<Div class = "a"> 1 </div> <span id = "B"> 2 </span> <a href = "#"> 3 </a> <script> // select the elements that match the condition and set the font color to red ('.a, Hangzhou, and a'hangzhou.css ('color ', 'red'); </script>

Group selector corresponding to CSS

.a,#b,a{color:red}

QuerySelectorAll () selector corresponding to DOM

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

 

Level Selector

If you want to obtain a specific element through the hierarchical relationship between DOM elements, the hierarchical selector is a good choice. The hierarchy includes four types of child elements, child elements, adjacent elements, and same-level elements.

 

[6] descendant Selector

Descendant selector $ ('ancestor descendant') selects all descendant elements of the given ancestor element and returns the collection element.

<div id="test">    <div>        <div>1</div>        <div>2</div>    </div></div><script>$('#test div').css('margin','10px');console.log($('#test div').length);//3</script>

Descendant selector corresponding to CSS

#test div{margin: 10px}

GetElement class method corresponding to DOM

Array.prototype.forEach.call(document.getElementById('test').getElementsByTagName('div'),function(item,index,arr){    item.style.margin = '10px';});

Or use the querySelectorAll () method.

Array.prototype.forEach.call(document.querySelectorAll('#test div'),function(item,index,arr){    item.style.margin = '10px';});

[6.1] child element Selector

Child element selector $ ('parent> child ') selects all direct child elements specified in the specified 'parent' element, and returns the set Element

<div id="test">    <div>        <div>1</div>        <div>2</div>    </div></div><script>$('#test > div').css('margin','10px');console.log($('#test > div').length);//1</script>

Child element selector corresponding to CSS

#test > div{margin: 10px}

QuerySelectorAll () method corresponding to DOM

Array.prototype.forEach.call(document.querySelectorAll('#test > div'),function(item,index,arr){    item.style.margin = '10px';});

 

[7] Brother Selector

Common sibling selector $ ('prev ~ Siblings ') Select All 'siblings' elements of the same level after the 'prev' element, and return the collection element.

<ul>    <li id="test">1</li>    <li>2</li>    <li>3</li></ul><script>$('#test ~ li').css('color','red');console.log($('#test ~ li').length);//2</script>

Common sibling selector corresponding to CSS

#test ~ li{color:red;}

QuerySelectorAll () method corresponding to DOM

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

[7.1] adjacent sibling Selector

Adjacent sibling selector $ ('prev + next') selects all the 'Next' elements that follow the 'prev' element and returns the set element.

<ul>    <li id="test">1</li>    <li>2</li>    <li>3</li></ul><script>$('#test + li').css('color','red');console.log($('#test + li').length);//1</script>

Adjacent sibling selector corresponding to CSS

#test + li{color:red;}

QuerySelectorAll () method corresponding to DOM

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