jquery操作内容

最新推荐文章于 2024-08-15 19:25:35 发布

道法—自然

最新推荐文章于 2024-08-15 19:25:35 发布

阅读量198

点赞数 1

分类专栏：前端页面

本文链接：https://blog.csdn.net/wyqwilliam/article/details/103546607

版权

前端页面专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>jquery操作内容</title>
		<meta charset="UTF-8"/>
		<!--
			jquery操作内容:
				获取元素对象
				操作元素内容：
					获取内容：
						元素对象名.html()//返回当前元素的所有内容，包括HTML标签
						元素对象名.text()//返回当前元素的所有文本内容，不包括HTML标签
					修改内容：
						元素对象名.html("新的内容")//新的内容会将原有内容覆盖，并HTML标签会被解析
						元素对象名.text("新的内容")//新的内容会将原有内容覆盖，并HTML标签不会被解析
					注意：
						元素对象名.html(元素对象名.html()+"新的内容")//追加效果
		-->
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//获取元素内容
				function getData(){
					//获取元素对象
					var div=$("#showdiv");
					//获取内容
						alert("html()方式:"+div.html());
						alert("text()方式:"+div.text());
				}
			//修改元素内容
				function operData(){
					//获取元素对象
					var div=$("#showdiv");
					//修改内容
					//div.html(div.html()+"<u>你的，去前面探路的干活....</u>");
					div.text("<u>你的，去前面探路的干活....</u>")
					
				}
			//用户名校验
				function checkUname(){
					//获取用户名信息
					var uname=$("#uname").val();
					//获取Span对象
					var span=$("#unameSpan");
					//校验
						//声明校验规则
						var reg=/^[\u4e00-\u9fa5]{2,4}$/;
						//开始校验
						if(uname==""){
							span.html("用户名不能为空");
						}else if(reg.test(uname)){
							span.html("用户名OK");
						}else{
							span.html("用户名不符合规则");
						}
				}
		</script>
	</head>
	<body>
		<h3>jquery操作内容</h3>
		<input type="button" id="" value="测试获取---html()&text()" onclick="getData()" />
		<input type="button" id="" value="测试修改---html()&text()" onclick="operData()" />
		<hr />
		<div id="showdiv" style="width: 200px;height: 200;border: solid 1px; background-color:orange;">
			<b>皇军，前面有八路的干活儿~</b>
		</div>
		<hr />
		用户名: <input type="text" name="uname" id="uname" value="" onblur="checkUname()"/><span id="unameSpan"></span>
	</body>
</html>