How to implement jquery DOM addition, deletion, modification and check

jQuery is one of the most popular JavaScript libraries currently. It contains a series of APIs to facilitate our manipulation of DOM elements. In jQuery, we can obtain or manipulate DOM elements through methods similar to CSS selectors, making the entire operation very simple and fast.

This article will introduce the commonly used DOM addition, deletion, modification and search methods in jQuery. I hope readers can have a clearer understanding of jQuery's DOM operations.

1. Get DOM elements

In jQuery, we can use common CSS selectors to get DOM elements, such as:

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

In addition to these commonly used selectors In addition, jQuery also provides a series of methods to obtain DOM elements. For example, we can find the descendant elements of the specified element through the find() method:

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

We can also get the parent element of the specified element through the parent() method ：

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

2. Add elements

When performing DOM operations, we often need to add new elements. jQuery provides a series of methods to add elements to the DOM.

1. append() and appendTo()

These two methods are used to add child elements to the specified element. , for example:

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

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

2. prepend() and prependTo()

These two methods are used to add to the specified element Add child elements inside, but add them in front of the child elements, for example:

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

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

3. after() and insertAfter()

These two methods are used to add sibling elements after the specified element, for example:

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

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

4. before() and insertBefore()

These two methods are used to add sibling elements in front of the specified element, for example:

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

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

3. Delete elements

In addition to adding elements to the DOM, We also often need to delete elements in the DOM. jQuery also provides a series of methods to delete elements.

1. remove()

This method is used to delete the specified element, for example:

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

2. empty()

This method is used to delete all child elements under the specified element, for example:

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

3. Modify elements

Modify DOM elements This is also a question we often need to think about. In jQuery, we can modify attributes, text, style, etc. of elements.

1. Modify attributes

We can use the attr() method to modify the attributes of an element, for example:

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

2. Modify text

We can use the text() method to modify the text of an element, for example:

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

3. Modify style

We can use the css() method to modify the style of the element, for example:

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

4. Set attributes

We can useprop() method to set the attributes of elements, for example:

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

Summary

This article introduces the commonly used DOM addition, deletion, modification and query methods in jQuery. I hope readers can learn more about it through this article. Have a clearer understanding of jQuery's DOM operations and apply them in actual projects. Of course, jQuery also provides some other powerful methods for manipulating the DOM, and readers can learn more about them through the official documentation.

The above is the detailed content of How to implement jquery DOM addition, deletion, modification and check. For more information, please follow other related articles on the PHP Chinese website!