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

jQuery DOM 操作

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

jQuery 中非常重要的部分,就是操作 DOM 的能力,jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

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

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

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

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

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

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

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

获取属性 - attr()

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

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

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容:

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

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html():

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变(设置)链接中 href 属性的值:

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性:

attr() 的回调函数

jQuery 方法 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法:

jQuery html操作的更多相关文章

  1. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  2. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  3. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  4. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  5. jQuery HTML 操作

    jQuery 包含很多供改变和操作 HTML 的强大函数. 改变 HTML 内容 语法 $(selector).html(content) html() 函数改变所匹配的 HTML 元素的内容(inn ...

  6. Jquery DOM 操作列表

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...

  7. 转:jQuery 常见操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

  8. jQuery Ajax 操作函数及deferred对象

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...

  9. jQuery Ajax 操作函数

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...

  10. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

随机推荐

  1. android多个fragment返回键层层返回

    在FragmentActivity的fragment跳转的时候加入到执行栈. public void switchFrag(BaseFragment to) { getSupportFragmentM ...

  2. MySQL5.6 怎样优化慢查询的SQL语句 -- 慢日志介绍

    近期有个开发团队抱怨我们平台包括的mysql cluster不行,总是报mysql的"heartbeat Error".分析了他们收集的日志.没有发现mysql cluster节点 ...

  3. Linux Shell_test

    test: 测试Shell脚本里的条件,通过推出状态返回其结果.用法:    test [ expression ] 或 [ [ expression ] ]    注意空格test表达式:是则为真  ...

  4. ./configure && make && make install详解 (转)

    在Linux中利用源码包安装软件最重要的就是要仔细阅读安装包当中的README INSTALL两个说明文件,这两个文件会清楚的告诉你如何可以正确的完成这个软件的安装! 我们都知道源码包安装分为这么几个 ...

  5. [Sciter] Script与Native交互

    原帖地址:http://www.cnblogs.com/yinxufeng/p/5653920.html Script与Native交互基础简化方式Script调用NativeNative调用Scri ...

  6. Java对象的创建过程

    //TODO https://www.cnblogs.com/chenyangyao/p/5296807.html

  7. 行转列--Excel和数据库的完美结合

    入职到如今已经有一段时间了,除了不断完好新功能外,线上运维也是一项非常重要的任务,每天都须要占用一 定量的时间来处理,这时候如何高效准确的来解决这些问题是非常值得考虑的.       今天客服人员给我 ...

  8. apache配置访问限制

    1.禁止访问某些文件/目录 增加Files选项来控制,比如要不允许访问 .txt扩展名的文件,保护php类库: <Files ~ "\.txt$"> Order all ...

  9. Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate

    Silverlight实用示例 - DataGrid行详细信息的绑定DataGrid.RowDetailsTemplate 2012-12-28 21:04 来源:博客园 作者:chengxingli ...

  10. 深度学习 dns tunnel检测 使用统计特征 全连接网络——精度99.8%

    代码如下: import numpy as np import tflearn from tflearn.layers.core import dropout from tflearn.layers. ...