• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val() ?

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

作者:WHUZXQ的博客 字体:[增加 减小] 来源:互联网 时间:2017-08-31

WHUZXQ的博客通过本文主要向大家介绍了innerHtml等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

jS中设置或者获取所选内容的值:
①innerHTML :属性设置或返回该标签内的HTML。也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
②outerHTML:属性设置或返回该标签及标签内的HTML。也就是从对象的该标签起始到终止位置的全部内容,包括Html标签。
如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,
③innerText:从起始位置到终止位置的内容,但它去除html标签。(只能在IE和chrome下使用)
④outerText 设置(包括标签)或获取(不包括标签)对象的文本
⑤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!
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11js for循环倒序输出数组元素的实例
  • 2017-09-11ES6 语法中函数参数的默认值
  • 2017-05-11JavaScript自定义文本框光标
  • 2017-05-11ES6新特性二:Iterator(遍历器)和for-of循环详解
  • 2017-05-11微信小程序 地图map详解及简单实例
  • 2017-05-11浅析javaScript中的浅拷贝和深拷贝
  • 2017-05-11Zepto实现密码的隐藏/显示
  • 2017-05-11关于jQuery中fade(),show()起始位置的一点小发现
  • 2017-05-11简单易懂的天气插件(代码分享)
  • 2017-05-11前端编码规范(3)JavaScript 开发规范

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 纯JS实现轮播图
    • 值得分享和收藏的xmlplus组件学习教程
    • 利用Node.js对文件进行重命名
    • 老生常谈combobox和combotree模糊查询
    • 谈谈JavaScript数组常用方法总结
    • 微信小程序开发经验总结(推荐)
    • 微信小程序 扎金花简单实例
    • PHP实现本地图片上传和验证功能
    • jquery实现自定义图片裁剪功能【推荐】
    • 微信小程序实现图片轮播及文件上传

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有