스타일 설정, 추가, 제거 및 전환을 구현하는 JQuery의 방법_jquery

이 기사의 예에서는 JQuery가 스타일 설정, 추가, 제거 및 전환을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

JQuery를 사용하면 요소의 스타일 작업이 매우 간단해집니다. JQuery를 사용하여 요소 스타일에 대한 획득, 설정, 추가, 삭제 및 기타 작업을 수행하는 방법을 살펴보겠습니다.

스타일 가져오기 및 설정

클래스 가져오기와 클래스 설정 모두 attr() 메서드를 사용하여 수행할 수 있습니다. 예를 들어 attr() 메서드를 사용하여 p 요소의 클래스를 가져옵니다. JQuery 코드는 다음과 같습니다.

var p_class = $("p").attr("class");
//获取p元素的class

attr() 메소드를 사용하여 p 요소의 클래스를 설정합니다. JQuery 코드는 다음과 같습니다.

$("p").attr("'class", "high");
//设置p元素的class为 "high"

대부분의 경우 원래 클래스에 새 클래스를 추가하는 대신 원래 클래스를 새 클래스로 대체합니다.

스타일 추가

추가수업이란 무엇인가요? p 요소의 원래 클래스가 myClass인 경우 high라는 클래스를 추가한 후 클래스 속성은 myClass와 high 두 스타일의 중첩인 "myClass high"가 됩니다. JQuery는 스타일을 추가하기 위한 특별한 addClass() 메서드를 제공합니다. 예제를 더 쉽게 이해하려면 먼저 스타일 태그에 다른 스타일 세트를 추가하세요.

.high{ color:red; }
.another{ font-style:italic; color:blue; }

그런 다음 웹페이지에 "클래스 추가" 버튼을 추가합니다. 버튼의 이벤트 코드는 다음과 같습니다.

$("#btn_3").click(function(){
  $("#nm_p").addClass("another");
  // 追加样式
});

마지막으로 "클래스 추가" 버튼을 클릭하면 p 요소 스타일이 이탤릭체로 변경되고, 이전 빨간색 글꼴도 파란색으로 변경됩니다. 이때, p 요소는 "high"와 "another"라는 두 가지 클래스 값을 동시에 갖는다. CSS에는 다음 두 가지 조항이 있습니다.

1. 요소에 여러 클래스 값이 추가되면 스타일을 병합하는 것과 같습니다.
2. 서로 다른 클래스가 동일한 스타일 속성을 설정하는 경우 후자가 전자를 재정의합니다.

위의 예에서는 p 요소에 다음 스타일을 추가하는 것과 같습니다.

color : red;  /* 字体颜色设置红色*/ 
font-style:italic; 
color:blue;

위 스타일에는 두 개의 "color" 속성이 있으며 후자의 "color" 속성이 이전의 "color" 속성을 덮어쓰므로 최종 "color" 속성 값은 "red"가 아닌 "blue"입니다.

스타일 제거

사용자가 버튼을 클릭할 때 클래스의 특정 값을 삭제하려면 addClass() 메서드와 반대되는 RemoveClass() 메서드를 사용하면 됩니다. 이 메서드의 기능은 전체 또는 특정 요소를 삭제하는 것입니다. 일치하는 요소에서. 예를 들어 다음 JQuery 코드를 사용하여 p 요소에 "high" 값이 있는 클래스를 삭제할 수 있습니다.

$("p").removeClass("high");
//移除p元素中值为"high"的class

p 요소의 두 클래스를 모두 삭제하려면 RemoveClass() 메서드를 두 번 사용해야 합니다. 코드는 다음과 같습니다.

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

$("p").removeClass("high").removeClass ("또 다른");

JQuery는 더 쉬운 방법을 제공합니다. 여러 클래스 이름은 공백으로 삭제할 수 있습니다. 코드는 다음과 같습니다.

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

$("p").removeClass("high another");

또한, RemoveClass() 메소드의 기능을 사용하여 동일한 효과를 얻을 수도 있습니다. 매개변수를 사용하지 않으면 모든 클래스 값이 삭제됩니다. JQuery 코드는 다음과 같습니다.

$("p").removeClass();
//移除p元素的所有class

스타일 전환

JQuery에는 토글() 메소드가 있습니다. JQuery 코드는 다음과 같습니다.

toggleBtn.toggle(function(){
  //元素显示 代码③
}, function(){
  //元素隐藏 代码④
})

여기서

toggle() 메소드의 기능은 코드 ③과 코드 ④의 두 가지 기능을 번갈아 실행하는 것입니다. 요소가 원래 표시되어 있으면 숨기고, 원래 숨겨져 있으면 표시합니다. 이때,ggle() 메소드는 주로 동작의 반복적인 전환을 제어합니다.

또한 JQuery는 반복되는 스타일 전환을 제어하기 위한ggleClass() 메서드도 제공합니다. 클래스 이름이 있으면 제거하고, 클래스 이름이 없으면 추가합니다. 예를 들어 p 요소에 대해ggleClass() 메서드를 수행합니다.

$("p").toggleClass("another");
//重复切换类名“another”

"Switch Style" 버튼을 계속 클릭하면 p 요소의 클래스 값이 "myClass"와 "myClass another" 간에 반복적으로 전환됩니다.

특정 스타일이 포함되어 있는지 확인

hasClass()는 요소에 특정 클래스가 포함되어 있는지 확인하는 데 사용할 수 있습니다. 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 예를 들어, 다음 코드를 사용하여 p 요소에 "another" 클래스가 포함되어 있는지 확인할 수 있습니다.

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

$("p").hasClass("another");

이 방법은 코드의 가독성을 높이기 위해 제작되었습니다. JQuery 내에서는 is() 메서드가 실제로 이 기능을 완료하기 위해 호출됩니다. 이 메서드는 다음 코드와 동일합니다.

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

$("p").is(".another"); //is ("." 클래스);

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.