jQuery中html()、text()和val()的区别、jQuery中attr()和prop()的区别

jQuery中html()、text()、val()的区别

html():向匹配的元素中添加html标记。比如<a/>、<p/>等html标签。添加的元素将覆盖原有的元素内容。

text():向匹配的元素中添加文本。如果文本包含html标签将会以文本的形式输出。添加的文本将会覆盖原有的元素内容。

val():设置或者获取DOM元素的value属性值。比如:获取input元素的value值，代码如下：

<input type="text" id="input_name_id" value="我的名字"></input>
$("#input_name_id").val(); //=>我的名字

jQuery中attr()、prop()的区别

attr()和prop()的功能都是一样的。获取匹配的元素集合中的第一个元素属性的值或设置匹配的元素集合中的每一个元素属性的值。它们的区别在于attr()用于自定义属性，prop用于固有属性。例如

<a href="abc.html" target="abc_id" class="but" myAction="delete">删除</a>

上面的a标签中href、target、class是DOM元素内置的属性，我们称之为固有属性。myAction是我们为了表达更多的信息，给a标签自定义的属性，称为自定义属性。

//获取自定义属性和固有属性的值
$("a.but").attr("myAction");//=>delete
$("a.but").prop("href");//=>acb.html

//设置自定义属性和固有属性的值
$("a.but").attr({"myAction":"del"});
$("a.but").prop({"href":"www.baidu.com"});

prop()最常见的用法就是选中所有复选框、取消选中所有复选框、反选。代码如下：

$("input[name=myTestCheckbox]").prop({checked:true});
$("input[name=myTestCheckbox]").prop({checked:false});
$("input[name=myTestCheckbox]").prop({"checked":function(i, value){
  return !value;
}})

在获取选中的复选框时使用prop("checked")就不灵了，因为prop("checked")只能获取匹配的元素集合中第一个元素的checked属性，无法获取每个选中元素。使用如下方法可以获取每个选中的复选框的value值。

$("input[name=zjlx]:checked").each(function(i, el){
  console.log("被选中复选框的value:",$(el).val());
});