jquery DOM 추가, 삭제, 수정 및 확인 구현 방법

jQuery는 현재 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. 여기에는 DOM 요소를 쉽게 작동할 수 있는 일련의 API가 포함되어 있습니다. jQuery에서는 CSS 선택기와 유사한 방법을 통해 DOM 요소를 얻거나 조작할 수 있으므로 전체 작업이 매우 간단하고 빠릅니다.

이 기사에서는 jQuery에서 일반적으로 사용되는 DOM 추가, 삭제, 수정 및 검색 방법을 소개합니다. 독자들이 jQuery의 DOM 작업을 보다 명확하게 이해할 수 있기를 바랍니다.

1. DOM 요소 가져오기

jQuery에서는 다음과 같은 일반적인 CSS 선택기를 사용하여 DOM 요소를 가져올 수 있습니다.

$('p') // 获取所有的p标签
$('.img') // 获取class名为img的元素
$('#box') // 获取ID为box的元素

이러한 일반적인 선택기 외에도 jQuery는 DOM 요소를 가져오는 일련의 메서드도 제공합니다. 예를 들어 find() 메서드를 사용하여 지정된 요소의 하위 요소를 찾을 수 있습니다. find()方法来查找指定元素的后代元素：

$('.container').find('.box') // 获取class名为container的元素中所有class名为box的后代元素

还可以通过parent()方法来获取指定元素的父元素：

$('.box').parent() // 获取所有class名为box的元素的父元素

二、添加元素

在执行DOM操作时，我们经常需要添加新的元素。jQuery提供了一系列的方法来添加元素到DOM中。

1. append()和appendTo()

这两个方法用于向指定元素内添加子元素，例如：

// 方法1
$('.container').append('<p>这是一个新的段落</p>');

// 方法2
$('<p>这是一个新的段落</p>').appendTo('.container');

2. prepend()和prependTo()

这两个方法用于向指定元素内添加子元素，但是是在子元素的前面添加，例如：

// 方法1
$('.container').prepend('<p>这是一个新的段落</p>');

// 方法2
$('<p>这是一个新的段落</p>').prependTo('.container');

3. after()和insertAfter()

这两个方法用于向指定元素后面添加兄弟元素，例如：

// 方法1
$('.box').after('<div class="box2">这是一个新的盒子</div>');

// 方法2
$('<div class="box2">这是一个新的盒子</div>').insertAfter('.box');

4. before()和insertBefore()

这两个方法用于向指定元素前面添加兄弟元素，例如：

// 方法1
$('.box').before('<div class="box2">这是一个新的盒子</div>');

// 方法2
$('<div class="box2">这是一个新的盒子</div>').insertBefore('.box');

三、删除元素

除了添加元素到DOM中之外，我们也会经常需要删除DOM中的元素。jQuery也提供了一系列的方法来删除元素。

1. remove()

这个方法用于删除指定元素，例如：

$('.box').remove() // 删除所有class名为box的元素

2. empty()

这个方法用于删除指定元素下面的所有子元素，例如：

$('.container').empty() // 删除class名为container的元素下所有子元素

三、修改元素

修改DOM元素也是我们常常需要思考的问题。在jQuery中，我们可以对元素进行属性修改、文本修改、样式修改等等。

1. 修改属性

我们可以使用attr()方法来修改元素的属性，例如：

$('.box').attr('title', '新的标题') // 修改所有class名为box的元素的title属性

2. 修改文本

我们可以使用text()方法来修改元素的文本，例如：

$('.box').text('新的文本内容') // 修改所有class名为box的元素的文本

3. 修改样式

我们可以使用css()方法来修改元素的样式，例如：

$('.box').css('color', 'red') // 修改所有class名为box的元素的文本颜色为红色

4. 设置属性

我们可以使用prop()

$('input[type="checkbox"]').prop('checked', true) // 将所有type为checkbox的input元素的checked属性设置为true

parent() 메서드를 사용하여 다음 요소를 가져올 수도 있습니다. 지정된 요소의 상위 요소:

rrreee

2. 요소 추가

DOM 작업을 수행할 때 새 요소를 추가해야 하는 경우가 많습니다. jQuery는 DOM에 요소를 추가하는 일련의 메서드를 제공합니다. 🎜

1. append() 및 appendTo()

🎜이 두 메서드는 지정된 요소에 하위 요소를 추가하는 데 사용됩니다. , 예: 🎜rrreee

2. prepend() 및 prependTo()

🎜이 두 가지 메서드 지정된 요소에 하위 요소를 추가하는 데 사용됩니다(예: 🎜rrreee

3. after() 및 insertAfter(). )

🎜이 두 가지 메소드는 지정된 요소 뒤에 형제 요소를 추가하는 데 사용됩니다. 예: 🎜rrreee

4. before() 및 insertBefore()

🎜이 두 메서드는 지정된 요소 앞에 형제 요소를 추가하는 데 사용됩니다. 예: 🎜rrreee🎜Three, 요소 삭제 🎜🎜추가 외에도 DOM에 요소를 추가하는 것 외에도 DOM에서 요소를 삭제해야 하는 경우가 많습니다. jQuery는 요소를 삭제하는 일련의 메서드도 제공합니다. 🎜

1. remove()

🎜이 메소드는 지정된 요소를 삭제하는 데 사용됩니다. 예: 🎜rrreee

empty()

🎜이 메소드는 지정된 요소 아래의 모든 하위 요소를 삭제하는 데 사용됩니다(예: 🎜rrreee🎜3 요소 수정🎜🎜DOM 요소 수정). 또한 우리가 문제에 대해 자주 생각해야 할 사항이기도 합니다. jQuery에서는 요소의 속성, 텍스트, 스타일 등을 수정할 수 있습니다. 🎜

1. 속성 수정

🎜attr() 메소드를 사용하여 요소의 속성을 수정할 수 있습니다. 예: 🎜rrreee

2. 텍스트 수정

🎜 text() 메소드를 사용하여 요소의 텍스트를 수정할 수 있습니다. 예: 🎜rrreee

3. 스타일 수정

🎜 css() 메소드를 사용하여 요소의 스타일을 수정할 수 있습니다. 예: 🎜rrreee

4. 속성 설정

🎜prop() 메서드를 사용하여 요소의 속성을 설정할 수 있습니다. 예: 🎜rrreee🎜Summary🎜🎜This 이 글에서는 jQuery에서 일반적으로 사용되는 DOM 추가, 삭제, 수정 및 쿼리 방법을 소개합니다. 이 글을 통해 jQuery의 DOM 작업을 보다 명확하게 이해하고 배운 내용을 실제 프로젝트에 적용할 수 있을 것입니다. 물론 jQuery는 DOM을 조작하기 위한 다른 강력한 방법도 제공하며 독자는 공식 문서를 통해 이에 대해 자세히 알아볼 수 있습니다. 🎜

위 내용은 jquery DOM 추가, 삭제, 수정 및 확인 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!