响应式网页设计之jQuery操作DOM

最新推荐文章于 2022-12-15 10:30:52 发布

PRINT！

最新推荐文章于 2022-12-15 10:30:52 发布

阅读量239

点赞数 3

分类专栏：响应式网页学习笔记文章标签： jquery javascript html

本文链接：https://blog.csdn.net/qq_48592827/article/details/118161686

版权

响应式网页学习笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

jQuery操作DOM

补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。

一、jQuery添加节点

使用jQuery工厂函数$()可以创建HTML元素
** $(HTML标签) **

var $h1 = $( "<h1>Hello world</h1>" )

添加节点
append()
$( ’ body ’ ).append ( $h1 )

① 可以直接传入HTML代码

$( ' body ' ).append( "<h1>Hello world</ h1>" )

② 可以添加多个元素

$( ' body ' ).append( $h1，$h2 )

例如：
所列方法的返回值均为原jQuery对象如$(“ul”).append("< li >new< /li >")
的返回值为 $(“ul”)

<ul>
	<li>old</li>
</ul>

在这里插入图片描述

注意：以上所列方法与前面所列方法执行的任务相同。不同之处在于内容的位置和选择器。
所列方法的返回值均为原jQuery对象

小试牛刀
使用jQuery对按钮绑定事件，当点击该按钮时，
在文本开头处添加“^”符号，结尾处添加“$”符号
在这里插入图片描述
实现代码如下所示：

<p>Hello World</p>
<input type="button" id="add-marks" value="添加符号"/>
<script type="text/javascript">
	$('#add-marks').click(addMarks)
	function addMarks() {
		$('p').prepend('<em>^</em>').append('<em>$</em>')
	}
</ script>

二、jQuery删除节点

以下示例所需的html代码

<div id="container">
	<ul id="list">
		<li id="item-1">1</li>
		<li id="item-2">2</li>
		<li id="item-3">3</li>
	</ul>
</div>

1. remove()

删除被选元素及其子元素
在这里插入图片描述

可输入参数进行过滤
在这里插入图片描述

2. empty()

删除被选元素的所有子元素
在这里插入图片描述

三、jQuery获取节点

以下示例所需的html代码

<div id="container">
	<ul id="list">
		<li id="item-1">1</li>
		<li id="item-2">2</li>
		<li id="item-3">3</li>
		<li id="item-4">4</li>
		<li id="item-5">5</li>
	</ul>
</div>

jQuery获取节点方法大全：
在这里插入图片描述
小试牛刀
使用jQuery对右侧按钮（不能修改HTML代码）绑定事件，点击按钮时，删除对应的输入框及按钮本身
题目所需的html代码

<input type="text"/> <input type="button" value="删除1"/>
<input type="text"/> <input type="button" value="删除2"/>
<input type="text"/> <input type="button" value="删除3"/>

在这里插入图片描述

$('input[type="button"]').click( function() {
	$(this).prev().remove()
	$(this).remove()
})

四、网页小案例

1.题目要求

使用jQuery完成待办事项

① 在输入框输入事项后，按回车键，将该事项添加到下方ul列表并清空输入框

② 新增加的事项应出现在列表最前面

③ 在每个事项后添加三个按钮，上移、下移、删除

④ 上移、下移可以改变对应事项的位置、顺序

⑤ 删除按钮可以删除对应事项

在这里插入图片描述

2.源码奉上

建议先尝试着写一下，自己完成更有成就感喔！
在这里插入图片描述
html纯表格代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.2/jquery.js"></script>
	<style>
		
	</style>
</head>
<body>
	<input type='text' id="taskInput" name=''>
	<ul></ul>
</body>
<script>
	var $elementInput = $("#taskInput");
	var $btnUp ="<input type='button' id='btnUp' value='↑'>";
	var $btnDown = "<input type='button' id='btnDown' value='↓'>";
	var $btnDel = "<input type='button' id='btnDel' value='删除'>";

	$(document).ready(function(){ 


		
	 });
	//回车键事件
	$elementInput.keyup(function(){
		if(event.keyCode==13){
			if($elementInput.val()!=""){
				$('ul').prepend("<li><span>"+$elementInput.val()+"</span>"+$btnUp+$btnDown+$btnDel+"</li>"); // 添加项目
				$elementInput.val(""); // 清空输入框
			}else{
				alert("请输入任务！");
			}
		}
	});

	/* 任务向上移动 */
	$('ul').on('click', '#btnUp',function(){
		//console.log("向上")
		var $task = $(this).parent();
		//console.log($task)
		var $prev =   $task.prev();
		if($prev.length==0){
			alert("已经是第一个啦");
		}else{
			$(this).parent().remove(); // 直接删除对应的li
			$prev.before($task);
		}
		
	});

	/* 任务向下移动 */
	$('ul').on('click', '#btnDown',function(){
		var $task = $(this).parent();
		console.log($task);
		var $next =   $task.next();
		if($next.length==0){
			alert("已经最后一个啦");
		}else{
			$(this).parent().remove(); // 直接删除对应的li
			$next.after($task);
		}
		
	});

	/* 删除任务 */
	$('ul').on('click', '#btnDel',function(){
		$(this).parent().remove(); // 直接删除对应的li
	});

</script>
</html>

PRINT！

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
4
评论
响应式网页设计之jQuery操作DOM

jQuery操作DOM补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。文章目录jQuery操作DOM一、jQuery添加节点二、jQuery删除节点1. remove()empty()三、jQuery获取节点六、网页小案例1.题目要求2.源码奉上一、jQuery添加节点使用jQuery工厂函数$()可以创建HTML元素** $(HTML标签) **var $h1 = $( "<h1>He
复制链接

扫一扫