jQuery操作文本节点、属性节点、添加节点

最新推荐文章于 2022-08-25 11:26:02 发布

开心码农小王。

最新推荐文章于 2022-08-25 11:26:02 发布

阅读量629

点赞数 1

分类专栏： jquert 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43732424/article/details/107395249

版权

jquert 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		//1. 操作文本节点: 通过 jQuery 对象的 text() 方法
		alert($("#bj").text());
		$("#bj").text("张三");
		
		//2. 操作属性节点: 通过 jQuery 对象的 attr() 方法. 
		//注: 直接操作 value 属性值可以使用更便捷的 val() 方法. 
		alert($(":text[name='username']").attr("value"));
		$(":text[name='username']").attr("value","李四");
		
		$(":radio[name='gender']").each(function() {
			alert($(this).val());
		});
		//测试使用 jQuery 创建节点并插入节点到指定的节点中
		/*
		1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽
		返回对应节点的 jQuery 对象:
		$("<li id='atguigu'>尚硅谷</li>")
		
		2. 添加节点:
		1). appendTo 和 append: 主语和宾语的位置不同:  
		$("<li id='atguigu'>尚硅谷</li>").appendTo($("#city"));	
		$("#city").append("<li id='atguigu'>[尚硅谷]</li>");
		
		2). prependTo 和  prepend: 主语和宾语的位置不同: 
		$("<li id='atguigu'>尚硅谷</li>").prependTo($("#city"));
		$("#city").prepend("<li id='atguigu'>[尚硅谷]</li>");	
		*/
		
 		//1). appendTo 和 append: 主语和宾语的位置不同: 
		$("<li id='jc'>晋城</li>").appendTo("#city");
		$("#city").append("<li id='ty'>太原</li>");
		//2). prependTo 和  prepend: 主语和宾语的位置不同: 
		$("<li id='wz'>王者</li>").prependTo("#game");
		$("#game").prepend("<li id='cj'>吃鸡</li>");
		
		//3)插入到指定节点的后面
		$("#bj").after("<li id='jc'>晋城</li>");
		$("<li id='jc'>晋城</li>").insertAfter("#bj");	
		//4)插入到指点节点的前面
		$("#bj").before("<li id='jc'>晋城</li>");
		$("<li id='jc'>晋城</li>").insertBefore("#bj");
		
		
	});
</script>
<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="atguigu"/>
		
</body>
</html>

开心码农小王。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作文本节点、属性节点、添加节点

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><script type="text/javascript" src="jquery-1.7.2.js"></script><script type="text/javascript"> $(func
复制链接

扫一扫