zoukankan      html  css  js  c++  java
  • 28 jQuery——操作元素内容

    jquery 操作元素内容的学习

    html()--对应innerHTML

    获取
    对象名.html() //返回当前对象的所有内容包含HTML标签
    修改
    对象名.html("新的内容") //新的内容会将原有内容覆盖,HTML标签会被解析执行

    text()--对应innerText

    获取与修改与html()相同

    测试代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>jQuery操作元素内容</title>
    		<script type="text/javascript" src="js/jQuery-3.4.1.js"></script>
    		<!-- 
    		 jquery 操作元素内容的学习
    			 html()--对应innerHTML
    				获取
    					对象名.html() //返回当前对象的所有内容包含HTML标签
    				修改
    					对象名.html("新的内容") //新的内容会将原有内容覆盖,HTML标签会被解析执行
    			text()--对应innerText
    				获取与修改与html()相同
    		 -->
    		<script type="text/javascript">
    			//获取标签内容
    			function testHtml(){
    				//获取元素对象
    				var showdiv = $("#showdiv");
    				//获取元素的内容
    				alert(showdiv.html())
    				// html()相当于innerHTML
    			}
    			//修改标签内容
    			function testHtml2(){
    				//获取元素对象
    				var showdiv = $("#showdiv")
    				//修改元素的内容
    				showdiv.html("<b>今天天气真好,适合打鬼子<b>");
    			}
    			//获取标签纯文本内容
    			function testHtml3(){
    				//获取元素对象
    				var showdiv = $("#showdiv");
    				//获取元素文本内容
    				alert(showdiv.text())
    			}
    			//修改标签纯文本内容
    			function testHtml4(){
    				//获取元素对象
    				var showdiv = $("#showdiv");
    				//修改元素文本内容
    				showdiv.text("<b>你的良心大大的坏了<b>");
    			}
    		</script>
    	</head>
    	<body>
    		<h3>jQuery操作元素的内容</h3>
    		<input type="button" name="" id="" value="获取元素内容--html()" onclick="testHtml()"/>
    		<input type="button" name="" id="" value="修改元素内容--html()" onclick="testHtml2()"/>
    		<input type="button" name="" id="" value="获取元素内容--text()" onclick="testHtml3()"/>
    		<input type="button" name="" id="" value="修改元素内容--text()" onclick="testHtml4()"/>
    		<hr>
    		<div id="showdiv">
    			<b>皇军,前面有八路的干活</b>
    		</div>
    	</body>
    </html>
    

      

  • 相关阅读:
    会计基础第二次模拟题(4)
    会计基础第二次模拟题(3)
    会计基础第二次模拟题(2)
    如何使用印象笔记进行更好的学习呢?
    怎么安装WinXP和Win7双系统
    清理和关闭多余的Windows 7系统服务
    Foxmail邮箱最新应用指南二
    Windows 系统提示“内存不足”的原因及解决方法
    会计基础第二次模拟试题(1)
    关于后端程序开发如何评估工作量的方法
  • 原文地址:https://www.cnblogs.com/Scorpicat/p/12259239.html
Copyright © 2011-2022 走看看