《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.5 技巧:更改元素的HTML内容...
本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.5节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看
3.5 技巧:更改元素的HTML内容
为了能方便地操作HTML元素的innerHTML属性,jQuery提供了html()方法。代码清单3-5演示了它的用法。
代码清单3-5 选取一个段落元素并替换它的HTML内容
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>The html() function</title>
05 </head>
06 <body>
07
08 <h2>Press the button to see the old HTML in the
09 paragraph and replace it with new HTML</h2>
10
11 <p>This <strong>contains</strong> some
12 <a href="http://www.w3.org/TR/html5/">HTML</a>
13 of its <em>own</em>.</p>
14
15 <button>Change</button>
16
17 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
18
19 <script>
20 // 请将下列代码移至一个外部的.js文件中
21 $(document).ready(function() {
22
23 $('button').click(function() {
24
25 var p = $('p');
26
27 alert('The old HTML was:\n' + p.html());
28
29 p.html('<p>And that can be replaced with ' +
30 '<em>simple</em> new HTML.</p>');
31
32 });
33
34 });
35 </script>
36 </body>
37 </html>
可以直接把HTML字符串传给html(),也可以传包含HTML的jQuery对象。html()较之innerHTML的主要好处是它可以直接操作jQuery选取集,而不用先把它转换成数组1。
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.5 技巧:更改元素的HTML内容...相关推荐
- 转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧:使用多个列
本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第9章,第9.17节,作者:[荷]Adriaan de Jonge , [美]Phil ...
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.3 技巧:生成类名
本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第3章,第3.3节,作者:[荷]Adriaan de Jonge , [美]Phil ...
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.4 示例:使用按钮集装饰单选框...
本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第7章,第7.4节,作者:[荷]Adriaan de Jonge , [美]Phil ...
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.7 技巧:指定过渡动画
本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第9章,第9.7节,作者:[荷]Adriaan de Jonge , [美]Phil ...
- jQuery Mobile高手必备的十大技巧和代码片段
本文转自51ito布加迪编译版本: http://mobile.51cto.com/hot-276160.htm 其中未发现英文原作链接,为尊重版权,google之后附上: http://www.we ...
- JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
- jQuery、jQury UI、jQuery Mobile----读书笔记
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <meta name ...
- 第四十四课:jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
- jQuery的UI框架 Liger UI
jQuery的UI框架 Liger UI http://www.oschina.net/p/ligerui
最新文章
- 韩寒:出了国才知道,外国是多么的落后(写的真委婉~不愧是韩寒)
- 刘涵 美国 西北大学 计算机,西北大学关于表彰2010-2011学年度学生先进集体-红帆.doc...
- python requests 10041报错_pythonrequests返回unicode异常消息(或如何设置请求区域设置)...
- 考拉海购全面云原生迁移之路
- C++ 普通函数和模板函数调用规则
- Nagios3完整配置文档
- 白鹭引擎 - 事件机制 ( Event, addEventListener, dispatchEvent )
- STL之set的应用
- AStar算法通用实现+可视化(Matlab)
- 触屏西门子plc和计算机通讯,西门子S7-200CPU之间及它们与触摸屏之间数据读取如何连接?...
- 浅析欢乐时光(HAPPY TIME)病毒 (转)
- Krpano全景漫游开发手册
- UWB三维定位方式概述
- 软件测试-搭建测试环境
- linux测试upnp,UPnP linux新手入门
- 200道常见java知识点总结,问题+答案(转)
- 计算机应用基础高一考试,计算机应用基础 2018 高一《计算机应用基础》教学方法初探...
- 一加5应用未安装怎么解决_一加手机x安装不了软件下载是什么原因解决方法
- Lumiprobe核酸定量丨QuDye dsDNA BR 检测试剂盒
- tokudb分区表建立cluster index报错
热门文章
- angular.js双向数据绑定实现动画特效
- 侦听键盘,将data写入文件data.out(成功版本)
- 数据挖掘 自习笔记 第三章 定性归纳实践(下)
- Android 中Animation简单例子
- 从Linux程序中执行shell(程序、脚本)并获得输出结果(转)
- ixgbe驱动不支持三方兼容光模块SFP+SFP+或者QSFP的解决方案
- Linux电源管理-Operating Performance Points(OPP)
- Wireshark实战分析之TCP协议(二)
- linux下sqlite3的使用
- 内核中的中断函数request_irq()