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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
javascript编程起步(第五课)
Feb 27 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
jquery indexOf使用方法
Aug 19 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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
跟我学Laravel之快速入门
2014/10/15 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
js三种排序算法分享
2012/08/16 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python输入二维数组方法
2018/04/13 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python如何实现远程方法调用
2020/08/07 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
厂长岗位职责
2014/02/19 职场文书
运动会演讲稿100字
2014/08/25 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
幼儿园教师求职信
2015/03/20 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
MySQL大小写敏感的注意事项
2021/05/24 MySQL
MongoDB数据库之添删改查
2022/04/26 MongoDB