jQuery（三）元素添加

最新推荐文章于 2024-04-24 10:00:20 发布

一个小叫兽

最新推荐文章于 2024-04-24 10:00:20 发布

阅读量194

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/ArcsinTao/article/details/107758677

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			/*function t(){
				$("#bd").attr("href","http://www.baidu.com");//需要在body后面加上onload
			}*/
			/*$(function(){
				$("#bd").attr("href","http://www.baidu.com");
			});//等效于onload，会在整个HTML加载后去执行，这样就会检测到id为db的属性*/
			
			$(document).ready(function(){
				$("#bd").attr("href","http://www.baidu.com");
			});
		</script>
		
		<style>
			.zzu{
				background-color: red;
			}
		</style>
	</head>
	<body<!-- onload="t()"-->>
		<div id="title" class="zzu">zzu</div>
		<a id="bd">baidu</a>
		
		<span id="xxx"></span>
		
		<script>
			var title = $("#title").attr("id");//获取
			console.log(title);
			//$("#bd").attr("href","http://www.baidu.com");
			
			//$("#title").addClass("zzu");
			$("#title").removeClass("zzu");
			$("#title").css("background-color","red");
			
			
			//document.getElementById("xxx").innerHTML="<b>成都市</b>";
			//document.getElementById("xxx").innerText="<b>成都市</b>";
			//$("#xxx").html("<b>成都市</b>");
			$("#xxx").text("<b>成都市</b>");
		</script>
		
		<input name="user_name" value="admin" />
		
		<input type="radio" name="sex" value="0" />女
		<input type="radio" name="sex" value="1" />男
		
		<input type="checkbox" name="hobby" value="0" />篮球
		<input type="checkbox" name="hobby" value="1" />足球
		<input type="checkbox" name="hobby" value="2" />羽毛球
		<input type="checkbox" name="hobby" value="3" />乒乓球
		
		<select id="province">
			<option value="">--请选择--</option>
			<option value="001" disabled="disabled">北京市</option><!--设置这个选项不能被选中-->
			<option value="002">成都市</option>
			<option value="003">上海市</option>
		</select>
		
		<script>
			var value = $("[name='user_name']").val();//获取
			console.log(value);
			
			//设置
			//文本框
			$("[name='user_name']").val("root");//设置文本框内容为root
			
			//单选框
			$("[name='sex']").val(["1"]);//设置选项1（男）
			
			//多选框
			$("[name='hobby']").val(["1","2"]);//设置多选1，2（1-足球，2-羽毛球）
			
			//下拉列表
			$("[#province]").val("002");//设置默认下拉列表选项的值为002（成都市）
			
			function tt(){
				$(document).scrollTop(0);
			}
		</script>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<div onclick="tt()" style="width: 50px;height: 50px; background-color: red; position: fixed;right: 10px;bottom: 10px;cursor: pointer;">
			回到顶端
		</div>
		
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

	</head>
	<body>
		<span>重庆市</span>
		<div>成都市</div>
		<div>北京市</div>
		<div>上海市</div>
		
		<script>
			var obj = $("div").first();//第一个jQuery对象
			console.log(obj);//得到是的jQuery对象
			console.log(obj[0]);//得到的是DOM对象
			
			var obj = $("div").last();//第一个jQuery对象
			console.log(obj[0]);
			
			$("html").find("div").each(function(){
				console.log(this);
			});
			
			obj = $("title").parent();//取得一个包含着所有匹配元素的唯一父元素的元素集合
			console.log(obj);
			obj = $("title").parents();//取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)
			console.log(obj);
			
			$("body").children().each(function(){//获取匹配元素的所有子元素组成的集合；该方法只考虑子元素而不考虑任何后代元素
				console.log(this);
			});
			
			console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
			$("span").next().each(function(){//取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
				console.log(this);
			});
			
			$("span").nextAll().each(function(){//查找当前元素之后所有的同辈元素
				console.log(this);
			});
			
			console.log("###########################");
			$("script").prev().each(function(){//取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
				console.log(this);
			});
			
			console.log("prevAll")
			$("script").prevAll().each(function(){//查找当前元素之前所有的同辈元素
				console.log(this);
			});
			
		</script>
	</body>
</html>

jQuery插入（内部插入和外部插入）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
					<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div id="content">
			<span>成都</span>
		</div>
		<!--内部插入-->
		<script>
			$("#content").prepend("<i>四川省</i>");//在已有元素前面追加元素
			$("#content").append("<b>市</b>");//在已有元素后面追加元素
		</script>
		
		<span>XX大学</span>
		<!--外部插入-->
		<script>
			$("span").before("<i>XX工业大学</i>");//前插入
			$("span").after("<a href='http://www.baidu.com/s'>大学</a>");//在元素后面追加
		</script>
		
		<img src="img/logo.png" />
		<script>
			$("img").wrap("<a href='http://www.baidu.com/s'>大学</a>");
		</script>
		
	</body>
</html>

一个小叫兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery（三）元素添加

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script> /*function t(){ $("#bd").attr("href","ht.
复制链接

扫一扫

专栏目录