在Jquery中如何获取并设置Dom元素的值

云之遥_

已于 2023-04-08 17:38:14 修改

阅读量1.4k

点赞数

分类专栏：解决方案文章标签： jquery

于 2018-09-13 19:35:05 首次发布

本文链接：https://blog.csdn.net/weixin_41305441/article/details/82693535

版权

解决方案专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在Jquery中如何获取并设置Dom元素的值

jquery的强大之处在于对dom元素的操作，所谓的dom元素就是document object model（文本对象模型）。在对dom操作中主要包含

获取、设置dom元素的值和属性
动态的添加、删除dom元素
动态的设置dom的css样式
获取dom的尺寸等

一、获取设置dom的值

获取/设置dom值的方法有三种:

text() – 主要用于对普通文本的设置和获取
html() – 主要用于对html标记的设置和获取
val() – 主要用于对表单元素的设置和获取

使用示例

$('button').click(function(){
   alert("Text:"+$(".dom").text());
   alert("Html"+$(".dom).html()); 
})
$('button2').click(function(){
    alert("value="+$("#myIpt").val());
})

<body>
    <div class="dom">你好啊，<b>世界</b></div>
    <input id="myIpt" name="name" type="text"  value="jquery学习教程" />
</body>

输出结果:对比text和html的使用区别

    Text: 你好啊， 世界
    HTML: 你好啊， <b>世界</b>
    value:jquery学习教程

在设置元素值的时候只需要在函数参数中添加要赋值的内容即可

$('button').click(function(){
     $(".dom").text('hello,world');
     $(".dom2").html("hello,wolrd");
     $(".dom3").val("hello,world");
})

#####2、获取/设置dom属性
设置属性的方式主要有两种：

attr()
prop()

使用示例

<script>
  $('button').click(function() {
   $('.nav').attr("class");
   $('input').attr('name');
  });
 </script>
<body>
 <div class="demo">
  <span class="nav"></span>
  <input type="radio" name="ipt" value="hello">
 </div>
</body>

运行结果

nav
ipt

设置属性

$('button').click(function() {
   $(".nav").attr("id","nav_bar");
   $("input").prop("checked","checked")
  });
 // 设置多个属性的时候，属性以对象的形式添加
 $('button').click(function() {
   $(".nav").attr({
    'id':"name",
    'title':"hello",
    ......
   });
  });

敲黑板，重点说明：关于prop和attr的区别

attr()主要用来设置一些我们在开发过程中需要使用的自定义属性，
在获取属性时如果没有该属性，返回的值为undefine；
prop()主要用来设置元素本身就带有的固有属性
在获取属性时如果没有该属性，返回的值为 href class 是 a 标签自带的固有属性，在设置此类的属性的时候建议使用prop

//data属性是我们在开发过程中自主添加上去的，所以设置此类属性的时候建议使用attr

关于prop和attr在项目使用中遇到的问题

问题描述：通过js控制checkbox的选中状态，初次使用attr设置选中，设置无效

$("#transProtocol input:checkbox[value="+param+"]").attr('checked','true'); //设置无效

设置prop函数后，设置起效

$("#transProtocol input:checkbox[value="+param+"]").prop('checked','true');

云之遥_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
在Jquery中如何获取并设置Dom元素的值

jquery的强大之处在于对dom元素的操作，所谓的dom元素就是document object model（文本对象模型）。在对dom操作中主要包含获取、设置dom元素的值和属性动态的添加、删除dom元素动态的设置dom的css样式获取dom的尺寸等一、获取设置dom的值获取/设置dom值的方法有三种:text() – 主要用于对普通文本的设置和获取html() –...
复制链接

扫一扫