下面我来详细讲解使用JS DOM和jQuery分别实现简单增删改的完整攻略。
使用JS DOM实现简单增删改
首先我们需要明确一下,JS DOM是指通过JavaScript来操作DOM元素,实现交互效果的一种技术。下面是详细的步骤:
添加元素
首先,我们需要一个按钮,并绑定一个事件,当用户点击按钮时会自动创建一个新的元素。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Add Element Using JS DOM</title>
</head>
<body>
<button id="addButton">Add Element</button>
<ul id="list"></ul>
<script>
var addButton = document.getElementById("addButton");
var list = document.getElementById("list");
var count = 1;
addButton.addEventListener("click", function(){
var newItem = document.createElement("li");
newItem.innerHTML = "Item " + count;
count++;
list.appendChild(newItem);
});
</script>
</body>
</html>
在这段代码中,我们首先获取到了按钮和列表元素的引用,然后在按钮上绑定了一个click事件。在事件触发时,我们创建了一个新的li元素,并通过innerHTML属性设置了它的内容,最后将它追加到了列表元素中。
删除元素
接下来,我们来看一下如何删除元素。我们可以通过给每个元素绑定一个事件来实现这个功能。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Remove Element Using JS DOM</title>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="removeButton">Remove</button></li>
<li>Item 2 <button class="removeButton">Remove</button></li>
<li>Item 3 <button class="removeButton">Remove</button></li>
</ul>
<script>
var removeButtons = document.querySelectorAll(".removeButton");
var list = document.getElementById("list");
for (var i = 0; i < removeButtons.length; i++) {
removeButtons[i].addEventListener("click", function() {
var li = this.parentNode;
list.removeChild(li);
});
}
</script>
</body>
</html>
在这段代码中,我们首先获取到了所有的删除按钮,然后依次给它们绑定了一个click事件。在事件触发时,我们首先获取到了当前按钮所在的li元素,然后调用parentNode属性获取到它的父元素,最后将它从父元素中删除。
修改元素
最后,我们来看一下如何修改元素。我们可以通过将元素变为可编辑状态,并在用户完成编辑时更新内容。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Edit Element Using JS DOM</title>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="removeButton">Remove</button></li>
<li>Item 2 <button class="removeButton">Remove</button></li>
<<li contenteditable="true">Item 3 </li>
</ul>
<script>
var list = document.getElementById("list");
var editableItem = list.querySelector("[contenteditable]");
editableItem.addEventListener("blur", function() {
editableItem.removeAttribute("contenteditable");
});
</script>
</body>
</html>
在这段代码中,我们首先获取到要编辑的元素,并给它绑定了一个blur事件。在事件触发时,我们调用removeAttribute方法将contenteditable属性从它中移除。
使用jQuery实现简单增删改
接下来让我们来介绍使用jQuery来实现简单的增删改功能。jQuery的DOM操作功能非常强大,下面是详细的步骤:
添加元素
添加元素也很简单,我们只需要创建一个按钮,当用户点击按钮时就会自动创建一个新的元素。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Add Element Using jQuery</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="addButton">Add Element</button>
<ul id="list"></ul>
<script>
var count = 1;
$("#addButton").click(function() {
var newItem = $("<li>Item " + count + "</li>");
count++;
$("#list").append(newItem);
});
</script>
</body>
</html>
在这段代码中,我们首先引入了jQuery库,然后获取到了按钮元素的引用,并通过click方法绑定了一个click事件。在事件触发时,我们首先创建了一个新的li元素,然后将它追加到了列表元素中。
删除元素
删除元素也很简单,我们依旧可以通过给每个元素绑定一个事件来实现这个功能。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Remove Element Using jQuery</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="removeButton">Remove</button></li>
<li>Item 2 <button class="removeButton">Remove</button></li>
<li>Item 3 <button class="removeButton">Remove</button></li>
</ul>
<script>
$(".removeButton").click(function() {
var li = $(this).closest("li");
li.remove();
});
</script>
</body>
</html>
在这段代码中,我们首先获取到了所有的删除按钮,然后通过click方法绑定了一个click事件。在事件触发时,我们首先获取到当前按钮所在的li元素,然后调用closest方法获取到最近的li元素,并调用remove方法将它从DOM树中删除。
修改元素
修改元素也十分简单,我们可以通过给元素绑定一个双击事件,当用户双击元素时就会变成可编辑状态。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Edit Element Using jQuery</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="removeButton">Remove</button></li>
<li>Item 2 <button class="removeButton">Remove</button></li>
<li contenteditable="true">Item 3</li>
</ul>
<script>
$("#list [contenteditable]").dblclick(function() {
$(this).removeAttr("contenteditable");
});
</script>
</body>
</html>
在这段代码中,我们首先获取到要编辑的元素,然后通过dblclick方法绑定了一个双击事件。在事件触发时,我们调用removeAttr方法将contenteditable属性从它中移除。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用js dom和jquery分别实现简单增删改 - Python技术站