当前位置: 首页 > news >正文

JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val() ?...

作者赵晓盼课程任务一:零基础JavaScript编码(一)2809次浏览702017-03-02 10:49

一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?
jS中设置或者获取所选内容的值:
①innerHTML :属性设置或返回该标签内的HTML。也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
②outerHTML:属性设置或返回该标签及标签内的HTML。也就是从对象的该标签起始到终止位置的全部内容,包括Html标签。
如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,
③inneText:从起始位置到终止位置的内容,但它去除html标签。(只能在IE和chrome下使用)
④outerText 设置(包括标签)或获取(不包括标签)对象的文本 <br><br>
⑤value:属性可设置或返回密码域的默认值。获取文本框的值
二、jQuery中的text()、html()和val()
jQuery中设置或者获取所选内容的值:
①text();设置或者获取所选元素的文本内容;
②html();设置或者获取所选元素的内容(包括html标记);
③val();设置或者获取表单字段的值(前提是表单设置了value属性);
首先,html属性中有两个方法,一个有参,一个无参

  1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String
 例子:
        html页面代码:<div><p>Hello</p></div> jquery代码:$("div").html(); 结果:<p>Hello</p> 2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象 html页面代码:<div></div> jquery代码:$("div").html("<p>Nice to meet you</p>"); 结果:[ <div><p> Nice to meet you</p></div> ] 

其次,text属性中有两个方法,一个有参,一个无参

    1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
     例子:
        html页面代码:<p><b>Hello</b> fine</p> <p>Thank you!</p> jquery代码:$("p").text(); 结果:HellofineThankyou! 2.有参text(val):设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象 html页面代码:<p>Test Paragraph.</p> jquery代码:$("p").text("<b>Some</b> new text."); 结果:[ <p><b>Some</b> new text.</p> ] 

最后,val()属性中也有两个方法,一个有参,一个无参。
1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。 返回的是一个String、 array
jquery代码:$("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));
结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象
html页面代码:<input type="text"/>
jquery代码:$("input").val("hello world!");
结果:hello world!

*

转载于:https://www.cnblogs.com/Jane77/p/7509344.html

相关文章:

  • python 逗号作用 语句间_python逗号作用
  • SDUT_2116 数据结构实验之链表一:顺序建立链表
  • 华三模拟器hcl实验手册_Caffeinated 6.828:实验 1:PC 的引导过程
  • WEB API 版本控制
  • 阿里云轻量服务器 外网卡_腾讯云轻量应用服务器(免费内测)开箱测评
  • mixbox工具箱_让小米路由回归智能,3款第三方工具箱以及插件评测
  • mysql 学习笔记
  • 华为杯数学建模优秀论文_数学建模经典例题(2006年国赛A题与优秀论文)
  • 信息验证 正则表达式
  • python多线程join_Python多线程中阻塞(join)与锁(Lock)使用误区解析
  • Table对象代表一个HTML表格,在文档中table标签每出现一次,一个table对象就会被创建。...
  • 抛物线的中点生成算法_以字段覆盖标准指导的高效测试生成技术
  • 树转化为二叉树_关于数据结构树,这一篇足够让你入门了
  • JAVA-初步认识-第四章-for循环嵌套练习
  • 根据varchar排列是怎么比大小的_mysql order by是怎么工作的?
  • JS中 map, filter, some, every, forEach, for in, for of 用法总结
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • express + mock 让前后台并行开发
  • Java比较器对数组,集合排序
  • js操作时间(持续更新)
  • KMP算法及优化
  • Mysql优化
  • October CMS - 快速入门 9 Images And Galleries
  • vue-cli3搭建项目
  • windows下如何用phpstorm同步测试服务器
  • 半理解系列--Promise的进化史
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 基于web的全景—— Pannellum小试
  • 目录与文件属性:编写ls
  • 算法-图和图算法
  • 看到一个关于网页设计的文章分享过来!大家看看!
  • Java性能优化之JVM GC(垃圾回收机制)
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • #我与Java虚拟机的故事#连载11: JVM学习之路
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (附源码)ssm捐赠救助系统 毕业设计 060945
  • (理论篇)httpmoudle和httphandler一览
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .NET/C# 阻止屏幕关闭,阻止系统进入睡眠状态
  • .NET中使用Redis (二)
  • .php文件都打不开,打不开php文件怎么办
  • .pub是什么文件_Rust 模块和文件 - 「译」
  • @transaction 提交事务_【读源码】剖析TCCTransaction事务提交实现细节
  • []FET-430SIM508 研究日志 11.3.31
  • [2544]最短路 (两种算法)(HDU)
  • [8-27]正则表达式、扩展表达式以及相关实战
  • [AX]AX2012 AIF(四):文档服务应用实例
  • [BUUCTF NewStarCTF 2023 公开赛道] week3 crypto/pwn
  • [C++]高精度 bign (重载运算符版本)
  • [DevEpxress]GridControl 显示Gif动画
  • [Flutter]WindowsPlatform上运行遇到的问题总结
  • [HTTP]HTTP协议的状态码
  • [IT生活推荐]大家一起来玩游戏喽,来的都进!
  • [LeetCode] 197. 上升的温度