Exemples détaillés de l'utilisation de base des filtres dans jQuery-js tutoriel-php.cn

Exemples détaillés de l'utilisation de base des filtres dans jQuery

小云云

Libérer： 2017-12-26 17:17:59

original

1364 Les gens l'ont consulté

Cet article présente principalement l'utilisation de base des filtres dans jQuery et analyse les compétences opérationnelles associées des filtres jQuery pour juger et définir les attributs des éléments de tableau sous la forme d'exemples simples. J'espère que les amis qui en ont besoin pourront s'y référer. peut aider tout le monde.

Les exemples de cet article décrivent l'utilisation de base des filtres dans jQuery. Partagez-le avec tout le monde pour votre référence, comme suit :

Texte HTML :

<input type="button" id="b1" value="偶数行红色"><br>
<input type="button" id="b2" value="奇数行绿色"><br>
<table border=1 width="100px">
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
</table><br>
<input type="button" id="b3" value="奇数列红色"><br>
<input type="button" id="b4" value="偶数列绿色"><br>
<table border=1 width="100px">
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
</table><br>
<input type="button" id="b5" value="奇数元素绿色"><br>
<table border=1 width="100px">
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr>
</table>

Copier après la connexion

Code d'opération Javascript :

$(&#39;#b1&#39;).click(function(){
/*table:eq(0) tr:even table:eq(0):筛选出第一张表格 tr:even:筛选出tr属性的对象
*注意table和tr对象中间有空格，表示从属关系
*/
$(&#39;table:eq(0) tr:even&#39;).css("background","red"); 
});
$(&#39;#b2&#39;).click(function(){
$(&#39;table:eq(0) tr:odd&#39;).css("background","green");
});
$(&#39;#b3&#39;).click(function(){
$(&#39;table:eq(1) td:even&#39;).css("background","red");
});
$(&#39;#b4&#39;).click(function(){
$(&#39;table:eq(1) td:odd&#39;).css("background","green");
});
$(&#39;#b5&#39;).click(function(){
$(&#39;table:eq(2) td:even&#39;).css("background","green");
});

Copier après la connexion

Effet :