jquery에서 현재 클래스 이름을 얻는 방법

jQuery는 HTML 요소 및 페이지 상호 작용 작업을 위한 몇 가지 매우 편리한 방법을 제공하는 인기 있는 JavaScript 라이브러리입니다. 많은 경우 클래스 이름 추가, 삭제, 전환과 같은 다양한 작업을 수행하려면 현재 요소의 클래스 이름을 가져와야 합니다. 이 기사에서는 jQuery를 사용하여 현재 클래스 이름을 얻는 방법을 설명하고 몇 가지 예를 제공합니다.

1. 현재 클래스 이름을 가져오는 기본 방법

현재 요소의 클래스 이름을 가져오려면 jQuery의 .attr() 메서드를 사용하고 "class"를 매개 변수로 전달할 수 있습니다.

var className = $("element").attr("class");

여기서 "element"는 클래스 이름, ID, 태그 이름 등과 같은 유효한 CSS 선택기가 될 수 있는 jQuery 선택기 문자열입니다. 이 코드는 현재 요소의 모든 클래스 이름을 공백으로 구분하여 포함하는 문자열을 반환합니다.

예를 들어 다음 HTML 코드가 있습니다.

<div class="box small"></div>

다음 코드를 사용하여 현재 요소의 클래스 이름을 가져올 수 있습니다.

var className = $("div.box.small").attr("class");
console.log(className); // 输出 "box small"

두 번째, classList 속성을 사용하여 현재 클래스 이름을 가져옵니다

또한 jQuery의 .attr() 메서드를 사용하려면 기본 JavaScript의 classList 속성을 사용하여 현재 클래스 이름을 가져올 수도 있습니다. 예:

var className = $("element")[0].classList;

where, "[0]"은 jQuery 개체를 DOM 노드로 변환합니다. 이 코드는 모든 클래스 이름을 포함하는 DOMTokenList 객체를 반환하므로 클래스 이름을 쉽게 추가, 삭제 및 전환할 수 있습니다.

예를 들어 다음 HTML 코드가 있습니다.

<div class="box small"></div>

다음 코드를 사용하여 현재 요소의 클래스 이름을 가져올 수 있습니다.

var classList = $("div.box.small")[0].classList;
console.log(classList); // 输出 ["box", "small"]

3. 기본 작업 클래스 이름

1. 클래스 이름 추가

jQuery를 통해 클래스 이름을 추가하려면 .addClass() 메서드를 사용할 수 있습니다. 예:

$("element").addClass("new-class");

여기서 "new-class"는 추가할 클래스의 이름입니다. 이 코드는 현재 요소에 "new-class"라는 클래스 이름을 추가합니다.

예를 들어 다음 HTML 코드가 있습니다.

<div class="box small"></div>

다음 코드를 사용하여 새 클래스 이름을 추가할 수 있습니다.

$("div.box.small").addClass("big");

이렇게 하면 "big"이라는 클래스 이름이 현재 요소에 추가되고 HTML이 업데이트됩니다. 코드

<div class="box small big"></div>

2. 클래스 이름 삭제

jQuery를 통해 클래스 이름을 삭제하려면 .removeClass() 메서드를 사용하면 됩니다. 예:

$("element").removeClass("old-class");

여기서 "old-class"는 삭제할 클래스의 이름입니다. 이 코드는 현재 요소에서 "old-class"라는 클래스를 제거합니다.

예를 들어 다음 HTML 코드가 있습니다.

<div class="box small"></div>

다음 코드를 사용하여 클래스 이름을 제거할 수 있습니다.

$("div.box.small").removeClass("small");

이렇게 하면 현재 요소에서 "small"이라는 클래스 이름이 제거됩니다. 업데이트된 HTML 코드는 다음과 같습니다.

<div class="box"></div>

3. 클래스 이름 전환

jQuery를 통해 클래스 이름을 전환하려면 .toggleClass() 메서드를 사용할 수 있습니다. 예:

$("element").toggleClass("class1 class2");

그 중 "class1 class2"는 전환할 클래스 이름이며, 여러 클래스 이름은 공백으로 구분됩니다. 이 코드는 현재 요소에 있는 두 클래스 이름 사이를 전환하여 현재 요소에 이미 존재하는 경우 해당 이름을 제거하고, 그렇지 않으면 추가합니다.

예를 들어 다음 HTML 코드가 있습니다.

<div class="box small"></div>

다음 코드를 사용하여 두 클래스 이름을 전환할 수 있습니다.

$("div.box.small").toggleClass("small big");

이렇게 하면 현재 요소에서 "small"이라는 클래스 이름이 제거되고 클래스 이름이 추가됩니다. "big"이라는 클래스 이름, 업데이트된 HTML 코드는 다음과 같습니다:

<div class="box big"></div>

IV. 응용 프로그램 예제

다음은 jQuery를 사용하여 현재 클래스 이름을 얻는 방법을 보여주는 몇 가지 예제입니다.

1. 요소를 클릭할 때 이름 지정:

$("div").click(function() {
  var className = $(this).attr("class");
  console.log(className);
});

2. 창을 스크롤할 때 탐색 표시줄 스타일 전환:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= 100) {
    $("nav").addClass("fixed-top");
  } else {
    $("nav").removeClass("fixed-top");
  }
});

3 캐러셀에서 사진을 전환할 때 이미지 제목 업데이트:

$(".carousel-item").on("slide.bs.carousel", function() {
  var captionText = $(this).find(".carousel-caption h4").text();
  var className = $(this).attr("class");
  console.log("当前类名：" + className);
  $(".slider-title").text(captionText);
});

요약

우리는 jQuery를 사용하여 현재 클래스 이름을 얻는 방법을 배웠고 몇 가지 예제를 사용하여 클래스 이름을 조작하는 방법을 보여주었습니다. 현재 클래스 이름은 .attr() 메소드를 통해 직접 얻을 수 있으며, .classList 속성을 이용하면 클래스 이름을 쉽게 추가, 삭제, 전환할 수 있습니다. 이러한 지식이 있으면 JavaScript 코드를 작성할 때 HTML 요소 및 스타일로 작업하는 것이 더 쉬워집니다.

위 내용은 jquery에서 현재 클래스 이름을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!