前端基础 -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
分享
相关文章
|
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
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
55 3
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
77 1
前端基础(十七)_HTML5新特性
jquery中html()方法的使用
jquery中html()方法的使用
59 1
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
42 2
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
36 2

热门文章

最新文章