1. .addClass()
: 선택된 element에 하나 이상의 클래스 이름을 추가한다. 기존의 클래스 속성을 제거하지 않음. 하나 이상의 클래스 이름을 추가한다. 공백으로 클래스 이름을 구분한다ㅏ.
: 문법 - $(selector).addClass(classname, function(index, oldclass))
: 예) $("button").click(function() {
$("p:first").addClass("intro");
}
2. .css()
: 선택된 elements의 스타일 속성을 설정하거나 반환함.
: 속성을 반환할 때 사용한 경우 - 첫번 째 일치하는 요소의 지정된 css 속성 값을 반환. "background"와 "border" 같은 속성은 완벽하게 지원하지 않는 다른 브라우저에서 서로 다른 결과를 얻을 수도 있음
: 속성을 설정하는 데 사용하는 경우 - 모든 일치하는 요소에 대해서 지정된 CSS 속성을 설정
: 문법 - $("selector").css("속성", "값")
: 예) $("button").click(function() {
$("p").css("color", "red");
});
3. .hasClass()
: 어떤 특정한 element가 특정 class를 가지고 있는지 체크한다. 특정 class를 가지고 있으면 true를 반환함.
: 문법 - $(selector).hasClass(classname)
: 예) $("button").click(function() {
alert($("p").hasClass("intro"));
});
4. .removeClass()
: 선택된 elements의 class를 삭제한다. 특정 클래스 이름을 한정하지 않으면 선택된 요소의 모든 클래스 이름을 제거한다.
: 문법 - $(selector).removeClass(classname, function(index, currentclass))
: 예) $("button").click(function() {
$("p").removeClass("intro");
});
5. .toggleClass()
: 선택한 요소에서 하나 이상의 클래스 이름을 추가하거나 제거하는 동작을 켰다 껐다한다
: 지정된 클래스 이름에 대한 각 요소를 확인. 클래스 이름이 없는 경우 추가, 이미 설정되어 있는 경우 제거하는 전환 효과를 만든다.
: "switch" parameter를 사용하여 제거하도록 지정할 수 있음. 클래스 이름도 할 수 있음
: 문법 - $(selector).toggleClass(classname)
: 예) $("button"),click(function() {
$("p").toggleClass("main");
});
