博客列表 >jquery常用操作

jquery常用操作

小的博客
小的博客原创
2017年12月20日 14:49:28715浏览

一 ,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 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议