jquery로 현재 태그를 얻는 방법

프런트 엔드 개발에서 현재 태그를 동적으로 가져오는 것은 매우 일반적인 작업입니다. 프론트엔드 프레임워크의 구성원으로서 jQuery는 현재 태그를 얻는 다양한 방법을 제공합니다. 이 기사에서는 jQuery가 현재 태그를 가져오는 방법을 자세히 설명합니다.

I. 현재 요소의 ID 가져오기

다음 코드를 통해 현재 요소의 ID를 가져올 수 있습니다.

$(this).attr("id");

예를 들어 HTML 파일에서 ID가 "my-id"인 요소를 정의합니다.

<div id="my-id">这是一个文本框</div>

다음 jQuery 코드는 요소의 ID를 가져옵니다.

$("#my-id").click(function(){
    console.log($(this).attr("id"));
});

사용자가 요소를 클릭하면 jQuery는 현재 요소의 ID를 가져와 콘솔 창에 출력합니다.

II. 현재 요소의 클래스 가져오기

다음 코드를 통해 현재 요소의 클래스를 가져올 수 있습니다.

$(this).attr("class");

예를 들어 HTML 파일에서 "my-class" 클래스로 요소를 정의합니다.

<div class="my-class">这是一个文本框</div>

다음 jQuery 코드는 요소의 클래스를 가져옵니다.

$(".my-class").click(function(){
    console.log($(this).attr("class"));
});

사용자가 요소를 클릭하면 jQuery는 현재 요소의 클래스를 가져와 콘솔 창에 출력합니다.

III. 현재 요소의 맞춤 속성 가져오기

다음 코드를 통해 현재 요소의 맞춤 속성을 가져올 수 있습니다.

$(this).attr("data-*");

그 중 "*"는 우리가 직접 정의한 속성 이름을 나타냅니다. 예를 들어, HTML 파일에 "data-color"라는 사용자 정의 속성을 가진 요소를 정의합니다:

<div data-color="red">这是一个文本框</div>

다음 jQuery 코드를 사용하여 요소의 사용자 정의 속성을 얻을 수 있습니다:

$("div").click(function(){
    console.log($(this).attr("data-color"));
});

사용자가 element, jQuery 현재 요소의 사용자 정의 속성을 가져와서 콘솔 창에 출력합니다.

IV. 현재 요소의 태그 이름 가져오기

다음 코드를 통해 현재 요소의 태그 이름을 가져올 수 있습니다.

$(this).prop("tagName");

예를 들어 HTML 파일에서 태그 이름이 "div"인 요소를 정의합니다. :

<div>这是一个文本框</div>

다음 jQuery 코드를 사용하여 요소의 태그 이름을 얻을 수 있습니다.

$("div").click(function(){
    console.log($(this).prop("tagName"));
});

사용자가 요소를 클릭하면 jQuery는 현재 요소의 태그 이름을 가져와 콘솔 창에 출력합니다.

V. 현재 요소의 값 가져오기

다음 코드를 통해 현재 요소의 값을 가져올 수 있습니다.

$(this).val();

예를 들어 HTML 파일에 입력 상자를 정의합니다.

<input type="text" value="这是一个文本框" />

입력 상자를 가져오는 jQuery 코드 다음 값:

$("input").keyup(function(){
    console.log($(this).val());
});

사용자가 입력 상자에 내용을 입력하면 jQuery는 현재 요소의 값을 가져와 콘솔 창에 출력합니다.

VI. 문서에서 현재 요소의 위치 가져오기

다음 코드를 통해 문서에서 현재 요소의 위치를 ​​가져올 수 있습니다.

$(this).offset().top;
$(this).offset().left;

예를 들어 HTML 파일에서 요소를 정의합니다.

<div>这是一个文本框</div>

다음 jQuery를 사용할 수 있습니다. 코드는 문서에서 요소의 위치를 ​​가져옵니다.

$("div").click(function(){
    console.log($(this).offset().top);
    console.log($(this).offset().left);
});

사용자가 요소를 클릭하면 jQuery는 문서에서 현재 요소의 위치를 ​​가져와 콘솔 창에 출력합니다.

이 글에서는 jQuery가 현재 요소의 ID, 클래스, 사용자 정의 속성, 태그 이름, 값, 문서 내 위치를 가져오는 측면에서 현재 태그를 가져오는 방법을 자세히 소개합니다. 이 글을 공부함으로써 우리는 jQuery 관련 지식을 더 깊이 이해하고 프런트엔드 개발 역량을 강화하며 업무 및 프로젝트 실무에 더 많은 가능성을 제공할 수 있습니다.

위 내용은 jquery로 현재 태그를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!