jQuery操作元素内容

最新推荐文章于 2024-09-07 21:46:41 发布
最新推荐文章于 2024-09-07 21:46:41 发布
阅读量497 收藏
点赞数
分类专栏： javaweb学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43386754/article/details/86413176
版权
  • 之前发现val()函数可以取得元素内容,但是是加上jQuery之中,也可以利用val设置元素内容
  • 示例设置元素value
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
		function fun(){
			//取得id为"name"的元素中的内容,并设置元素内容
			var str = $(uname).val("你好世界");
			
		}
	</script>
</head>
<body>
	请输入:<input type="text" id="uname" name="uname" />
	<input type="button" id="but" name="but" onclick="fun()" value="设置内容"/>
</body>
</html>
  • 运行结果

在这里插入图片描述

  • 自整个jQuery的设计之中,充分考虑到便捷的操作形式
  • val()函数时进行元素内容设置获取的,但是如果要对元素中的内容进行设置,则也可以使用text()或者html()
  • 所谓的元素内容实际上在讲解HTML的时候也强调过,在最早的IE中出现过自己的标准"元素,innerHTML",后来这个标准被保留下来了,但是很多认识也觉得这次操作不标准,所以在jQuery里面针对于元素内容的设置提供了新的支持.
  • 示例:设置元素文本内容
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
		function fun(){
			//取得id为"name"的元素中的内容,并设置元素内容
			$(mydiv).text("mydiv的文本内容");
			
		}
	</script>
</head>
<body>
	<div id="mydiv"></div>
	<input type="button" id="but" name="but" onclick="fun()" value="设置内容"/>
</body>
</html>
  • 运行结果

在这里插入图片描述

  • 此时的程序使用的是text()函数完成的,但是这个函数只能够设置文本,无法设置HTML元素内容.

  • 错误使用

	<script type="text/javascript">
		function fun(){
			//错误设置元素内容
			$(mydiv).text("<h1>想要设置元素中的h1内容</h1>");
			
		}
	</script>
  • 运行结果

在这里插入图片描述

  • 如果使用text()函数设置元素内容,元素的只会被认为是普通的文本,只有将这戏标签进行转以后才可以进行显示,当然如果希望可以暴力显示西欧爱过,就尅使用html()函数处理
  • 示例:使用html()函数进行处理
<script type="text/javascript">
		function fun(){
			//错误设置元素内容
			$(mydiv).html("<h1>想要设置元素中的h1内容</h1>");
			
		}
	</script>
  • 显示效果

