jQuery 속성 및 스타일 (5)

특정 효과를 수행할 때 동일한 노드의 특정 스타일이 지속적으로 전환될 수 있습니다. 즉, 인터레이스 색상 변경 효과와 같이 addClass와 RemoveClass 간의 상호 배타적 전환이 가능합니다.

jQuery는 이러한 상호 작용을 단순화하기 위해 전환 클래스 메서드를 제공합니다. 논리에서 토글클래스 메서드를 통해 클래스를 동적으로 추가 및 삭제합니다. 한 실행은 addClass와 동일하고 다른 실행은 RemoveClass

toggleClass() 메서드와 동일합니다. 일치하는 요소 집합의 각 요소에 대해 하나 이상의 스타일 클래스를 추가하거나 삭제합니다. 이 스타일 클래스가 존재하는지 또는 토글 속성의 값에 따라 달라집니다. 즉, 클래스가 존재하는 경우 삭제(추가)합니다(존재하지 않음)

토글클래스( className ): 일치하는 요소 세트의 각 요소를 토글하는 데 사용되는 하나 이상의(공백으로 구분) 스타일 클래스 이름

토글클래스( className, switch ): 스타일 추가 또는 제거 여부를 결정하는 데 사용되는 부울 값

ggleClass( [switch] ): 스타일 클래스 추가 또는 제거 여부를 결정하는 데 사용되는 부울 값

ggleClass( function(index , 클래스, 스위치) [, 스위치 ] ): 일치하는 요소 세트의 각 요소를 켜는 데 사용되는 스타일 클래스 이름을 반환하는 데 사용되는 함수입니다. 요소의 인덱스 위치와 요소의 이전 스타일 클래스를 매개변수로 받습니다

참고:

toggleClass는 상호 배타적인 논리입니다. 즉, 해당 요소에 지정된 클래스 이름이 있는지 여부를 판단하여 존재하면 삭제합니다. 존재하지 않으면 삭제합니다. 추가

토글클래스는 원래 클래스 이름을 유지하고 공백으로 구분하여 추가합니다.

예제를 작성해 보겠습니다

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>隔行换色</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
    body,table,td,{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    .h {
        background: #f3f3f3;
        color: #000;
    }
    
    .c {
        background: #ebebeb;
        color: #000;
    }
    </style>
</head>

<body>
    <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
    </table>
    </div>
    <script type="text/javascript">
    //给所有的tr元素加一个class="c"的样式
    $("#table tr").toggleClass("c");
    </script>
    <script type="text/javascript">
    //给所有的偶数tr元素切换class="c"的样式
    //所有基数的样式保留，偶数的被删除
    $("#table tr:odd").toggleClass("c");
    </script>
    <script type="text/javascript">
    //第二个参数判断样式类是否应该被添加或删除
    //true，那么这个样式类将被添加;
    //false，那么这个样式类将被移除
    //所有的奇数tr元素，应该都保留class="c"样式
    $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
    </script>
</body>

</html>

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> body,table,td,{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .h { background: #f3f3f3; color: #000; } .c { background: #ebebeb; color: #000; } </style> </head> <body> <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> </table> </div> <script type="text/javascript"> //给所有的tr元素加一个class="c"的样式 $("#table tr").toggleClass("c"); </script> <script type="text/javascript"> //给所有的偶数tr元素切换class="c"的样式 //所有基数的样式保留，偶数的被删除 $("#table tr:odd").toggleClass("c"); </script> <script type="text/javascript"> //第二个参数判断样式类是否应该被添加或删除 //true，那么这个样式类将被添加; //false，那么这个样式类将被移除 //所有的奇数tr元素，应该都保留class="c"样式 $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的 </script> </body> </html>

제출하다 코드 재설정

자동운전