jQuery 包含很多供改变和操作 HTML 的强大函数。
————————————————————
$(selector).html(content)
html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。
实例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3School");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
————————————————————
$(selector).append(content)
append() 函数向所匹配的 HTML 元素内部追加内容。
语法
$(selector).prepend(content)
prepend() 函数向所匹配的 HTML 元素内部预置(Prepend)内容。
实例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>W3School</b>.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
语法
$(selector).after(content)
after() 函数在所有匹配的元素之后插入 HTML 内容。
语法
$(selector).before(content)
before() 函数在所有匹配的元素之前插入 HTML 内容。
实例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" W3School.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
————————————————————
jQuery HTML 操作 - 来自本页
函数
描述
$(selector).html(content)
改变被选元素的(内部)HTML
$(selector).append(content)
向被选元素的(内部)HTML 追加内容
$(selector).prepend(content)
向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content)
在被选元素之后添加 HTML
$(selector).before(content)
在被选元素之前添加 HTML
分享到:
相关推荐
建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~统一开发环境是一款HTML5跨平台一站式应用开发、调试和部署工具, 它支持HTML5跨平台开发,原有Java跨平台插件支持Android、Symbian、...
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
网页模板——基于HTML5 time元素的倒计时jquery插件
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"...jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities
最近在学习jquery,今天抽空用jquery 写个checkbox——类似邮箱全选功能。 代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>checkbox</...
简单好用的立体式左右滚动banner焦点图效果 源代码没有任何图片,且CSS较为冗余,懒人站长已经做过优化,方便懒人们使用 使用方法: 1、将CSS引入到你的页面中,保证命名不冲突 2、将index.html中代码部分...
Heap Shot是 jQuery的堆叠图像画廊插件,含INCLUDE JS&CSS、HTML、初始化JS代码。大家可以参考学习 一下,效果很炫呢。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发~~~统一开发环境是一款HTML5跨平台一...
其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 ...
网页模板——jQuery+HTML5实现的随机密码生成器特效源码
在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很...在这里主要介绍下一个在实际开发中最常用的jquery模板插件——jQuery Boilerplate jQuery Boilerpl
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) 【查看更多源码...
网页模板——jQuery+HTML5实现的鼠标点击经过播放音频特效源码
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
[Apress] 实时交互应用开发 —— 使用 HTML5 WebSocket, PHP 和 jQuery [Apress] Realtime Web Apps With HTML5 WebSocket, PHP, and jQuery (E-Book) ☆ 出版信息:☆ [作者信息] Jason Lengstorf, Phil ...
easyui是一个基于jquery的集成了各种用户界面的插件。 使用easyui你不需要写太多javascript代码,一般情况下你只需要使用一些html标记来定义用户接口。 easyui非常简单,但是功能非常强大。
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
jquery仿淘宝评价评分功能——点击心形生成得分,半心
——jQuery中文用户组 jQuery因为易于使用和功能强大著称,是所有Web开发者应该掌握的一种利器,初学者如何才能快速而有效地掌握jQuery呢?最好的方法莫过于一边学习理论,一边动手实践这些理论,本书就是按照这种...
jQuery替身——jQuery.sub();增强了遍历相邻节点的性能;jQuery开发团队构建系统的改进。 1.4重要新特性: ·常用方法的性能大幅提升:重写了大部分较早期的函数; ·更容易使用的设置函数(setter function):为...
简单好用的立体式左右滚动banner焦点图效果 源代码没有任何图片,且CSS较为冗余,懒人站长已经做过优化,方便懒人们使用 使用方法: 1、将CSS引入到你的页面中,保证命名不冲突 2、将index.html中代码部分拷贝到...