3.操纵节点

最新推荐文章于 2024-07-10 14:03:37 发布

「已注销」

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量5.2k

点赞数

分类专栏： jQuery 文章标签： javascript 开发语言职场和发展

本文链接：https://blog.csdn.net/qq_67192586/article/details/123953685

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

操纵节点文本内容

// 常用方法
       html()取值    html(text)设置值,并且html代码可以识别,解析
       text()取值   text(text)设置值,但是不会对html代码进行解析
       val()取值   val(value)设置值

<script type="text/javascript">
		$(function(){
			// 获取div01 里面的内容:
			// var div01 = $("#div01").html(); // innerHTML
			// alert(div01);
			
			// var div01 = $("#div01").text(); // innerText
			// alert(div01);
			
		});
		
		function test(){
				// 将div01中的内容放入div02中
				var div01 = $("#div01").html();
				//$("#div02").html(div01);
				$("#div02").text(div01);
		}
			
		
		function test02(){
			// 获取value的值
			//alert($("#username").val());
			
			//设置value的值
			$("#username").val("looo");
		}
		
	</script>
  </head>
  <body>
	<div id="div01">
		<h1>你好 Java</h1>
	</div>
	<div id="div02"></div>
	<input type="button" onclick="test()" value="测试" />
	
	<input type="text" id="username"/>
	<input type="button" onclick="test02()" value="测试2"/>
  </body>
</html>

操纵节点文本属性

1.常用方法

attr(attr,value)给attr属性设置value值

attr(attr)读取attr属性

removeAttr(attr)将attr属性移除

prop(attr)读取

prop(attr,value)设置

在jQuery1.6之后新出的方法,这个方法专门针对:selected,checked,readonly,disabled

each() -遍历

<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			
		});
		
		function test01(){
			// 获取a标签
			var a=$("#a1");
			//a.attr("href","http://www.jd.com");
			//a.attr("target","_self");
			//a.html("京东");
			//alert(a.attr("href"));
			a.removeAttr('target');
		}
		
		function test02(){
			// 获取到复选框的checked那个状态
			var flag=$("#agreement").prop("checked");
			if(flag){	// 如果复选框被选中 按钮可用
				$(":submit").prop("disabled",false);//不禁用就是可用
			}else{ // 按钮没被选中 不可用
				$(":submit").prop("disabled",true);//让它禁用
			}
		}
		
		function test03(){
			var lis = $("li");
			lis.each(function(){
				// this 是js的dom对象
				// alert(this.value+'---'+this.innerHTML);
				
				// js->jq
				alert($(this).val()+'----'+$(this).html());
			});
		}
	</script>
  </head>
  <body>
	<a id="a1" href="http://www.taobao.com" target="_blank">淘宝</a>
	<input type="button" value="测试" onclick="test01()"/>
	
	<hr/>
	<h3>注册用户</h3>
	<form action="" method="get">
		<table border="0" width="40%">
			<tr>
				<td>手机号码</td>
				<td><input type="text" name="username" id="username" value="请输入用户名" /></td>
			</tr>
			
			<tr>
				<td>密码</td>
				<td><input type="password" name="pwd" id="pwd"></td>
			</tr>
			
			<tr>
				<td>确认密码</td>
				<td><input type="password" name="repwd" id="repwd" /></td>
			</tr>
			
			<tr>
				<td>&nbsp;</td>
				<td><input type="checkbox" name="agreement" id="agreement" onchange="test02()"/>我同意该协议</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" id="submit" value="提交" disabled="disabled" />
					<input type="reset" value="重置"/>
				</td>
			</tr>
		</table>
	</form>
	<ul>
		<li value="11">JavaSE</li>
		<li value="22">JavaME</li>
		<li value="33">JavaEE</li>
		<li value="44">Oracle</li>
	</ul>
	<input type="button" value="遍历列表信息" onclick="test03()">
  </body>
</html>

操纵节点文档结构

1.常用方法:

append(),appendTo() 添加子元素(末尾)

prepend() , prependTo() 添加子元素(前置)

before() , insertBefore() 添加平级元素(前面)

after() , insertAfter() 添加平级元素(后面)

replaceWith() 和 replaceAll() 用于替换某个节点

remove() 删除元素 empty()删除子元素

<script type="text/javascript">
		$(function(){
			
		});
		
		function test(){
			// 在页面的某个位置,添加一个口才课div
			// 可以直接将html代码转换为jQ对象:
			var div = $('<div><p>口才课</p></div>');
			
			// 1.添加到div内部中最后位置上
			//$("div:eq(1)").append(div);
			//div.appendTo($("div:eq(1)"));
			
			// 2.添加到div内部开始位置上:
			// $("div:eq(1)").prepend(div);
			// div.prependTo($("div:eq(1)"));
			
			// 3.添加到div外部上侧
			// $("div:eq(1)").before(div);
			// div.insertBefore($("div:eq(1)"));
			
			// 4.添加到div外部下侧
			// $("div:eq(1)").after(div);
			// div.insertAfter($("div:eq(1)"));
			
			// 5.替换效果
			// $("div:eq(1)").replaceWith(div);
			// div.replaceAll($("div:eq(1)"));
			
			// 6.删除
			// $("div:eq(1)").remove(); //将div整个都删除
			$("div:eq(1)").empty(); // 将div中的内容清空,但是div还在
		}

	</script>
  </head>
  <body>
	<div>
		<p>1.JavaSE</p>
		<p>2.Oracle</p>
	</div>
	<div>
		<p>3.HTML/CSS/JS</p>
		<p>4.jQuery</p>
		<p>5.JSP/Servlet/Ajax</p>
	</div>
	<div>
		<p>6.SSM</p>
		<p>7.SpringBoot/SpringCloud/SpringData</p>
		<p>8.Maven/Linux</p>
		<p>9.Redis/Solr/Nginx</p>
	</div>
	<div>11.就业指导</div>
	<input type="button" value="测试" onclick="test()" />
  </body>
</html>