jQuery获取文本内容和原生JS的异同之处

目录
  • 前言
  • 一：html() 与 innerHTML
    • 1.1 html() 对于内容的获取
    • 1.2 html() 对于内容的设置
    • 1.3 innerHTML 的设置与获取【原生JS 复习巩固】
      • 1.3.1 innerHTML 对文本内容的获取
      • 1.3.2 innerHTML 对文本内容的设置
  • 二：text() 与 innerText
    • 2.1 text() 对于内容的获取
    • 2.2 text() 对于内容的设置
    • 2.3 innerText 的设置与获取【原生JS 复习巩固】
      • 2.3.1 innerText 对文本内容的获取
      • 2.3.2 innerText 对文本内容的设置
  • 总结

前言

hello hello，我们学习原生 JS 时已经学习掌握了两种获取和设置文本的办法，大家还记得吗？那就是 innerHTML 与 innerText，对吧，这两个基本原生方法的使用想必大家已经有些混淆了吧？不要慌张！下面我会带大家复习一下这两个方法的。

对于本篇文章，将带大家认识 jQuery 的获取设置文本内容的方法，向 jQuery 的深渊迈步吧！！！

一：html() 与 innerHTML

html() 是 jQuery 的方法，它等同于 innerHTML，二者均可以识别 HTML 标签，所以打印时会将元素标签一起打印出来

1.1 html() 对于内容的获取

获取我们直接无参数即可，并且内容中的标签也会得到

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        console.log($('div').html());
    </script>
</body>

输出结果：

可以看到 html() 将标签也输出了出来

1.2 html() 对于内容的设置

设置的话只需要将参数设置为我们要更改的文本即可

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        $('div').html('1234567890');
    </script>
</body>

输出结果：

可以看到我们的文本内容已经改成了我们想要设置的内容

1.3 innerHTML 的设置与获取【原生JS 复习巩固】

下面我们来复习一下效果等价于 jQuery 的 html() 方法的 原生 innerHTML

1.3.1 innerHTML 对文本内容的获取

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        var ele=document.querySelector('div')
       console.log(ele.innerHTML);
    </script>
</body>

输出结果：

innerHTML 也会将标签打印出来

1.3.2 innerHTML 对文本内容的设置

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        ele.innerHTML='123456'
    </script>
</body>

输出结果：

文本内容已经改成了我们想要设置的内容

二：text() 与 innerText

text() 是 jQuery 的方法，它等同于 innerText，二者不会识别 HTML 标签，所以打印时不会将元素标签一起打印出来，与前面二者不同需要注意！！

2.1 text() 对于内容的获取

获取的话我们一样直接无参数即可，注意 不同之处 在于内容中的 标签不会得到

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        console.log($('div').text());
    </script>
</body>

输出结果：

内容被打印了出来，内容中的标签没有被打印出来 

2.2 text() 对于内容的设置

设置的话只需要将参数设置为我们要更改的文本即可

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        $('div').text('1234');
    </script>
</body>

输出结果：

文本内容被改变为了我们想要设置的值

2.3 innerText 的设置与获取【原生JS 复习巩固】

然后下面我们复习一下效果等价于 jQuery 的 text() 方法的 原生 innerText

2.3.1 innerText 对文本内容的获取

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        console.log(ele.innerText);
    </script>
</body>

输出结果：

innerText 不会将标签打出来

2.3.2 innerText 对文本内容的设置

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        ele.innerText='123';
    </script>
</body>

输出结果：

内容被改为了想要设置的值

总结

