细谈 jQuery 的 text()、html()、val()、data()

作者:vkvi 来源:ITPOW(原创) 日期:2017-2-24

本文重点以取值来讲。

作用元素

遇到多个元素的情况

比如一页有多个 div,使用 $("div") 就是这里说的遇到多个元素的情况。

  • text() 将所有元素的 text() 连接起来,然后返回连接后的值。
  • html() 返回第一个元素的 html()。(若是赋值则是对多个元素)
  • val() 返回第一个元素的 val()。(若是赋值则是对多个元素)
  • data() 返回第一个元素的 data()。

text() 与 html() 的区别

  • text() 会去除内部的 HTML 标签。
  • html() 会原样返回内部的 HTML 标签。

先用示例验证一下上面的说法

单独说说 select() 的 val()

  • 如果是多选,返回的是数组,为第一个元素各个选择项的 value 值,如果没有选择,则是空项数组。
  • 如果是单选,返回的是字符串,当然,是经 jQuery 包装过的字符串。

使用 val() 来选择 select 的项时(赋值时):

  • 不论是多选还是单选:参数都可以使用数组,也可以使用字符串,值为要选择的 option 的 value 值;对于单选,如果参数是数组,则只有数组的第一项有用。

捣蛋情况:

  • 单选 select 的 size > 1,又没有为 option 指定 selected,则 val() 返回 null。
  • 单选 select,利用 JS 将其 selectedIndex 设为 -1,则 val() 返回 null。
  • 单选 select,没有 option,则 value() 返回 null。

请继续阅读关于 SELECT 的 multiple 和 selectedIndex 值

<input type="checkbox" 的 val()

返回的并不是 true、false,而是其 value 值。

  • 对 select 是返回选中项的 value 值。
  • 对 checkbox 是返回其 value 值(不论其中否选中)。

所以说 jQuery 对 checkbox 跟对待 hidden 是一样的。

相关文章