jQuery基本DOM操作

最新推荐文章于 2024-07-04 12:16:35 发布
最新推荐文章于 2024-07-04 12:16:35 发布
阅读量1.8k 收藏 6
点赞数
分类专栏： javaweb学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43386754/article/details/86486384
版权
  • 基本的DOM操作之中主要是进行元素的追加,删除等处理操作

追加元素操作

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
		//添加元素
			$(mydiv).append("<h1><span>HelloWorld</span></h1>");
		
			
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>
  • 执行结果

在这里插入图片描述

  • 现在可以特别清楚的发现,在jQuery中如果要进行DOM处理操作,直接编写HTML语句即可,但是对于append()函数处理操作可以发现,他不光可以处理文本,还可以处理对象,在jQuery里如果要创建一个DOM对象,直接使用字符创建

创建对象后追加

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
		//创建DOM对象
		var obj = $("<span>Hellowrold</span>");
		//设置属性
		obj.attr("class","init");
		//将属性添加到指定的属性之中
		$(mydiv).append(obj);
		
			
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>

在这里插入图片描述

  • 现在可以特别清楚的发现一点,所有的操作中都可以使用的DOM元素 都是直接通过字符串定义的.但是在整个过程之中,需要注意一点的是,也可以直接处理函数的返回结果.

使用函数的返回 结果来处理数据

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//直接将一个函数的执行结果天津哀悼元素中
			$(mydiv).append(function(){
			//使用"$(this)"的形式可以将JavaScript对象转换为jQuery对象
				if($(this).text()=="maoshu"){
				//清空原来的内容
					$(this).text("")
					return "<span class='init'>HelloWorld.com</span>";
				}else{
					return "你好!!";
				}
			});
		
			
		})
	</script>
</head>
<body>
	<div id="mydiv">maoshu</div>
</body>
</html>

在这里插入图片描述

此时的操作,内容可以根据JavaScript的直接处理而得到.

动态生成表格

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			for(var x=0; x < 20; x++){
				$(depttable).append("<tr><td>"+x+"</td><td>部门名称"+x+"</td><td>部门位置"+x+"</td></tr>");
			}
		});
	</script>
</head>
<body>
	<div id="mydiv">
		<table border="1" id="depttable">
			<tr>
				<td>部门编号</td>
				<td>部门名称</td>
				<td>部门位置</td>
			</tr>
		</table>
	</div>
</body>
</html>
  • 页面效果

在这里插入图片描述

  • 对于表格的处理操作,在jQuery中的方便之处非常明显

实现表格行的删除操作


<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//删除id为depttable的元素下的所有大于第一个tr的子元素,
			$("#depttable tr:gt(0)").remove();
		});
	</script>
</head>
<body>
	<div id="mydiv">
		<table border="1" id="depttable">
			<tr>
				<td>部门编号</td>
				<td>部门名称</td>
				<td>部门位置</td>
			</tr>
			<tr>
				<td>1</td>
				<td>部门名称1</td>
				<td>部门位置1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>部门名称2</td>
				<td>部门位置2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>部门名称3</td>
				<td>部门位置3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>部门名称4</td>
				<td>部门位置4</td>
			</tr>
		</table>
	</div>
</body>
</html>

在这里插入图片描述

  • 既然表格已经可以动态生成了,那么就可以利用同样的方式实现下拉列表框.

实现动态生成下拉列表框

<html>
<head>
	<title>jquery 属性操作</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
	//在页面加载时执行
		$(function(){
			//创建一个jQuery对象
			var selectObj = $("<select id='city'><option value='-1'>~~~~~请选择~~~~~\></option></select>");
			//追加元素
			$("#mydiv").append(selectObj);
			//循环添加option元素
			for(var x=0; x < 10 ;x++){
				selectObj.append("<option value="+x+">城市"+x+"</option>");
			}
		});
	</script>
</head>
<body>
	<!-- 下拉列表框层-->
	<div id="mydiv"></div>
</body>
</html>
  • 页面效果