到此这篇关于jQuery获取文本内容和原生JS的异同之处的文章就介绍到这了,更多相关jQuery获取文本内容内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript调用ajax获取文本文件内容实现代码

    JavaScript调用ajax获取文本文件内容实现代码

    这几年JQuery写多了,传统的的javascript已经很久不写了,不少东西都忘掉了,还有多少人记得javascript中实现ajax操作需要借助XMLHttpRequest对象,其实jquery的ajax本质也是这个,好了,今天就花点时间演示一下如何用传统javascript获取文本内容并展示在页面上,废话不多少,直接上代码,注释写的很详细,大家应该能看懂: 复制代码 代码如下: <script type="text/javascript"> //(A)①获取文本文件方

  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • JQuery获取与设置HTML元素的内容或文本的实现代码

    先来看看演示效果: 欢迎访问我们PHP教程 我们PHP教程 简单易懂的JavaScript魔法 简单易懂的JQuery魔法 $(function(){ $("#btn_1").click(function(){ alert( $(".nm_p").html() ); }); $("#btn_2").click(function(){ alert( $(".nm_p").text() ); }); $("#btn_3&

  • jQuery获取标签文本内容和html内容的方法

    本文实例讲述了jQuery获取标签文本内容和html内容的方法.分享给大家供大家参考.具体分析如下: jQuery可以通过text和html方法获取指定标签的文本内容或者html内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $(&quo

  • javascript获取元素文本内容的通用函数

    一个获取元素文本内容的通用函数 中华人民共和国1 2 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 将HTML DOM中几个容易常用的属性做下记录: nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释:node

  • JS简单获取并修改input文本框内容的方法示例

    JS简单获取并修改input文本框内容的方法示例

    本文实例讲述了JS简单获取并修改input文本框内容的方法.分享给大家供大家参考,具体如下: 一 介绍 获取文本框并修改其内容可以使用getElementById()方法来实现. getElementById()方法可以通过指定的id来获取HTML标记,并将其返回. 语法: sElement=document.getElementById(id) sElement:用来接收该方法返回的一个对象. id:用来设置需要获取HTML标记的id值. 二 应用 获取文本框并修改其内容 在页面加载后的文本框

  • 获取select元素被选中的文本内容的js代码

    复制代码 代码如下: var sel=document.getElementById(id);//select元素的id var index=sel.selectedIndex;//获取被选中的option的索引 var textsel= sel.options[index].text;//获取相应的option的内容

  • 利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)

    一共两个页面,分别如下: 一.创建页面create.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

  • jQuery获取文本内容和原生JS的异同之处

    jQuery获取文本内容和原生JS的异同之处

    目录 前言 一:html() 与 innerHTML 1.1 html() 对于内容的获取 1.2 html() 对于内容的设置 1.3 innerHTML 的设置与获取[原生JS 复习巩固] 1.3.1 innerHTML 对文本内容的获取 1.3.2 innerHTML 对文本内容的设置 二:text() 与 innerText 2.1 text() 对于内容的获取 2.2 text() 对于内容的设置 2.3 innerText 的设置与获取[原生JS 复习巩固] 2.3.1 innerT

  • jQuery获取剪贴板内容的方法

    本文实例讲述了jQuery获取剪贴板内容的方法.分享给大家供大家参考,具体如下: 这两天弄fckeditor粘贴功能,随着工作的深入和在网上查询资料,知道了在网页中一般是不允许访问"剪贴板"的,因为这样存在着很大的安全隐患,我自己也尝试着写了一个简单的demo 在IE和FF中剪贴板的访问是可控的,但是在Opera.Chrome.Safari浏览器中是不允许访问的,这样就产生了浏览器兼容的问题,怎么样才能让其他的浏览器兼容这个功能呢,在网上查找了一些资料--"使用flash去访

  • python和shell获取文本内容的方法

    这两天搞脚本,花费不少时间. Python和Shell都可以获取文本内容,网上许多资料介绍的都不具体.简单的使用Python和Shell写了脚本. 做一些笔记沉淀一下. 1.Python实现: #-*- encoding:UTF-8 -*- filehandler = open('f.txt','r') #以读方式打开文件,rb为二进制方式(如图片或可执行文件等) print filehandler.read() #读取整个文件 filehandler.close() #关闭文件句柄 2.She

  • jQuery的Read()方法代替原生JS详解

    在jQuery 3.0的版本前, ready经典用法是用一个匿名函数,像这样: $(document).ready(function() { // Handler for .ready() called. }); jQuery 3.0 ready() 变化 在jQuery 3.0发布之前,有以下几种方法称之为ready方法: 在document元素上操作: $(document).ready(handler); 在空元素上操作: $().ready(handler); 或者直接(即不在一个具体的

  • jQuery获取文本节点之 text()/val()/html() 方法区别

    在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 1. 无参html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档,返回的是一个String 例子: html页面代码:<div><p>Hello</p></div> jquery代码:$("div").html(); 结果:H

  • js/jquery获取文本框输入焦点的方法

    方法一. 复制代码 代码如下: function CheckForm() {             if(document.form1.trainingName.value==""){                     alert("培训班名称不能为空!");                     document.form1.trainingName.focus();                     return false;          

  • JQuery获取文本框中字符长度的代码

    趁我写例子这点时间有两个人回答了 呵呵 刚才试验过了 看下例子吧 JS 方法: 复制代码 代码如下: <script type="text/javascript"> // 得到字符串的真实长度(双字节换算为两个单字节) function getStrActualLen(sChars) { //sChars.replace(/[^\x00-\xff]/g,"xx").length/1024+"字节"; //Math.round(sCha

  • jQuery获取选中内容及设置元素属性的方法

    获取选中select : $("#id option:selected").val(); 自定义radio: $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio: $("input[name='sex']:checked").val() 设置input不能编辑: $("#cashNum").attr

  • 原生JS和jQuery操作DOM对比总结

    一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("He

  • 原生JS和jQuery版实现文件上传功能

    本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下 <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="jquery-2.1.1.min.js"></

随机推荐