jQuery基本DOM操作

  • 基本的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是一个流行的JavaScript库,它简化了对DOM元素的操作。下面是一些常见的jQuery操作DOM的示例: 1. 选择元素: 使用jQuery选择器可以方便地选择DOM元素。例如,要选择id为"myElement"的元素,可以使用以下代码: ```javascript var element = $("#myElement"); ``` 2. 操作样式: 使用jQuery可以轻松地添加、删除或修改元素的样式。例如,要将元素的背景颜色设置为红色,可以使用以下代码: ```javascript element.css("background-color", "red"); ``` 3. 操作内容: jQuery提供了许多方法来操作元素的内容。例如,要获取或设置元素的文本内容,可以使用以下代码: ```javascript var text = element.text(); // 获取文本内容 element.text("Hello, World!"); // 设置文本内容 ``` 4. 操作属性: 使用jQuery可以方便地获取或设置元素的属性。例如,要获取或设置元素的href属性,可以使用以下代码: ```javascript var href = element.attr("href"); // 获取href属性值 element.attr("href", "https://www.example.com"); // 设置href属性值 ``` 5. 添加和删除元素: 使用jQuery可以在DOM中添加或删除元素。例如,要在一个元素内部添加一个新的子元素,可以使用以下代码: ```javascript element.append("<div>New element</div>"); // 添加新的子元素 ``` 这些只是jQuery操作DOM的一些基本示例,jQuery还提供了许多其他强大的功能,如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值