地址

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值

一、text()  html()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    alert("Text: " + $("#test").text());

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());

  });

});

</script>

</head>

<body>

<p id="test">这是段落中的 <b>粗体</b> 文本。</p>

<button id="btn1">显示文本</button>

<button id="btn2">显示 HTML</button>

</body>

</html>

二、val()

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("值为: " + $("#test").val());

  });

});

</script>

</head>

<body>

<p>名称: <input type="text" id="test" value="菜鸟教程"></p>

<button>显示值</button>

</body>

</html>

val（）也可以获得文本输入域 <textarea>的输入内容：

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("值为: " + $("#test").val());

  });

});

</script>

</head>

<body>

<textarea id="test"></textarea>

<button>显示值</button>

</body>

</html>

三、获取属性 attr()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#runoob").attr("href"));

  });

});

</script>

</head>

<body>

<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>

<button>显示 href 属性的值</button>

</body>

</html>

prop()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是 undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

jQuery 获得内容的更多相关文章

  1. jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()

    jQuery - 设置内容和属性  设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...

  2. jQuery div内容间隔1秒动态向上滚动HTML、JS代码

    demo1: <!DOCTYPE html> <html> <head> <title>div内容间隔1秒动态滚动</title> < ...

  3. jQuery - 设置内容和属性

    设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...

  4. <七> jQuery 设置内容和属性

    设置内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 设置属性 jQuery attr( ...

  5. <六> jQuery 获得内容和属性

    获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - ...

  6. jQuery - 获取内容和属性

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...

  7. Jquery 概念性内容编辑器

      概念性jQuery内容编辑器,这是一款非常有特色的jQuery编辑器,该编辑器支持文字.列表.视频.引用等功能,是一款小巧简洁,富有个性化的jQuery内容编辑器插件. 代码: <!doct ...

  8. 黑马day16 jquery&amp;内容过滤选择器&amp;可见度选择器

    内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')")    返回值  集 ...

  9. jquery获取内容和属性的方法

    通过jquery如何捕获文本内容和属性? text(),html(),val()及attr(). attr()更具有普遍性,元素text属性和表单value属性,可以通过attr()操作. <! ...

  10. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 使用GitHub（三）：使用VSCode+GitHub进行版本控制

    使用GitHub(三):使用VSCode+GitHub进行版本控制 本文简单介绍使用VSCode+GitHub进行项目或者代码的版本控制.本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和 ...

  2. 使用nfs制作动态分配存储卷

    参考文献:https://yq.aliyun.com/articles/613036 相对于静态存储, 动态存储的优势: ● 管理员无需预先创建大量的PV作为存储资源; ● 静态存储需要用户申请PVC ...

  3. vue-router嵌套路由，二级路由。

    如果全是用一级路由时,路由管理就变得很臃肿,有点乱,路由有父子关系的话,嵌套路由会更好.嵌套也就是路由中的路由的意思,组件中可以有自己的路由导航和路由容器(router-link.router-vie ...

  4. QT Creator 添加Lib库

    LIBS += -LD:/Path/ -lTest1.lib -lTest2.lib 解析:在路径D:/Path/ 下 添加Test1.lib Test2.lib库 -L 和小写'-l"没有 ...

  5. jQuery_页面加载问题

    运行如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. Scrapy学习(二)、安装及项目结构

    一.安装 1.安装pywin32,下载地址:https://sourceforge.net/projects/pywin32/files/pywin32/ 我选择的是Build 221,点进去,根据自 ...

  7. CF1213F Unstable String Sort

    题目链接 问题分析 题目实际上是一堆大于等于的约束.观察这\(2n-2\)个约束.第一组可以将要求的排成一个不降的序列,然后第二组就是在第一组的基础上再添加条件. 不妨设第一组生成的不降序列是\(\{ ...

  8. 大哥带的XSS练习LEVE2

    0X01输出在html标签中的XSS 这里相当于我们把XSS代码插入到了 html中的<td>标签中 其他好看的 但是不是同源访问 <script> var body= doc ...

  9. [CSP-S模拟测试]:真相（模拟）

    题目传送门(内部题106) 输入格式 第一行为一个正整数$T$,表示数据组数. 接下来$T$组数据,每组数据第一行一个正整数$n$表示$OIer$,接下来$n$行,第$i$行表示编号为$i$的人所说的 ...

  10. linux 下使用命令查看jvm信息

    java程序员除了编写业务代码之外,特别是项目上线之后,更需要关注的是系统的性能表现,这个时候就需要了解一下jvm的性能表现了,可以借助于java虚拟机自带的一些分析工具,主要有三个常用的命令. 1. ...