jquery가 다른 ID를 얻습니다.

Jquery는 DOM 조작 및 웹 개발을 단순화하는 데 사용되는 매우 인기 있는 JavaScript 라이브러리입니다. 개발 중에는 다양한 작업을 수행하기 위해 다양한 요소의 ID를 가져와야 하는 경우가 많습니다. 이 기사에서는 Jquery를 사용하여 다양한 ID를 가져오고 일반적인 사용 사례를 구현하는 방법을 살펴보겠습니다.

1. 단일 요소의 ID 가져오기

단일 요소의 ID를 가져오는 것은 Jquery에서 가장 일반적인 용도 중 하나입니다. 일반적으로 $("#id") Jquery 선택기를 사용하여 요소를 선택하고 attr('id') 메서드를 사용하여 해당 ID 값을 가져올 수 있습니다. 예를 들어 다음 HTML 코드가 있는 경우:

<div id="myDiv">这是一个Div元素 </div>

다음 코드를 사용하여 해당 Div 요소의 ID를 얻을 수 있습니다.

var myDiv = $("#myDiv").attr('id');

2. 여러 요소의 ID 가져오기

Jquery에서는 클래스 선택기를 사용하여 다음을 수행할 수 있습니다. 여러 요소를 선택하고 .each() 메서드를 사용하여 반복합니다. 그런 다음 attr('id') 메소드를 사용하여 각 요소의 id 값을 얻을 수 있습니다. 예를 들어 다음 HTML 코드가 있는 경우:

<div id="div1" class="myDiv">Div元素1 </div>
<div id="div2" class="myDiv">Div元素2 </div>
<div id="div3" class="myDiv">Div元素3 </div>

다음 코드를 사용하여 이러한 Div 요소의 ID를 얻을 수 있습니다.

$('.myDiv').each(function(){
    var id = $(this).attr('id');
    console.log(id);
});

그러면 각 요소의 ID가 콘솔에 인쇄됩니다.

3. 선택한 상위 요소 내에서 하위 요소 ID 가져오기

어떤 경우에는 탐색 메뉴 구축과 같이 상위 요소 내의 모든 하위 요소 ID를 가져와야 할 수도 있습니다. .find() 메소드를 사용하여 상위 요소 내의 모든 하위 요소를 선택하고 .each() 메소드를 사용하여 반복할 수 있습니다. 그런 다음 .attr('id') 메서드를 사용하여 각 하위 요소의 id 값을 가져올 수 있습니다. 예를 들어, 다음 HTML 코드가 있는 경우:

<div id="menu">
    <ul>
        <li id="home">主页</li>
        <li id="about">关于</li>
        <li id="contact">联系我们</li>
    </ul>
</div>

다음 코드를 사용하여 이러한 하위 요소의 ID를 얻을 수 있습니다.

var menu = $("#menu");
menu.find('li').each(function(){
    var id = $(this).attr('id');
    console.log(id);
});

이렇게 하면 각 하위 요소의 ID가 콘솔에 인쇄됩니다.

4. 양식 요소의 ID 가져오기

웹 개발에서 양식 요소는 일반적으로 양식 유효성 검사 및 제출을 위해 ID를 가져와야 합니다. Jquery 선택기 $(":input")를 사용하여 모든 양식 요소를 선택하고 .each() 메서드를 사용하여 반복할 수 있습니다. 그런 다음 .attr('id') 메서드를 사용하여 각 양식 요소의 id 값을 가져올 수 있습니다. 예를 들어 다음 HTML 코드가 있는 경우:

<form>
    <input type="text" id="name" name="name" value="请输入姓名">
    <input type="email" id="email" name="email" value="请输入邮箱">
    <input type="tel" id="phone" name="phone" value="请输入联系电话">
    <button type="submit" id="submit">提交</button>
</form>

다음 코드를 사용하여 이러한 양식 요소의 ID를 얻을 수 있습니다.

$('form :input').each(function(){
    var id = $(this).attr('id');
    console.log(id);
});

이렇게 하면 각 양식 요소의 ID가 콘솔에 인쇄됩니다.

5. 동적으로 추가된 요소의 ID 가져오기

경우에 따라 프로그래밍 방식으로 요소를 동적으로 추가하고 해당 ID를 가져와야 할 수도 있습니다. 이 경우 Jquery 선택기 $(":last")를 사용하여 마지막 요소를 선택하고 .after() 메서드를 사용하여 그 뒤에 새 요소를 추가할 수 있습니다. 그런 다음 .attr('id') 메소드를 사용하여 새 요소의 ID를 얻을 수 있습니다. 예를 들어 다음 HTML 코드가 있는 경우:

<div id="myDiv">
    <button id="btn1">按钮1</button>
</div>

다음 코드를 사용하여 새 버튼을 동적으로 추가하고 해당 ID를 가져올 수 있습니다.

var newButton = $('<button id="btn2">按钮2</button>');
$("#myDiv button:last").after(newButton);
var id = newButton.attr('id');
console.log(id);

이렇게 하면 새 버튼의 ID가 콘솔에 인쇄됩니다.

결론

이 기사에서는 Jquery를 사용하여 다양한 요소의 ID를 얻는 방법을 자세히 살펴보았습니다. 단일 요소 또는 여러 요소의 ID를 가져오거나 양식 요소 또는 동적으로 추가된 요소의 ID를 가져오는 경우 위 방법을 사용하여 이를 얻을 수 있습니다. 이 글이 여러분의 개발 작업에 도움이 되기를 바랍니다!

위 내용은 jquery가 다른 ID를 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!