JQuery中一些经常使用方法的比较

　　因为实习工做中基本用的都是JQuery的内容，在实际操做过程当中常常遇到相似方法的选择，在这简单地对方法进行比较。

一、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代码：

1 <div id="container">
2   <p>这是一段代码<a>这是嵌入p中的a文本</a></p>
3 </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”选择器来获取值。

 二、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