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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
Express 配置HTML页面访问的实现
Nov 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
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
js脚本实现数据去重
2014/11/27 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
python实现K最近邻算法
2018/01/29 Python
pandas中去除指定字符的实例
2018/05/18 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
买房子个人收入证明
2014/01/16 职场文书
便利店投资创业计划书
2014/02/08 职场文书
施工材料员岗位职责
2014/02/12 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript