博主信息
博文 35
粉丝 0
评论 0
访问量 33861
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jquery常用操作
小的博客
原创
905人浏览过

一 ,html css 设置文本基本样式,用jquery 获取和设置元素的内容 ,主要涉及两个方法:text()  html();QQ截图20171220143958.png

<!DOCTYPE html>
<html>
 <meta charset="UTF-8">
  <head>
     <title>jquery中常用事件3</title>
        <script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
 img{
  width:200px;
  height:200px;
 }
</style>
  </head>
  <body>
   <p id="text"><img src="http://img17.3lian.com/d/file/201701/09/e77f6e99d3418a095685498353ff2003.jpg" width="200" height="200" alt="美女图片">美女图片吉泽明步</p>
   <p id="tag">PHP中文网的域名是php.cn</p>

text()仅返回节点的纯文本内容,html()返回节点中所有内容,包括html标记(innerHTML)

</body>
  <script>
   //获取和设置元素的内容
      //  主要涉及二个方法: text()和html()
    //                    1. text(): 仅返回节点中纯文本内容
   //                     2. html(): 返回节点中的所有内容,包括html标记(innerHTML)
     console.log($('#text').text());
console.log($('#text').html())
console.log($('#tag').text())
console.log($('#tag').html())

设置

1,我们看下text()设置之后,代码运行效果,仅输出纯文本内容不解析

QQ截图20171220144354.png

 console.log($('#text').text('<h2>日本女生</h2>'))//添加标签无用扔输出纯文本不解析

设置

2,使用html()设置元素,图片预览,则html()可以添加内容

QQ截图20171220144724.png

 $('#text').html('<img src="http://t11.baidu.com/it/u=4232971612,3129417214&fm=175&s=B1B153972C33028CF810E0
 CE0300E011&w=440&h=782&img.JPEG"><h2>日本女生</h2>')//可添加标签
</script>
</html>


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学