jQuery - 获取/设置内容和属性
获得内容 - 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());
});
设置内容 - 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("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html():
实例
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
}); $("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法:
实例
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery HTML 参考手册
如需有关 jQuery HTML 方法的完整内容,请访问以下参考手册:
jQuery - 获取/设置内容和属性的更多相关文章
- jquery获取(设置)节点的属性与属性值
1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2 ...
- JavaScript(19)jQuery HTML 获取和设置内容和属性
jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 D ...
- JQUERY操作html--获取和设置内容、属性、回调函数
一:jQuery - 获取内容和属性 1.获得内容 - text().html() 以及 val() text() - 返回所选元素的文本内容 html() - 返回所选元素的内容(包括 HTML 标 ...
- <七> jQuery 设置内容和属性
设置内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 设置属性 jQuery attr( ...
- jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()
jQuery - 设置内容和属性 设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...
- jquery 获取设置值、添加元素详解
jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易 ...
- jquery】常用的jquery获取表单对象的属性与值
[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...
- 转载JQuery 获取设置值,添加元素详解
转载原地址 http://www.cnblogs.com/0201zcr/p/4782476.html jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操 ...
- jquery获取当前选项的属性值a
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
随机推荐
- 获取maven下resouce中的文件为File对象
例如src/main/resources目录下面有个config/interfaces/quick-stock.xml文件我想直接在某一个Java类里面获取到这个文件的File对象,怎么整?(注意噢: ...
- 【LeetCode-面试算法经典-Java实现】【118-Pascal's Triangle(帕斯卡三角形)】
[118-Pascal's Triangle(帕斯卡三角形(杨辉三角))] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given numRows, generate ...
- 下载yum安装的rpm包
方法一 通过yum自带的yumdownloader工具进行下载,这个工具是由yum-utils这个软件安装生成的 执行如下命令,检查yum-utils是否存在: rpm -qa |grep yum-u ...
- cobbler+koan
cobbler+koan自动重装客户机 koan是kickstart-over-a-network的缩写,它是cobbler的客户端帮助程序,koan允许你通过网络提供虚拟机,也允许你重装已经存在 ...
- 第一篇: Ansible 介绍
应用场景: BOSS:运维帮忙把所有的服务器tomcat 重启一下,谢谢!(tomcat 服务有2K台) 运维:………… 运维: 啪啪啪啪啪啪啪啪..........(键盘的声音响彻办公室) B ...
- [c++]对象指针,引用的操作
1.time类保存在"htime.h"中.要求: ⑴ 数据成员包括时(hour).分(minute).秒(second),为私有成员: ⑵ 能给数据成员提供值的成员函数(默认值为0 ...
- ios输出想保留的整数位(占位符)
int startHour=5; int startMinute=4; //输出前面补0,不管你输入的数据前面有没有0 sp;NSLog(@"====>%@",[NSStri ...
- Objective-C 和 Core Foundation 对象相互转换的内存管理总结
本文转载至 http://blog.csdn.net/allison162004/article/details/38756649 OS允许Objective-C 和 Core Foundation ...
- Mysql 行数据转换为列数据
现有如下表: 需要统计手机所有售卖价格,显示为如下表: 需要使用group_concat对price进行处理,并且去重重复价格 sql如下: select type,group_concat(DIST ...
- YiiFramework(PHP)
Yii is a high-performance PHP framework best for developing Web 2.0 applications. Ref:http://www.yii ...