jq 操作元素内容

最新推荐文章于 2022-12-26 03:53:17 发布
最新推荐文章于 2022-12-26 03:53:17 发布
阅读量281 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/103037015
版权 
操作元素内容

	**返回元素的所有内容，包括子标签**
		对象数组.html();
				function t1()
			{
				var showdiv=$("#showdiv");
				alert(showdiv.html());
			}
			
	**返回元素的内容，不包括子标签**
		对象数组.text();
				function t4()
			{
				var showdiv=$("#showdiv");
				alert(showdiv.text());
			}
			
	**解析标签**
	
		覆盖元素内容
			对象数组.html("修改内容");  会解析标签
			会覆盖原有内容
					function t2()
				{
					var showdiv=$("#showdiv");
					showdiv.html("<b>哇啊啊啊</b>")
				}
				
		追加新内容
			对象数组.html(对象数组.html()+"添加内容");
					function t3()
				{
					var showdiv=$("#showdiv");
					showdiv.html(showdiv.html()+"呜啦啦");
				}
				
	**不解析标签**
	
		对象数组.text("修改内容")
		对象数组.text(对象数组.text()+"添加内容")

代码示例:

<html>
	<head>
		<title>jq 操作元素的内容和样式</title>
		<meta charset="utf-8"/>
		<script type="text/javascript" charset="UTF-8" src="js/jquery-3.4.1.js"></script>
		<!--css-->
		<script type="text/javascript">
			
			function t1()
			{
				//获取元素对象
				var showdiv=$("#showdiv");
				//获取元素内容
				alert(showdiv.html());
			}
			function t2()
			{
				var showdiv=$("#showdiv");
				showdiv.html("<b>哇啊啊啊</b>")
			}
			function t3()
			{
				var showdiv=$("#showdiv");
				showdiv.html(showdiv.html()+"呜啦啦");
			}
			function t4()
			{
				var showdiv=$("#showdiv");
				alert(showdiv.text());
			}
		</script>
		<style type="text/css">

		</style>
	</head>
	<body>
		<h3 align="center">jq 操作元素的内容和样式</h3>
		<input type="button" name="" id="" value="操作内容" onclick="t1()"/>
		<input type="button" value="修改内容" onclick="t2()"/>
		<input type="button" value="追加内容"  onclick="t3()"/>
		<input type="button" value="内容2" onclick="t4()" />
		
		<hr />
		<div id="showdiv">
			<b>嗷嗷嗷嗷</b>
			
		</div>
			 
			
			
		</div>
	</body>