在这里插入图片描述

  • 实际上这两个处理函数就属于加强版的innerHTML操作…实际上所有的dom操作,如果要想简化处理,就是用innerHTML完成.
{[("青椒盖饭")]}
关注
专栏目录
jQuery中的元素操作
qq_49956121的博客
09-21 834
一、元素内容操作 元素内容操作是jQuery对元素文本的DOM 操作。 1、html()获取HTML中的内容 2、html(“val”)设置HTML中的内容 3、text()获取文本 注意：结果是由所有匹配元素包含的文本内容组合起来的文本。 4、text(“text”)设置文本 注意：之前存在的值全部清除，只保留修改的值，设置所有匹配元素文本。 5、val()获取元素值 6、val(“value”)设置元素值 注意：之前存在的值全部清除，只保留修改的值，设置所有匹配元素文本。 二、元素属性操作 元素属
jQuery资料之遍历元素
宅羽的博客
12-16 228
◆ 遍历元素： jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 方法一： $('div').each(function (index, domEle) { xxx, } ) each方法遍历匹配每个元素，主要用DOM处理。 里面的回调函数有2个参数：index为每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象 所以...
jQuery操作元素的内容
aqzengkuasheng的博客
02-17 206
html()和text()是针对非表单元素来用的，val是针对表单元素来用的。以后常用的是html()和val() <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 操作元素的内容 html() 获取元素的内容，包含html标签（非表单.
jQuery（二）修改元素、查找元素_jquery修改元素内容
最新发布
2401_86372578的博客
09-07 440
和 DOM 相同，可修改元素的 内容、属性、样式 ，仍然注意凡是和修改有关的函数，都一个函数两用。
jQuery对元素内容操作
iteye_5722的博客
04-02 299
jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。 元素的内容是指定义元素的起始标记和结束标记中间的内容，又可分为文本内容和HTML内容。 那么什么是元素的文本内容和HTML内容？通过下面这段来说明。 &lt;div&gt;       &lt;p&gt;测试内容&lt;/p&gt;...
jquery的元素操作
lff18277233091的博客
01-27 203
jQuery 元素操作 - 创建一个元素 var div = $('<div></div>') - 内部插入元素 // 向 div 元素中插入一个 p 元素，放在最后 $('div').append($('<p></p>')) // 把 p 元素插入到 div 中去，放在最后 $('<p>hello</p...
jQuery操作元素的内容和样式完整实例分析
10-15
总结来说，jQuery为操作元素内容和样式提供了丰富的方法，使得开发者可以以非常简洁的语法来完成复杂的任务。通过上述实例的分析，我们可以看到，无论是操作HTML内容、纯文本内容还是CSS样式，jQuery都能提供方便...
jQuery操作元素追加内容示例
11-29
《jQuery操作元素追加内容详解》 在网页开发中，jQuery库提供了丰富的API来操作DOM元素，其中就包括对元素内容的追加操作。本文将深入讲解如何使用jQuery实现元素内容的追加，并通过实例演示各种追加方法的用法。 ...
jQuery Dom元素操作技巧
12-29
jquery 获取父节点，兄弟节点，在节点内插入内容。 ①$(#test1).parent() // 父节点 ②$(#test1).next() //下一个节点 ③$(#test1).append('<div class=error_info><span class=Validform_checktip></span></
jQuery-元素操作
wsssq_的博客
03-11 596
遍历、创建、添加、删除元素操作
jQuery元素操作
sinat_39119933的博客
10-21 580
用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index="1"语法描述语法获取属性语法attr("属性”） //类似原生getAttribute()设置属性语法attr("属性","属性值“）//类似原生setAttribute()注意：attr()除了普通属性操作，更适合操作自定义属性，（该方法也可以获取H5 自定义属性）3.3数据缓存 date()date()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除描述语法。
jQuery操作元素
DAYDAYUP
05-20 344
jQuery操作元素常用 获取内容 (“#test”).text();(“#test”).text();(“#test”).text(); (“#test”).html(); $(“#test”).val() 获取属性 $(“#test”).attr(“href”) 设置或者修改属性 (“#XXX”).attr(“disabled”,”disabled”);(“#XXX”).att...
JQuery操作元素
Lucky1019的博客
12-01 243
1、元素固有属性-prop(例如:href、type等) 获取属性: prop('属性') 设置属性: prop('属性','属性值') 注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。 2、元素自定义属性值-attr 用户自己给元素添加的属性，称为自定义属性。获取属性: attr('属性') //类似js中的getAttribute() 设置属性: attr('属性','属性
jq 操作元素内容
weixin_43294560的博客
11-12 298
操作元素内容 **返回元素的所有内容，包括子标签** 对象数组.html(); function t1() { var showdiv=$("#showdiv"); alert(showdiv.html()); } **返回元素的内容，不包括子标签** 对象数组.text(); function t4() { var ...
jQuery的元素操作
2402_84658588的博客
08-15 1135
用户自己给元素添加的属性，我们称为自定义属性比如给div添加 index="1"。//获取属性语法attr('属性') //类似原生 getAttribute()//设置属性语法attr('属性','属性值') //类似原生 setAttribute()
jquery之操作元素
爱前端的程序媛的博客
04-12 211
前面学习了jQuery选择器以及jQuery动态效果的方法，今天来学习jQuery操作元素的一些知识，主要包括三个内容：属性操作、内容文本值操作以及元素的增删改查和遍历的操作。 同样是学习一些方法的使用。 属性操作 固有属性 prop() 方法 —— 获取属性值prop(“属性名”)； 更改属性值prop(“ 属性名 ”," 值") 自定义属性 attr() 方法 ——获...
jQuery之操作元素
weixin_63040021的博客
06-09 137
操作元素的属性属性的分类：固有属性：元素本身就有的属性（id、name、class、style）返回值是boolean的属性：checked、selected、disabled自定义属性：用户自己定义的属性attr()和prop()的区别：如果是固有属性，attr()和prop()方法均可操作如果是自定义属性，attr()可操作，prop()不可操作如果是返回值是boolean类型的属性若设置了属性，attr()返回具体的值，prop()返回true；
jQuery 元素操作
weixin_46077178的博客
05-17 440
jQuery 元素操作 jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。 1、遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 语法1 $('div').each(function (index, domEle) { xxx; }) 注释 1.each() 方法遍历匹配的每一个元素，主要用DOM处理，each每一个 2.里面的回调函数有2个参数：index是每个元素的索引号，可以修改索引号名称，
JQuery表单元素取值赋值操作详解
"这篇文档是关于JQuery中对表单元素进行取值和赋值的总结，主要包括普通文本框、单选按钮的操作方法，并通过示例代码进行了详细讲解，适用于学习JQuery操作表单的初学者参考。" 在网页开发中，jQuery是一个强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值