前端基础 -JQuery之val,text,html

简介: 前端基础 -JQuery之val,text,html

JQuery 里val,text,html的使用与区别

介绍:

.html()用为读取和修改元素的HTML标签 对应js中的innerHTML

.html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素

.text()用来读取或修改元素的纯文本内容 对应js中的innerText

.text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上

.val()用来读取或修改表单元素的value值

.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上

使用方法:

  • value:
    获取:jquery对象.val()
    赋值:jquery对象.val(“值”)
  • html:
    获取:jquery对象.html()
    赋值:jquery对象.html(“值”)
  • text:
    获取:jquery对象.text()
    赋值:jquery对象.text(“值”)

区别:

  • html和text设置值的区别:
    - - html会把标签直接解析到页面上
    - - text会把标签作为文本的形式展示到页面上
  • html和text获取值的区别:
    - - html会把标签体中存在的html标签获取出来
    - - text不会把标签体中存在的html标签获取出来

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //3.1 设置 username的默认值为"许多多"
        $("[name=username]").val("许多多");
        //3.2获取 username的value属性的值
        //alert($("[name=username]").val());
        //3.3通过html获取div标签体的内容
        //alert($("div").html());
        //3.4通过html设置div标签体的内容
        $("div").html("如果我们角色互换,我会让你知道什么是残忍!");
        //3.5通过text获取div标签体的内容
        //alert($("div").text());
        //3.6通过text设置div标签体的内容
        $("div").text("要来一发吗");
        //3.7 两者设置值的区别
        //$("#sp1").html("<h1>html方式设置值</h1>");
        $("#sp1").text("<h1>text方式设置值</h1>");
        //3.8 两者获取值的区别
        //alert($("#sp").html());
        alert($("#sp").text());
      });
    </script>
    <style type="text/css">
      .textClass {
        background-color: #ff0;
      }
    </style>
  </head>
  <body>
    <h3>表单</h3>
    <form action="">
      <table border="1">
        <tr id="tr1">
          <td><label>姓名</label></td>
          <td><input type="text" name="username" /></td>
        </tr>
        <tr>
          <td><span>密码</span></td>
          <td><input type="password" name="password" /></td>
        </tr>
        <tr>
          <td>性别</td>
          <td>
            <input type="radio" name="gender" value="男" />男
            <input type="radio" name="gender" value="女" />女
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button type="button">普通按钮</button>
            <input type="submit" value="提交按钮" />
            <input type="reset" value="重置按钮" />
          </td>
        </tr>
      </table>
    </form>
    <h3>公告信息</h3>
    <div>
      未满18慎进
    </div>
    <span id="sp">外span<a href='#'>内超链</a></span>
    <span id="sp1"></span>
  </body>
  <span></span>
  <div>
    <span></span>
  </div>
</html>
目录
打赏
0
1
1
0
239
分享
相关文章
|
11天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
31 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
jQuery实现的卡片式翻转时钟HTML源码
jQuery实现的卡片式翻转时钟HTML源码
22 0
jQuery实现的卡片式翻转时钟HTML源码
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
1月前
|
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
48 11
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
70 6
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
78 1
前端基础(十七)_HTML5新特性
jquery中html()方法的使用
jquery中html()方法的使用
59 1
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
36 2

热门文章

最新文章

  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    22
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    60
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    4
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    65
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    31
  • 7
    巧用通义灵码,提升前端研发效率
    96
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    148
  • 9
    详解智能编码在前端研发的创新应用
    107
  • 10
    智能编码在前端研发的创新应用
    84
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等