在这里插入图片描述

  • 只要存在有jQuery开发框架,那么发现前台代码的动态生成基本都不会成为难点
{[("青椒盖饭")]}
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作DOM
weixin_52841956的博客
02-23 610
我们先来看一下JavaScript怎么操作DOM元素 1.根据元素的id document.getElementById("id值"); 2.根据元素的类名className document.getElementsByClassName(className); 3.标签名 tagName document.getElementsByTagName(tagName); 4.获取dom元素属性、样式... dom元
jQuery中的DOM操作
m0_52660785的博客
07-28 1921
jQuery中的DOM操作
Jquery基础之DOM操作
weixin_34348805的博客
05-29 139
　　Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 　　每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码： 　　 V...
jQuery 常用方法详解及示例
最新发布
abments的博客
07-04 927
jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 交互。本文将详细介绍 jQuery 的一些常用方法，并通过示例说明它们的使用方法。用于选择 DOM 元素。示例： 筛选出与选择器匹配的元素。示例： 移除与选择器匹配的元素。示例： 选择具有指定索引值的元素。示例： 2. 操作 DOM 元素 获取或设置元素的 HTML 内容。示例： 获取或设置元素的文本内容。示例： 获取或设置元素的属性。示例： 移除元素的属性。示例：
JQuery的dom操作
只是个人笔记，请见谅
03-28 1845
jquery的dom操作查找节点，修改属性创建节点-内部插入法创建节点-外部插入法删除节点复制节点替换节点属性操作样式操作获取html文本和值常用遍历节点方法css-dom操作多选框应用页面加载完毕触发方法作业     创建节点 创建节点：使用jQuery 的工厂函数$(): $(html标签);会根据传入的 html标记字符串创建一个jQuery对象,并返回 动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中; 当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。例
jQuery中DOM常见操作实例小结
10-16
以上总结的知识点涵盖了jQuery中DOM操作的基本方法和技巧，通过实例演示了如何使用这些方法来完成具体的DOM操作任务。这些操作对于进行Web前端开发的人员来说至关重要，因为它们可以帮助开发者高效地对网页内容进行...
jquery 操作DOM的基本用法分享
10-28
接下来，我们将深入探讨 jQuery 在操作 DOM 方面的一些基本用法。 首先，使用 jQuery 选择器选取 DOM 元素是最基础的操作之一。jQuery 选择器能让我们快速选中页面中的元素，例如使用 `$("ul li:eq(1)")` 可以选取...
jQuery中Dom的基本操作小结
10-26
在本篇文章中，我们将对jQuery中与DOM操作相关的基本方法进行详细总结和介绍。 首先，让我们来看一下如何使用jQuery进行节点的查找。在示例中，有一个按钮点击事件被绑定在id为"btnFind"的按钮上。当按钮被点击时，...
jQuery DOM操作实例
01-19
更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法...
使用jQuery操作DOM
weixin_30776863的博客
02-27 76
一.DOM操作分为3类 1.DOM Core DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它.它的用途不仅限于处理一种使用标记语言编写出来的文档 2.HTML-DOM 比DOM Core出现的更早,它提供了一些更加简明的标记来描述各种HTML-DOM的元素属性 3.CSS-DOM CSS-DOM 失针对CSS的操作,...
jQuery—DOM操作
有道无术，术尚可求，有术无道，止于术。
02-10 273
一、内容操作 1. html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font> 2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> -...
jq中的DOM操作
个人笔记
04-02 376
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq中的DOM操作</title> </head> <body> <div class="root"></div> <div id="box"></div> <button id="btn1"&gt
jQuery DOM操作
qq_36194388的博客
07-29 1375
jQuery中DOM基本操作 jQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。 【查】查找结点 查找节点非常容易，使用选择器就能轻松完成各种查找工作。 就是利用我们前面学习的选择器来查找节点的。 例：查找元素节点p返回p内的文本内容。 $("p").text(); 例：查找元素节点p的属性返回属性名称对应的属性值 $("p").attr("title"); //.
使用jQuery操作 DOM
shi15062772894的博客
12-31 512
DOM操作分类 DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" jQuery中的DOM操作： jQuery对JavaScript中的DOM操作进行了封装 jQuery中的DOM操作 样式操作 内容及Value值操作 节点操作 节点属性操作 节点遍历 CSS-DOM操
Jquery中DOM操作（详细）
每天多一点
11-17 3844
Jquery中的DOM操作 为了能全面的讲解DOM操作，首先需要构建一个网页。 HTML代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
jqueryDOM操作
UNDEFINED_AUBE的博客
12-22 665
一、 1、class属性：.addClass()、.hasClass()、.removeClass()、.toggleClass()   2、DOM插入并包裹现有内容 （1）.wrap(wrappingElement这个参数就是一个元素>)：在每个匹配的元素外层包上一个html元素 （2）.unwrap()：将匹配元素集合的紧挨着的父级元素删除（再上一级就删不了了），保留自身（和兄弟元素
jquery操作DOM
07-28
jQuery是一个流行的JavaScript库，它简化了对DOM元素的操作。...这些只是jQuery操作DOM的一些基本示例，jQuery还提供了许多其他强大的功能，如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值