</html>
神奇大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中的元素操作
qq_49956121的博客
09-21 796
一、元素内容操作 元素内容操作是jQuery对元素文本的DOM 操作。 1、html()获取HTML中的内容 2、html(“val”)设置HTML中的内容 3、text()获取文本 注意：结果是由所有匹配元素包含的文本内容组合起来的文本。 4、text(“text”)设置文本 注意：之前存在的值全部清除，只保留修改的值，设置所有匹配元素文本。 5、val()获取元素值 6、val(“value”)设置元素值 注意：之前存在的值全部清除，只保留修改的值，设置所有匹配元素文本。 二、元素属性操作 元素属
jq 页面元素操作
syousetu的博客
07-21 157
js页面元素操作jq页面元素的基本操作jq 将一个元素添加到一个元素的末尾jq 元素解绑onclick事件 jq页面元素的基本操作 jq 将一个元素添加到一个元素的末尾 $(aim_obj).appendTo(ori_obj) 将 aim_obj 添加到 ori_obj的末尾 ori取值可以为： 标签名称，如 p，div id：#id_name class：.class_name jq 元素解绑onclick事件 需求背景： 页面元素有点击事件： <button id=''button' οncli
JQuery系列之元素操作
老__L的博客
09-04 817
JQuery 元素操作主要讲的是用 JQuery 方法，操作标签的遍历、创建、添加、删除等操作。以每一个匹配的元素作为上下文来执行一个函数。意味着，每次执行传递进来的函数时，函数中的关键字都指向一个不同的元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 将停止循环 (就像在普通的循环中使用 )。返回 跳至下一个循环(就像在普通的循环中使用)。 1.3、参数 callback：Funct
jQuery如何设置元素的值
weixin_35755434的博客
12-26 860
jQuery 可以使用 val() 方法来设置元素的值。 例如，如果你想设置一个文本框的值，你可以这样写： $("#textbox").val("新的值"); 如果你想设置一个下拉列表的值，你可以这样写： $("#selectbox").val("新的值"); 注意，如果你想设置的值不在下拉列表的选项中，这个值不会被设置。 你还可以使用 text() 方法来设置某些元素的文本内容，例如： $(...
jQuery获取元素
emool的博客
12-18 7514
简单总结一下获取元素的一些方法， 可以通过jq选择器获取可以通过关系节点获取. 1.基本选择器 符号 说明 $(‘#demo’) 选择 id 为 demo 的元素 $(‘.demo’) 选择 class 为 demo 的所有元素 $(‘div’) 选择所有 div 标签元...
jQuery元素内容操作的方法有多少种？
xiaoxijinger的博客
07-15 935
jQuery中操作元素内容的方法，主要包括html()方法、text()方法和val()方法。html()方法用于获取或设置元素的HTML内容，text()方法用于获取或设置元素的文本内容，val()方法用来获取或设置表单元素的value值。具体使用说明如表1所示。 表1 元素内容操作 需要注意的是，val()方法可以操作表单（select、radio和checkbox）的选中情况，当要获取的元素是元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况时，可以传递数组参数。 为了让读者更好地理
js操作元素
weixin_45487559的博客
03-17 304
js中可以通过DOM操作来改变网页的内容、结构和样式，利用DOM操作元素可以改变元素的内容、属性等 1.改变元素(element)的内容 有两种方式，但是它们也有区别： element.innerText element.innerHTML 获取元素内容时候,innerText 会去掉空格及换行，而innerHTML会保留 设置元素内容时，innerText不识别标签(比如：div、span...
原生JS与JQ获取元素的区别详解
10-15
在JavaScript (JS) 和 jQuery (JQ) 中获取页面元素是两种不同的方法，它们各有特点，适应不同场景。本文将详细解析这两种方式的区别。 一、原生JavaScript获取元素 1. **通过元素ID获取**： 使用`document....
JQ选择器_选择同类元素的第N个子元素的实现方法
09-01
在jQuery（JQ）中，选择器是一种强大的工具，用于高效地定位DOM（文档对象模型）中的特定元素。本文将详细介绍如何使用jQuery选择器来选取同类元素中的第N个子元素，并通过一个实例来演示其具体实现方法。 首先，...
通过实例解析jQ Ajax操作相关原理
10-14
- 单纯加载URL内容到指定元素：`$('#new-projects').load('./index.html')` - 带有查询参数的加载：`$('#new-projects').load('./index.html', {"name": '张三', "age": 12})` - 加载完成后的回调函数：`$('#new-...
jquery 操作日期、星期、元素的追加的实现代码
01-19
代码如下: [removed] $(document).ready(function(){ function show(){ var mydate=new Date(); var str = “” + mydate.getFullYear() + “年”; str += (mydate.getMonth() + 1) + “月”; str += mydate.getDate...
JQuery操作DOM元素
08-01
该文档包含了样式操作，内容及Value属性值操作，节点操作，节点属性操作，节点遍历操作的基础知识，也许不够详细，但内容也应该足够平时操作了，希望能帮到大家
jquery 获取元素内容
杨十八的博客
09-13 1957
获取元素内容 元素内容 元素文本值 元素值 html() text() val() 获取元素内容 <div id="">1111</div> console.log($('div').html()) //结果为 <span>1111</span> // 与原生JS innerHtml类似 获取元素文本内容 <div id="">1111</div> console.log($('div').html()) //
jQuery元素操作
sinat_39119933的博客
10-21 532
用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index="1"语法描述语法获取属性语法attr("属性”） //类似原生getAttribute()设置属性语法attr("属性","属性值“）//类似原生setAttribute()注意：attr()除了普通属性操作，更适合操作自定义属性，（该方法也可以获取H5 自定义属性）3.3数据缓存 date()date()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除描述语法。
JQuery设置元素属性和内容
零怀念的博客
08-27 1万+
普通属性 1.设置属性： 设置单个属性：$(选择器).attr("属性名","属性值") 设置多个属性：$(选择器).attr({属性名:"属性值",属性名:"属性值"…})  这里的属性名可加引号也可不加引号 2.获取属性： $(选择器).attr("属性名") 3.删除属性： $(选择器).removeAttr("属性名") 示例： &lt;!DOCTYPE ht
Javascript知识【jQuery：操作内容】
若有所执，必有所成，心之所向，必显光芒
08-12 1113
讲述：jQuery操作内容包含：value值操作，内容体操作，巩固一下案例倒计时，内容体追加
Jquery查找元素的方法汇总
热门推荐
shuncheng_hu的博客
12-15 1万+
Jquery查找元素的方法汇总 通过具体的class，id,标签查找 $('div') // 所有div元素 $('.item') // class为item的元素 $('#main') // id为main的元素 $('#main span, .item') // id为main内的span 或 class为item的元素 $('*') // 文档中所有元素
JQ操作元素的方法 - js篇
阿莹yes的博客
08-03 630
目录获取元素节点添加元素appendChild()append()prepend()appendTo()prependTo()操作同级节点before()after()insertBefore()insertAfter()删除元素removeChid()remove( [selector] )remove()empty()复制节点clone()替换节点$(selector).replaceWith(content)$(content).replaceAll(selector)包裹节点wrap()wrapAl
jq swiper(各种轮播图样式)
weixin_43294560的博客
12-13 3203
具体样式教程查看地址swiper 各种样式引用地址各种样式 引入swiper.min.css文件 swiper.jquery.min.js 文件 步骤：安装教程引入框架，然后再根据样式地址中的样式可以添加其他样式 添加的其他样式写在js代码域里，方式为参数名:‘样式名’ 代码示例: <!DOCTYPE html> <html> <head> &l...
jq 通过 属性获取元素
最新发布
05-09
jQuery 是一种非常常见的 JavaScript ...总之，JQ 通过属性获取元素的能力大大提高了页面开发的效率，能够更加方便地完成 HTML 页面元素的选择和操作，同时也方便了前端开发人员和网站设计师进行页面的布局和样式设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值