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

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

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

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

实例

  1. $("#btn1").click(function(){
  2. alert("Text: " + $("#test").text());
  3. });
  4. $("#btn2").click(function(){
  5. alert("HTML: " + $("#test").html());
  6. });

亲自试一试

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

实例

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

亲自试一试

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

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

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

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:

实例

  1. $("#btn1").click(function(){
  2. $("#test1").text("Hello world!");
  3. });
  4. $("#btn2").click(function(){
  5. $("#test2").html("<b>Hello world!</b>");
  6. });
  7. $("#btn3").click(function(){
  8. $("#test3").val("Dolly Duck");
  9. });

亲自试一试

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

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

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

实例

  1. $("#btn1").click(function(){
  2. $("#test1").text(function(i,origText){
  3. return "Old text: " + origText + " New text: Hello world!
  4. (index: " + i + ")";
  5. });
  6. });
  7.  
  8. $("#btn2").click(function(){
  9. $("#test2").html(function(i,origText){
  10. return "Old html: " + origText + " New html: Hello <b>world!</b>
  11. (index: " + i + ")";
  12. });
  13. });

亲自试一试

设置属性 - attr()

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

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

实例

  1. $("button").click(function(){
  2. $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
  3. });

亲自试一试

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

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

实例

  1. $("button").click(function(){
  2. $("#w3s").attr({
  3. "href" : "http://www.w3school.com.cn/jquery",
  4. "title" : "W3School jQuery Tutorial"
  5. });
  6. });

亲自试一试

attr() 的回调函数

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

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

实例

  1. $("button").click(function(){
  2. $("#w3s").attr("href", function(i,origValue){
  3. return origValue + "/jquery";
  4. });
  5. });

亲自试一试

jQuery HTML 参考手册

如需有关 jQuery HTML 方法的完整内容,请访问以下参考手册:

jQuery - 获取/设置内容和属性的更多相关文章

  1. jquery获取(设置)节点的属性与属性值

    1. attr(属性名)        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2 ...

  2. JavaScript(19)jQuery HTML 获取和设置内容和属性

    jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 D ...

  3. JQUERY操作html--获取和设置内容、属性、回调函数

    一:jQuery - 获取内容和属性 1.获得内容 - text().html() 以及 val() text() - 返回所选元素的文本内容 html() - 返回所选元素的内容(包括 HTML 标 ...

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

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

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

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

  6. jquery 获取设置值、添加元素详解

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

  7. jquery】常用的jquery获取表单对象的属性与值

    [jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...

  8. 转载JQuery 获取设置值,添加元素详解

    转载原地址 http://www.cnblogs.com/0201zcr/p/4782476.html jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操 ...

  9. jquery获取当前选项的属性值a

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

随机推荐

  1. Ext如何Gird中如何显示时间类型的列?

         rt,后台bean中的字段属性是Date类型,前台的model中的字段属性也设置为date类型,但是还是显示不出来,如何解决呢? 直接代码: grid中的COLUMN: Model中的定义:

  2. 篇三、开发前知识补充:Android的长度单位和屏幕分辨率,这个也是转载~~

    这篇文章有点早,不过很实用.单位的实用看最后的红色标注的部分. 屏幕分辨率基础 1.术语和概念 术语 说明 备注 Screen size(屏幕尺寸) 指的是手机实际的物理尺寸,比如常用的2.8英寸,3 ...

  3. kafka官方Quick Start

    1.下载kafka,并上传到服务器 2.如果之前没安装zookeeper,这里可以启动一个简单的zookeeper bin/zookeeper-server-start.sh config/zooke ...

  4. Ubuntu 18.04 初始化(server版本 )

    系统安装 ubuntu 18.04 英文版,创建个人用户 初始系统 a.修改ip shell> vim /etc/network/interfaces auto ens33 iface ens3 ...

  5. python 利用pymssql连接MSSQL数据库,简单示例

    #-*- coding:GBK -*- import pymssql print 'Connect to the Datebase....' conn = pymssql.connect(host=' ...

  6. SPSS统计功能与模块对照表

    SPSS统计功能 - 应用速查表第一列为统计方法,中间为统计功能,最后一列为所在模块 1 ANOVA Models(单因素方差分析:简单因子) : 摘要 描述 方差 轮廓 - SPSS Base 2 ...

  7. ios 10 sticker pack application

    看了WWDC2016直播,我们发现变得谨慎而开放的苹果在新一版四大平台系统中展示了很多变化,当然重中之重还是伟大的iOS.通过试用iOS10beta版,除了长大了的更强大的Siri主要感受到iMess ...

  8. 数据库导入Excel-从基础做起

    近期一直跟着师傅做考试系统的基础.每天与大量的数据打交道.数据的导入.数据的导出.视图的导入导出.核对信息等等,收获挺多的,培养了自己的耐心和细心,也进一步了解了数据库. 一切从基础做起! 来看看近期 ...

  9. vptr

    #include <stdio.h> class Point3d { public: virtual ~Point3d(){} public: static Point3d origin; ...

  10. spring mvc注解和spring boot注解

    1 spring mvc和spring boot之间的关系 spring boot包含spring mvc.所以,spring mvc的注解在spring boot总都是可以用的吗? spring b ...