Home  >  Article  >  php教程  >  Analysis of jQuery's method of realizing interlaced color change (compared to native JS)

Analysis of jQuery's method of realizing interlaced color change (compared to native JS)

高洛峰
高洛峰Original
2016-12-06 14:30:571393browse

This article analyzes the method of jQuery to achieve interlaced color change. Share it with everyone for your reference, the details are as follows:

Native js:

var tab = document.getElementByTagName('table')[0];
var tr = tab.getElementByTagName('tr');
for(var i=0;i<tr.length;i++){
  if(i%2==0){
    tr[i].style.background="orange";
  }else{
    tr[i].style.background="#abcdef";
  }
}

jquery dom selector:

$(&#39;table tr:odd&#39;).css(&#39;background&#39;,&#39;orange&#39;);
$(&#39;table tr:even&#39;).css(&#39;background&#39;,&#39;#abcdef&#39;);

jquery method selector:

$(&#39;table tr&#39;).filter(&#39;:odd&#39;).css(&#39;background&#39;,&#39;orange&#39;).end().filter(&#39;:even&#39;).css(&#39;background&#39;,&#39;#abcdef&#39;);

There are many methods, learn more Knowledge, one less line of code to write.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn