jQuery中html()方法用法实例


Posted in Javascript onDecember 25, 2014

本文实例讲述了jQuery中html()方法用法。分享给大家供大家参考。具体分析如下:

此方法能够设置和取得匹配元素的HTML内容,原来的内容将会被新设置的内容替换。

特别说明:

HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染。
文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染。
语法结构一:

$(selector).html()

此时方法不带参数时候是取得第一个匹配元素的html内容。

此方法与text()方法没有参数用法类似,但是还是有很大区别:

一.html()方法取得第一个匹配元素的内容,而text()方法是取得所有匹配元素包含的内容。
二.html()方法取得内容html内容,而text()方法取得是文本内容。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    alert($("div").html()); 

  }) 

}) 

</script>

</head>

<body>

<div>

  <ul>

    <li><span>三水点靠木欢迎您</span></li>

  </ul>

</div>

<button>点击查看效果</button>

</body>

</html>

以上代码将返回div元素中的内容。
语法结构二:

$(selector).html(content)

带有参数的时候是设置所有匹配元素而的html内容。
此方法与text()方法带有参数的用法类似,但是还是有很大的区别:
html()方法设置的是html内容,而text()方法设置的是文本内容。

实例代码:

以下代码将div中的html内容设置为"<b>我是重新设置后的内容</b>"。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").html("<b>我是重新设置后的内容</b>"); 

  }) 

}) 

</script>

</head>

<body>

<div>原来内容</div>

<button>点击查看效果</button>

</body>

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){  

  $("button").click(function(){ 

    $(".html").html("<b>好好学习</b>"); 

    $(".text").text("<b>好好学习</b>");     

  }) 

}) 

</script>

</head>

<body>

<div class="html"></div>

<div class="text"></div>

<button>点击查看效果</button>

</body>

</html>

通过此实例大家可以观察一下html内容和文本内容的区别。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery DIV弹出效果实现代码
Jul 03 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
js本地图片预览实现代码
Oct 09 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
JS自定义右键菜单实现代码解析
Jul 16 Javascript
jQuery中val()方法用法实例
Dec 25 #Javascript
24款热门实用的jQuery插件推荐
Dec 24 #Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 #Javascript
Javascript 多物体运动的实现
Dec 24 #Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 #Javascript
jQuery中height()方法用法实例
Dec 24 #Javascript
jQuery中width()方法用法实例
Dec 24 #Javascript
You might like
建立动态的WML站点(一)
2006/10/09 PHP
php的access操作类
2008/04/09 PHP
php实现插入排序
2015/03/29 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
python人人网登录应用实例
2014/09/26 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python金融数据可视化汇总
2017/11/17 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python如何绘制疫情图
2020/09/16 Python
教师旷工检讨书
2014/01/18 职场文书
2014年创卫实施方案
2014/02/18 职场文书
分公司经理任命书
2014/06/05 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
党员批评与自我批评
2014/10/15 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python