> 웹 프론트엔드 > JS 튜토리얼 > jQuery의 필터 기본 사용법에 대한 자세한 예

jQuery의 필터 기본 사용법에 대한 자세한 예

小云云
풀어 주다: 2017-12-26 17:17:59
원래의
1365명이 탐색했습니다.

이 글은 jQuery에서 필터의 기본 사용법을 주로 소개하고, 테이블 요소 속성을 판단하고 설정하기 위한 jQuery 필터의 관련 작업 기술을 간단한 예제 형식으로 분석하여 도움이 되기를 바랍니다. 모든 사람.

이 문서의 예에서는 jQuery에서 필터의 기본 사용법을 설명합니다. 다음과 같이 참조용으로 모든 사람과 공유하세요.

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>
로그인 후 복사

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");
});
로그인 후 복사

효과:

추천:

vue 사용자 정의 필터를 만들고 사용하는 방법에 대한 자세한 예

필터 및 사용자 정의 필터 소개

JQuery, 선택기/필터/성능 최적화

위 내용은 jQuery의 필터 기본 사용법에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