JQuery中一些常用方法的比较

　　由于实习工作中基本用的都是JQuery的内容，在实际操作过程中经常遇到类似方法的选择，在这简单地对方法进行比较。

1、JQuery中html()、text()和val()的区别

　　简单的说，html()是指读取和修改一个元素的html内容(Get the HTML contents of the first element in the set of matched elements.)，

　　　　　　　text()是指读取和修改一个元素的文本内容(Get the combined text contents of each element in the set of matched elements, including their descendants.)，

　　　　　　　val()是指读取和修改一个元素的value字段的值(Get the current value of the first element in the set of matched elements.)。

　　对于这三个方法都有无参和有参的两种形式，两者的效果很明显，无参的是读取元素的内容，而有参的是设置修改元素的内容，但是值得注意的是，对于html()方法，无参即读取内容的时候是返回匹配到的第一个元素的内容，而有参即修改内容时是修改匹配到的所有元素的内容。

　　以上是有参和无参的区别，接下来是三者之间的区别，这里逐个分析。

　　1) html() 

　　无参时读取元素的html内容，这里的html内容是指，包括元素内部的html元素和文本元素，这里内部的html元素包括尖括号(<>)所表示的html标签。要注意如果目标元素多于一个时，只会返回匹配到的第一个元素的html内容。

　　有参时修改元素的html内容，亦即将匹配到的元素下的html内容更改成方法里的参数，原本的html内容会被覆盖，与无参时读取内容不同的是，修改内容的作用对象是每一个匹配到的元素。

　　2) text()

　　无参时读取元素的纯文本内容，这里纯文本的意思是，忽略掉元素内部的非文本的html元素，也就是尖括号(<>)表示的html标签会被忽略。但是与html()方法无参时不同，此时读取到的是每一个匹配到的元素的文本内容。

　　有参时修改元素的纯文本内容，将匹配到的元素中的所有内容，包括html内容，覆盖成text()方法中的参数，也就是说，匹配到的元素下的内容被修改成一段文本。

　　html代码：

<div id="container">
  <p>这是一段代码<a>这是嵌入p中的a文本</a></p>
</div>

　　js代码：

<script>
  console.log($("#container p").html());  //这是一段代码<a>这是嵌入p中的a文本</a>
  console.log($("#container p").text());  //这是一段代码这是嵌入p中的a文本
</script>

<script>
  $("#container p").html(“<p>这是修改过的内容</p>”);  //这是一段代码<a>这是嵌入p中的a文本</a>
  console.log($("#container p").html());  //<p>这是修改过的内容</p>
  $("#container p").text(“<p>这是修改过的内容</p>”); //这是一段代码这是嵌入p中的a文本
  console.log($("#container p").html());  //&lt;p&gt;这是修改过的内容&lt;/p&gt;
</script>

　　从这两段代码可以就看出html()和text()在有参和无参的区别。

　　3) val()

　　val()方法是常用于获取表单元素的内容，主要需要注意的有以下几点：

　　　　val()方法无参时与html()相同，返回第一个匹配到的元素的值。

　　　　对于“<select multiple="multiple">”元素，val()方法返回一个包含每个选中的option的数组；

　　　　对于下拉选择框<select></select>和复选框input[type="checkbox"]、单选框input[type="radio"]，使用“:selected”和“:checked”选择器来获取值。

 2、attr()和prop()的区别

　　attr和prop其实就是attribute和property的缩写，为了区别可以分别称为属性和特性，使用的方法其实很简单，这里不做介绍。重点在于两者的区别以及使用的场景。

　　1）首先两者的使用方法不同，看以下代码：

node.className = 'active';
node.setAttribute('class', 'active');

　　可以看出attr在原生的javascript是以getAttribute()和setAttribute()操作，而prop()是通过“.”来调用。

　　2）对于值是true/false的属性，类似于input的checked等，attribute取得值是HTML文档字面量值，property是取得计算结果，property改变并不影响attribute字面量，但attribute改变会影响property的值。

　　根据这一点，对于一些类似于路径的属性，attribut返回的是字面量，而propert返回的是计算后的结果，亦即完整的路径。

　　3）使用的场合

　　先看一下官方文档的建议：

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. 

　　对于有true和false两个值的属性，例如checked、selected等，使用prop()进行调用，除此之外的则使用attr()方法来调用。

　　这也是下面这张流传广泛的图片所说的：

 

内容参考：

jQuery的attr与prop：http://aijuans.iteye.com/blog/1954744