jquery元素内容: html(),text(),val()-js教程-PHP中文网

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

无忌哥哥

发布： 2018-06-29 14:09:04

原创

1520 人浏览过

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属性

获取单标签中的文本,会自动将子元素标签

过滤掉,仅留下文本部分

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)

登录后复制

以上是jquery元素内容: html(),text(),val()的详细内容。更多信息请关注PHP中文网其他相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

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