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 相关文章推荐
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 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
php print EOF实现方法
2009/05/21 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
JavaScript 参考教程
2006/12/29 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
Python读写Excel文件的实例
2013/11/01 Python
python避免死锁方法实例分析
2015/06/04 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
浅析Python 序列化与反序列化
2020/08/05 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
商铺门前三包责任书
2014/07/25 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
艺术节开幕词
2015/01/28 职场文书
会议主持词结束语
2015/07/03 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
Spring Boot实现文件上传下载
2022/08/14 Java/Android