jQuery 拥有可操作 HTML 元素和属性的强大方法。


jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

DOM = Document Object Model(文档对象模型)

DOM 定义访问 HTML 和 XML 文档的标准:

"W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。"


获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容

  • html() - 设置或返回所选元素的内容(包括 HTML 标记)

  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:

实例

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

尝试一下 »

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:

实例

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

尝试一下 »


获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值:

实例

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

尝试一下 »

jQuery 捕获的更多相关文章

  1. JQuery:JQuery捕获HTML

    JQuery:捕获HTML1.jQuery - 获取内容和属性介绍: jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuer ...

  2. jQuery捕获

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

  3. jQuery捕获-获取DOM元素内容和属性

    一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...

  4. 使用JS或jQuery模拟鼠标点击a标签事件

    <a id="alink" href="abc.aspx"  style="visibility: hidden;">下一步&l ...

  5. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  6. JQuery 方法合集(懒人备记)

    原创文章,转载请私信.谢谢~ PS:请将jquery的引用文件放在head的标签内 语法:$(selector).action() $(document).ready(function(){ // 开 ...

  7. jquery模拟点击A标签的问题

    我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久. 先看下边的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <htm ...

  8. jquery基础研究学习【HTML】

    jQuery HTMLjQuery 捕获jQuery 设置jQuery 添加元素jQuery 删除元素jQuery CSS 类jQuery css() 方法jQuery 尺寸 笔记:

  9. javaScript 笔记(6) --- jQuery(下)

    目录 --- jQuery HTML --- jQuery 遍历 --- jQuery Ajax jQuery HTML: jQuery 捕获:三个简单实用的用于 DOM 操作的 jQuery 方法: ...

随机推荐

  1. tar磁带归档

    一:压缩.解压 1.compress/uncompress/zcat -d:解压 -c:输出到终端,不删除原文件 -v:显示详细信息 2.gzip/ungzip/zcat -d:解压 -c:将压缩或解 ...

  2. markdown常用语法简记

    一级标题 二级标题 三级标题 ..... 无序列表 First Second Third 有序列表 第一条 第二条 第三条 链接 我的github主页 锚点 无序列表 代码块 var vm = new ...

  3. hue上配置HA的hdfs文件(注意,HA集群必须这样来配置才能访问hdfs文件系统)

    按照正常方式配置,发现无论如何也访问不了hdfs文件系统,因为我们是HA的集群,所以不能按照如下配置 将其改为 除此之外,还需要配置hdfs文件的 接着要去hadoop的目录下启动httpfs.sh ...

  4. laravel Passport - 创建 REST API 用户认证以及Dingo/Api v2.0+Passport实现api认证

    第一部分: 安装passport 使⽤ Composer 依赖包管理器安装 Passport : composer require laravel/passport 接下来,将 Passport 的服 ...

  5. springaop——AspectJ不可不知的细节

    springaop简介 springaop是spring对AOP技术的具体实现,它是spring框架的核心技术.springaop底层使用JDK动态代理或CGLIB动态代理技术实现. 应用场景: 在多 ...

  6. js判断网络连通性

    js判断网络连通性 if (window.navigator.onLine == true) {                         console.log("首次 -- 已连接 ...

  7. ubuntu安装 tar.gz格式程序

    tar.gz(bz或bz2等) 一.安装1.打开一个SHELL,即终端2.用cd 命令进入源代码压缩包所在的目录3.根据压缩包类型解压缩文件(*代表压缩包名称)tar -zxvf ****.tar.g ...

  8. [LeetCode] Maximum Binary Tree 最大二叉树

    Given an integer array with no duplicates. A maximum tree building on this array is defined as follo ...

  9. JavaScript数组操作总结

    以前特别相信自己的大脑,后来,再也不相信了!大脑是虚无的,重要的东西一定要让它有一个物质的具体的副本.事无巨细! 1.创建数组: new Array(); new Array(size); new A ...

  10. ●BZOJ 2154 Crash的数字表格

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2154 题解: 莫比乌斯反演. 题意还是很清楚的,就不赘述了. 显然有 $ANS=\sum_{ ...