JQuery는 element_jquery의 CSS 스타일을 작동합니다.-JS 튜토리얼-php.cn

JQuery는 element_jquery의 CSS 스타일을 작동합니다.

WBOY

풀어 주다： 2016-05-16 16:10:35

원래의

1335명이 탐색했습니다.

우리는 페이지 요소의 스타일을 변경하기 위해 자바스크립트를 자주 사용합니다. 한 가지 방법은 페이지 메타를 변경하는 것입니다

요소 CSS 클래스(Class)는 기존 Javascript에서 주로 HTML을 처리합니다

Dom의 클래스 이름 기능이 구현되었습니다. jQuery는 이 기능을 구현하는 세 가지 방법을 제공합니다.

기존 방식과 아이디어는 동일하지만 코드를 많이 절약할 수 있습니다. 그래도 똑같은 문장 –

“JQuery는 JavaScript 코드를 간결하게 만듭니다!”

1. addClass() – CSS 클래스 추가

코드 복사 코드는 다음과 같습니다.

$(“#target”).addClass(“newClass”);

//#target은 스타일을 적용해야 하는 요소의 ID를 나타냅니다

//newClass는 CSS 클래스의 이름을 나타냅니다

2.removeClass() – CSS 클래스 제거

코드 복사 코드는 다음과 같습니다.

$(“#target”).removeClass(“oldClass”);

//#target은 CSS 클래스를 제거해야 하는 요소의 ID를 나타냅니다

//oldClass는 CSS 클래스의 이름을 나타냅니다

3.ggleClass() – CSS 클래스 추가 또는 제거: CSS 클래스가 이미 존재하는 경우 제거됩니다.

반대로 CSS 클래스가 없으면 추가됩니다.

코드 복사 코드는 다음과 같습니다.

$("#target").toggleClass("newClass")

//ID가 "target"인 요소에 CSS 스타일이 정의되어 있으면 제거됩니다. 

//반대로 CSS 클래스 "newClass"가 ID에 할당됩니다. 

실제 애플리케이션에서는 이러한 CSS 클래스를 먼저 정의한 다음 Javascript 이벤트를 통해 트리거하는 경우가 많습니다

페이지 요소 스타일을 변경하려면 링크 클릭 등을 게시하세요. 게다가 jQuery는

메소드도 제공합니다.

메서드 hasClass(“className”)는 요소에 CSS 클래스가 할당되었는지 확인하는 데 사용됩니다.

아래는 전체 예시입니다.

코드 복사 코드는 다음과 같습니다.

<스팬 스타일=”글꼴 크기:18px;”>

사진 깜박임
<스타일 유형=”텍스트/css”>
@-webkit-keyframes 반짝임{ /*투명도 0에서 1까지*/ 

           0%{                                             
            불투명도:0;
~
100%{ 

            불투명도:1;
~
}  

.up{ 

-webkit-animation: 반짝이는 1초 무한 이지아웃 

}  

하하하 

<입력 유형=”버튼” onclick='btnClick()'>

<스크립트>
함수 btnClick(){ 

//$(“#축구”).removeClass(“위”) 

$(“#축구”).toggleClass(“위로”) 

//$(“p:first”).removeClass(“소개”) 

}