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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
layui对工具条进行选择性的显示方法
Sep 19 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 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需登录的文件上传管理系统
2020/03/21 PHP
微信支付扫码支付php版
2016/07/22 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
深入理解vue Render函数
2017/07/19 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
查看Django和flask版本的方法
2018/05/14 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
python实现TCP文件传输
2020/03/20 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python 检测图片是否有马赛克
2020/12/01 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
护士的岗位职责
2013/12/04 职场文书
大学生入党思想汇报
2014/01/14 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
店面销售职位的职责
2014/03/09 职场文书
愚人节活动策划方案
2014/03/11 职场文书
英语教学课后反思
2016/02/15 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang