cari

Rumah >hujung hadapan web >tutorial js >jquery元素内容: html(),text(),val()

jquery元素内容: html(),text(),val()

无忌哥哥
无忌哥哥asal
2018-06-29 14:09:041544semak imbas

jquery元素内容: html(),text(),val()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素的内容: html(),text(),val()</title>
</head>
<body>
<div></div>
<form>
邮箱: <input type="text" name="email">
<button>提交</button>
</form>
</body>
</html>

html()与attr(),css()一样,根据参数不同,自带读取与设置功能

1.设置元素内容,可以包括任何内容:子元素或文本,与原生的innerHTML属性一样

创建文本节点

var res = $(&#39;div&#39;).html(&#39;jQuery真的好方便&#39;)

创建元素节点

var res = $(&#39;div&#39;).html(&#39;<h2>jQuery真的好方便</h2>&#39;)

获取元素内容

var res = $(&#39;div&#39;).html()

2.获取元素中的文本内容:类似于原生中的textContent属性

获取单标签中的文本,会自动将子元素标签c1a436a314ed609750bd7c7d319db4da过滤掉,仅留下文本部分

var res = $(&#39;div&#39;).text()

如果元素内容有多个子元素,这些子元素的文本会合并

var res = $(&#39;div&#39;).html(&#39;<h2>jQuery真的好方便</h2><p>大家要好好学</p>&#39;)

我们先用html()输出看一下

var res = &#39;html()输出:&#39;+$(&#39;div&#39;).html()

再用text()方法输出,将二种输出结果进行对比,注意控制台中的换行使用\n

res += &#39;\n&#39; + &#39;text()输出:&#39; + $(&#39;div&#39;).text()

text()如果有参数,就是设置操作

var res = $(&#39;div&#39;).text(&#39;祝愿大家早日成为一名合格的Web开发程序员&#39;)

3.获取或设置表单控件中的数据: val(),等价于原生中的表单元素的value属性

$(&#39;button&#39;).click(function(){

读取value属性的值

alert($(&#39;:text&#39;).val())

设置value属性的值

$(':text').val('zhu@php.cn')
alert($(&#39;:text&#39;).val())
})

控制台查看结果

console.log(res)

Atas ialah kandungan terperinci jquery元素内容: html(),text(),val(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery css html innerHTML
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：VUE中v-bind的用法介绍Artikel seterusnya：Vue多种方法实现表头和首列固定的方法

Artikel berkaitan

Lihat lagi