jQuery 获取文本内容

简介: jQuery 获取文本内容

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


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



文章目录:

一: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 复习巩固】


1.3.1 innerText 对文本内容的获取


1.3.2 innerText 对文本内容的设置


一: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


1.3.1 innerText 对文本内容的获取

<body>

   <div>

       <p>我是一段文本</p>

   </div>

   <script>

       var ele=document.querySelector('div')

       console.log(ele.innerText);

   </script>

</body>

输出结果:


innerText 不会将标签打出来




1.3.2 innerText 对文本内容的设置

<body>

   <div>

       <p>我是一段文本</p>

   </div>

   <script>

       var ele=document.querySelector('div')

       ele.innerText='123';

   </script>

</body>

输出结果:


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




【创作不易,给个关注点赞再走吧,谢谢!!】  


相关文章
|
10月前
|
JSON JavaScript 数据格式
jQuery数据结构渲染(3):文本和input/textarea框赋值
jQuery数据结构渲染(3):文本和input/textarea框赋值
50 1
|
JavaScript
jQuery文本段落展开和折叠效果
jQuery文本段落展开和折叠效果
|
JavaScript 前端开发
【前端】用jquery或js获取select标签中选中的option值及文本
用jquery或js获取select标签中选中的option值及文本
1164 0
|
前端开发 JavaScript
【WEB前端】【JQuery】搜索li标签的内容
【WEB前端】【JQuery】搜索li标签的内容
111 0
【WEB前端】【JQuery】搜索li标签的内容
|
JavaScript PHP
phpQuery,php爬虫类库,像jQuery一样轻松采集内容
phpQuery,php爬虫类库,像jQuery一样轻松采集内容
206 0
|
JavaScript
Jquery操作文本内容(三个方法:html()、text()、var())
Jquery操作文本内容(三个方法:html()、text()、var())
|
JavaScript 前端开发 CDN
Prototype以及jQuery和CDN -内容分发网络在使用JavaScript实战运用
Prototype以及jQuery和CDN -内容分发网络在使用JavaScript实战运用
Prototype以及jQuery和CDN -内容分发网络在使用JavaScript实战运用
|
JavaScript
jquery内容文本值-31
jquery内容文本值-31
79 0
jquery内容文本值-31
|
JavaScript
jQuery获取和设置元素内容
jquery中的html方法可以获取和设置标签的html内容
135 1
|
JavaScript 前端开发 开发者
jQuery_内容过滤|学习笔记
快速学习 jQuery_内容过滤
217 0
jQuery_内容过滤|学习笔记