js中.val()和.html()和attr()和text()的区别

1. val()

定义和用法:
val() 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。其中有部分元素没有value,该方法大多用于 input 元素。

如果该方法未设置参数,则返回被选元素的当前值。

1.1获取元素中的值:

$("#name").val()     //获取id="name"的value值

1.2赋予元素值:

$("#name").val(value)  //value表示你赋予的值

2. .HTML()

定义和用法:
html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数,则返回被选元素的当前内容。

2.1当使用该方法返回一个值时,它会返回第一个匹配元素的内容。

$("#name").html() //获取第一个id=name的内容

2.2当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。

$("#name").html("需要赋予的值") 

3. attr():

定义和用法
attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数,其工作方式也有所差异。

3.1返回被选元素的属性值。

$("name").attr("你所要赋予的值");

3.2设置被选元素的属性和值。

$("name").attr(attribute,value)

区别:
1.val()—一般 用在input上,val主要运用于表单元素上,而不用在其他元素,用来获取input或者是select的值(但我用val给select赋值时无法显示,不知道为什么)
2.html()和text()、attr()可用在多种元素上,但是html()相当于依据源代码返回,也就是在返回的内容中会包含各种tag,而text()则相当于是依据页面显示返回,返回的内容是出去各种tag之间的内容

补充.text():

text 属性可设置或返回选项的文本值
定义和用法:

var text1 = $(“div”).text(); //text中可设置参数文本
var text2 = $(“div”).text('w');
console.log(text1);
console.log(text2);

推荐阅读更多精彩内容