jquery中dom设值及 prop与attr的区别.md

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
<a href="text.html" class="text"></a>
//data属性是我们在开发过程中自主添加上去的，所以设置此类属性的时候建议使用attr
<a href="text.html" class="text" data="object"></a>

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

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

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

设置prop函数后，设置起效

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

jquery中dom设值 及 prop与attr的区别.md

一、获取设置dom的值

2、获取/设置dom属性

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

猜你喜欢

jquery中dom设值及 prop与attr的区别.md