jquery：值的操作

最新推荐文章于 2021-03-21 07:57:49 发布
最新推荐文章于 2021-03-21 07:57:49 发布
阅读量640 收藏 1
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HUSHILIN001/article/details/81433090
版权

jquery中一些操作值的方法：

attr():操作某一个自定义属性值

text():操作文本值；

html():操作html；

val():操作值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<input data-value="1" value="这个是一个input的初始化文字"></input>
		<div>这个是一个div的初始文字</div>
		<button class="getattr">getattr</button><button class="setattr">setattr</button>
		<button class="gettext">gettext</button>
		<button class="settext">settext</button>
		<button class="setvalue">setvalue</button> <button class="getvalue">getvalue</button>
		<button class="gethtml"> gethtml</button>
		<button class="sethtml"> sethtml</button>

	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		//attr方法获取属性
		$("body").on("click", ".getattr", function() {
			console.log($("input").attr("data-value"));
		});
		//attr方法设置属性
		$("body").on("click", ".setattr", function() {
			$("input").attr("data-value", "3");
		});
		//text方法获取到文本值
		$("body").on("click", ".gettext", function() {
			console.log($("div").text());
		}); //text方法修改文本值
		$("body").on("click", ".settext", function() {
			$("div").text("这是使用text修改后的文本信息");
		});
		//val方法修改value
		$("body").on("click", ".setvalue", function() {
			$("input").val("这个是修改过后的value");
		}); //val方法获取value
		$("body").on("click", ".getvalue", function() {
			console.log($("input").val());
		}); //html方法获取html
		$("body").on("click", ".gethtml", function() {
			console.log($("div").html());
		}); //val方法设置html
		$("body").on("click", ".sethtml", function() {
			$("div").html("<span>这个是修改过后的html</span>");
		});
	</script>

</html>

js中的实现：

attr(set)：setAttribute();

attr(get)：getAttribute();

text(set):innerText="?";

text(get):innerText;

val(set):value="?";

val(get):value；

html(set):innerHtml="?";

html(get):innerHtml;

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<input data-value="1" value="这个是一个input的初始化文字"></input>
		<div>这个是一个div的初始文字</div>
		<button class="getattr">getattr</button><button class="setattr">setattr</button>
		<button class="gettext">gettext</button>
		<button class="settext">settext</button>
		<button class="setvalue">setvalue</button> <button class="getvalue">getvalue</button>
		<button class="gethtml"> gethtml</button>
		<button class="sethtml"> sethtml</button>

	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		//attr方法获取属性
		$("body").on("click", ".getattr", function() {
			//			console.log($("input").attr("data-value"));
			console.log(document.querySelector("input").getAttribute("data-value"));
		});
		//attr方法设置属性
		$("body").on("click", ".setattr", function() {
			//			$("input").attr("data-value", "3");
			document.querySelector("input").setAttribute("data-value", "2");
		});
		//text方法获取到文本值
		$("body").on("click", ".gettext", function() {
			//			console.log($("div").text());
			console.log(document.querySelector("div").innerText);
		}); //text方法修改文本值
		$("body").on("click", ".settext", function() {
			//			$("div").text("这是使用text修改后的文本信息");
			document.querySelector("div").innerText = "这是使用text修改后的文本信息";

		});
		//val方法修改value
		$("body").on("click", ".setvalue", function() {
			//			$("input").val("这个是修改过后的value");
			document.querySelector("input").value = "这个是修改过后的value";
		}); //val方法获取value
		$("body").on("click", ".getvalue", function() {
			//			console.log($("input").val());		
			console.log(document.querySelector("input").value);

		}); //html方法获取html
		$("body").on("click", ".gethtml", function() {
			//			console.log($("div").html());
			console.log(document.querySelector("div").innerHTML);

		}); //val方法设置html
		$("body").on("click", ".sethtml", function() {
			//			$("div").html("<span>这个是修改过后的html</span>");
			document.querySelector("div").innerHTML = "<span>这个是修改过后的html</span>";

		});
	</script>

</html>

 

