jQuery - 设置内容和属性的三种方法

jQuery - 设置内容和属性


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

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

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

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

实例

$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); });


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

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

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

实例

$("#btn1").click(function(){
$("#test1").text(function(i,origText){return"旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){return"旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});


设置属性 - attr()

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

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

实例

$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});

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

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

实例

$("button").click(function(){
$("#runoob").attr({"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"});
});


attr() 的回调函数

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

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

实例

$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){returnorigValue + "/jquery";
});
});

原文地址:https://www.cnblogs.com/peijz/p/12585917.html

时间: 2024-08-08 11:13:30

jQuery - 设置内容和属性的三种方法的相关文章

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

jQuery - 设置内容和属性  设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子演示如何通过 text().html() 以及 val() 方法来设置内容: 实例 $("#btn1").click(function(){ $("#test1").text("Hello worl

PHP设置脚本最大执行时间的三种方法

php.ini 中缺省的最长执行时间是 30 秒,这是由 php.ini 中的 max_execution_time 变量指定,如果脚本需要跑很长时间,例如要大量发送电子邮件,或者分析统计大量数据,服务器会在 30 秒后强行中止正在执行的程序,这种情况就要更改php脚本最大执行时间. PHP设置脚本最大执行时间的三种方法 1.在php.ini里面设置 max_execution_time = 120; 2.通过PHP的ini_set函数设置 ini_set("max_execution_time

jquery 点击显示隐藏的三种方法

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <!-- 收缩展开效果 --><li class=&

jQuery设置内容和属性方

何问起 hovertree.com 设置内容 - text().html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值 示例: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <s

jQuery 设置内容和属性

设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子演示如何通过 text().html() 以及 val() 方法来设置内容: 实例 $("#btn1").click(function(){  $("#test1").text("Hel

Zend框架设置数据库连接编码为utf8三种方法

第一种:$conn['host'] = '127.0.0.1';$conn['username'] = '56_' . $tenant['tenant'];$conn['password'] = $tenant['password'];$conn['dbname'] = '56_' . $tenant['tenant'];$conn['charset'] = 'utf8';$this->_db = Zend_Db::factory('PDO_MYSQL', $conn);Zend_Db_Tabl

三种方法为QLineEdit添加清除内容按钮

很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对性,另一种方法则是通用的,不仅可以用来实现清除输入内容,还可以扩展出其他功能. 本文索引 方法1:setClearButtonEnabled显示清除按钮 方法2:使用QAction实现清除按钮 方法3:自定义QLineEdit为其添加按钮 最终的显示效果 方法1:setClearButtonEnab

VMWARE虚拟机不能上网三种方法分析

bridged(桥接模式). NAT(网络地址转换模式) host-only(主机模式). 理论理解: 1.bridged(桥接模式) 在这处模式下,虚拟机等同于网络内的一台物理主机,可对手动设置IP,子网掩码,DNS,且IP地址要和主机的IP在同一网段内.这样,虚拟机就和主机如同连在一个HUB上的两台计算机,只要主机能上网,虚拟机也会在这种模式下上网. 2.host-only(主机模式) 在host-only模式中,所有的虚拟系统是可以相互通信的,但虚拟系统和真实的网络是被隔离开的. 提示:在

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

jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 提示:DOM = Document Object Model(文档对象模型) DOM 定义访问 HTML 和 XML 文档的标准:"W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容.结构以及样式."