text()可以获取或设置元素的文本内容。例如：

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>html()操作</title>

    <style>

       *{

           margin: 0px;

           padding: 0px;

       }

       input{

           display: block;

           float: left;

       }

    </style>

    <!--引入jQuery-->

    <script src="../jquery-3.3.1.js"></script>

    <!--javascript-->

    <script>

       $(function(){

            $("#btnGet").click(function(){

                var text=$("div.left").text();

                alert(text);

             });

             $("#btnSet").click(function(){

                var html=$("div.left").text("<div style='border:1px solid red;'><p>这是一个段落</p></div>");

             });

       });

    </script>

</head>

<body>

    <div id="mainbox">

         <h1>飘飞雨絮</h1>

         <div class="left">

             <img src="../qq.jpg" width="150" height="150"/>

             <p>上面的图片是QQ斗地主</p>

             <br />

         </div>

    </div>

    <input type="button" id="btnGet" value="获取text()内容" style="margin-right:10px;" />

    <input type="button" id="btnSet" value="单击改变内容" />

</body>

</html>

效果：

jQuery（五）：文本操作的更多相关文章

  1. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  2. jQuery 源码分析(十五) 数据操作模块 val详解

    jQuery的属性操作模块总共有4个部分,本篇说一下最后一个部分:val值的操作,也是属性操作里最简单的吧,只有一个API,如下: val(vlaue)        ;获取匹配元素集合中第一个元素的 ...

  3. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  4. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  5. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  6. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  7. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  8. 解密jQuery内核 DOM操作的核心buildFragment

    文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...

  9. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  10. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

随机推荐

  1. java学习记录--ThreadLocal使用案例

    本文借由并发环境下使用线程不安全的SimpleDateFormat优化案例,帮助大家理解ThreadLocal. 最近整理公司项目,发现不少写的比较糟糕的地方,比如下面这个: public class ...

  2. UI控件篇——UIPageControl及其自定义

    UIPageControl类提供一行点来指示当前显示的是多页面视图的哪一页.当然,由于UIPageControl类可视样式的点击不太好操作,所以最好是确保再添加了可选择的导航选项,以便让页面控件看起来 ...

  3. [LeetCode] Palindrome Permutation I & II

    Palindrome Permutation Given a string, determine if a permutation of the string could form a palindr ...

  4. 源码解析-EventBus

    示例使用 时序图 源码解读 EventBus 使用 官网定义:EventBus 是一个使用 Java 写的观察者模式,解耦的 Android 开源库.EventBus 只需要几行代码即可解耦简化代码, ...

  5. CentOS 7 安装中文环境

    centos升级到7后,系统设置好多和6有了很大的区别,中文支持就有很大的变化. 1.安装中文语言包. yum install kde-l10n-Chinese 2.安装(已经安装的要重新安装)gli ...

  6. vim快速指南

    vi编辑器有3种模式:命令模式.输入模式.末行模式.掌握这三种模式十分重要: 命令模式:vi启动后默认进入的是命令模式,任何模式下,按[Esc]键都可以返回命令模式.输入模式:可输入字符,在底部显示“ ...

  7. 【Android】1.0 第1章 C#之Android手机App开发

    分类:C#.Android.VS2015:创建日期:2016-01-20 目前Android在全世界市场上大约有75%的占有率,国人Android手机的持有比例更甚,甚至达到90%以上.因此搞计算机的 ...

  8. 我的Eclipse设置

    1.默认编码改成:UTF-8(在老项目里设置此项可能导致java源码文件注释显示乱码!可以手工输入GBK三个字母,然后点apply) 2.文件默认打开方式 3.背景颜色(#C0C0C0,RGB(192 ...

  9. 源码安装mysql5.6x启动报错:[ERROR] Can't find messagefile '/data/mysqldata/3306/english/errmsg.sys'

    :: mysqld_safe Starting mysqld daemon with databases from /data/mysqldata//data -- :: [Warning] The ...

  10. chorme插件 ，在浏览器上模拟手机，pad 查看网页|前端技术开发必备插件

    网址:http://lab.maltewassermann.com/viewport-resizer/使用方法:1在chrome浏览器上方右击,显示书签栏 2 打开插件网址,将<ignore_j ...