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

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()方法是常用于获取表单元素的内容，主要需要注意的有以下几点：

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

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