mkmin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery:jQuery的
04-04
jQuery提供了丰富的API来操作DOM元素： - `.append()`：在每个匹配的元素内部追加内容。 - `.prepend()`：在每个匹配的元素内部前置内容。 - `.remove()`：移除匹配的元素。 - `.html()`：获取或设置元素的HTML内容...
jQuery 取值、赋值的基本方法整理
sinat_36042530的博客
09-17 816
/*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textval = $("#text_id").val(); /*获取单选按钮的值*/ var valradio = $("input[@type=radio][@checked]").val(); /*获取一组名为(items
jQuery（六）：value值操作
weixin_33970449的博客
10-01 243
val()可以获取或设置元素的value属性值。语法如下： 示例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,
jQuer对象的Gettter和Setter方法 -上篇
愤怒的菜鸟
10-10 160
jQuery的getter和setter概述 jQuery使用同一个方法来获取和设置 HTML属性 CSS样式 CSS类 HTML表单值 元素内容 位置高宽 元素数据 用作setter时， 会给jQuery对象中的每一个元素设置，方法接受对象参数或函数 函数是这样的 function(index,value/当前对应元素的属性值/){this是jQuery对象对应的元素} 用作g...
Jquery中.attr()和.data()的区别
qq_32506555的博客
09-04 274
本文和大家分享的主要是jquery中.attr()和.data()相关内容，一起来看看吧，希望对大家学习jquery有所帮助。 　　$.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别。 　　Jquery对象属性和DOM属性 　　一个简单的例子                      Jquery中.at
jquery和jquery ui取值/赋值问题
iteye_9657的博客
03-06 245
jquery取某个标签的值(例如取input textbox标签)的方法是： var v = $('#id').val(); 而easy ui取easyui-textbox的值得方法却是： var v = $('#id').textbox('getValue') 同样赋值也是有差别的 jquery的赋值方法是: $('#id').val('xxx'); easy ui的赋...
jQuery:jQuery 源码分析
06-19
3. **内容操作**：`html()`, `text()`, `val()` 分别用于获取或设置元素的 HTML 内容、纯文本内容和表单元素的值。 **三、事件处理** jQuery 提供了统一的事件处理方式，如 `on()`, `off()`, `trigger()`, `click...
jquery:jquery源码分析
03-23
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的 DOM 操作、事件处理和动画制作。本文将深入探讨 jQuery 的源码，帮助开发者理解其内部机制，从而更好地利用这个强大的工具。 ### 1. jQuery ...
jQuery操作DOM之获取表单控件的值
10-24
总结来说，jQuery的`.val()`方法是处理表单控件值的最佳选择，它简化了DOM操作，确保了在获取和设置值时的准确性和实时性。熟练掌握这一方法，将极大地提高jQuery编程的效率和代码的可读性。在开发过程中，结合使用`...
jQuery 表单验证插件 jQuery Validation Engine 使用
雷霄骅(leixiaohua1020)的专栏
10-10 297
  jQuery 表单验证插件 jQuery Validation Engine 使用方式如下： 1.引入头文件（注意一定要把jQuery放在前面），指定使用jQuery Validation Engine的&lt;form&gt;的ID：   &lt;script src="lib/jquery-1.8.3.min.js"&gt;&lt;/script&gt; &lt;!-- v...
jquery php实时搜索选择,jQuery实现条件搜索查询、实时取值及升降序排序的方法分析...
weixin_36198878的博客
03-21 203
本文实例讲述了jQuery实现条件搜索查询、实时取值及升降序排序的方法。分享给大家供大家参考，具体如下：一。鼠标点击获取搜索条件中的被选中的值创建方法 getAttrValue() 方法，每次的 .click 都要调用 function getAttrValue(){}例如，把选中的值给到属性 data-value 。只需要每次点击，获取 li.active 的子集 a 的 .attr("...
jquery JRangec插件动态设置选项 setValue
32个字符
11-28 4012
使用该插件准备工作 下载地址  https://github.com/nitinhayaran/jRange jquery.range.js jquery.js jquery.range.css 场景【需求】 开始时间必须 当用户点击开始时间29时应该退回原来的15 1  解决方案不做讨论  简单说下思路为   设置开始时间的可选范围  
getattr 获取属性方法的使用
Through Da Storm
07-04 2258
描述 getattr()函数用于返回一个对象属性值。 语法 getattr 语法： getattr(object, name[, default]) 参数 object -- 对象。 name -- 字符串，对象属性。 default -- 默认返回值，如果不提供该参数，在没有对应属性时，将触发 AttributeError。 返回值 返回对象属性值。 实例 以下实例展示...
hasattr() getattr() setattr() 函数使用详解
wode_124的博客
10-20 429
hasattr(object, name)函数： 判断一个对象里面是否有name属性或者name方法，返回bool值，有name属性(方法)返回True，否则返回 False。 注意：name 要使用引号括起来。 class function_demo(object): name = 'demo' def run(self): return "hello function" function...
使用jQuery操作input的value值
weixin_34252090的博客
08-25 1929
表单控件是jQuery的重中之重，因为一旦牵扯到数据交互，就离不开form表单的使用，比如用户的登录注册功能等。 在进行操作input的value值的时候，主要使用jQuery的val()方法。 点击查看val()的使用方法 看如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
jquery给input赋值 val()方法
热门推荐
Stephen__Wu的博客
06-08 8万+
jquery给input赋值,val的三种用法 val()方法 定义和用法 val() 方法返回或设置被选元素的值。 元素的值是通过 value 属性设置的。该方法大多用于 input 元素。 如果该方法未设置参数，则返回被选元素的当前值。 &amp;lt;input type=&quot;text&quot; class=&quot;input1&quot;&amp;gt; $('.input1').val('value567'); ...
JqueryEasyUi1.32组件combogrid的setValue方法有时候无法赋值及解决方法
weixin_33755554的博客
05-07 864
为什么80%的码农都做不了架构师？>>> ...
jquery easyui - 使用jquery给input赋值，取值
我的博客
12-14 3516
姓名：                 var val = $("#name").textbox('getValue')//取值 $("#name").textbox('setValue','外星人')//赋值

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值