jq的html()、text()、val()的使用

最新推荐文章于 2024-06-15 07:33:35 发布
最新推荐文章于 2024-06-15 07:33:35 发布
阅读量2.7k 收藏 4
点赞数 1
文章标签： html 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39414668/article/details/75098760
版权

JQ获取HTML、文本和值

jq的html()方法可以获取被选中元素所包裹的标签以及文本内容。

jq的text()方法只能获取被选中元素所包裹的文本内容。

jq的val()方法可以获取被选中元素的值，一般用在表单上。

注意：
1.html()方法和text()方法不能获取表单填的值。“

2.val()方法不能获取元素所包裹的标签以及文本内容。

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>验证电话号码</title>
    </head>
    <body>
        <input type="text" name="" id="number" placeholder="请输入电话号码"/>
        <div id="sss">152</div>
        <script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
        <script type="text/javascript">
            var number = $("#number").html();
            var number1 = $("#number").val();
            var number2 = $("#number").text();
            var number3 = $("#sss").val();
            var number4 = $("#sss").html();
            var number5 = $("#sss").text();
            console.log(number);
            console.log(number1);
            console.log(number2);
            console.log(number3);
            console.log(number4);
            console.log(number5);       
        </script>
    </body>
</html>

输出结果：
这里写图片描述

龍joker
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqury中的html方法,jQuery中html()方法用法实例
weixin_35421203的博客
06-19 2061
本文实例讲述了jQuery中html()方法用法。分享给大家供大家参考。具体分析如下：此方法能够设置和取得匹配元素的HTML内容，原来的内容将会被新设置的内容替换。特别说明:HTML内容就是内容中可以包含HTML标签，并且能够被浏览器渲染。文本内容是先将内容中的HTML预定义字符转换成html字符实体，这样HTML标签就不会被渲染。语法结构一:复制代码 代码如下:$(selector).html(...
jQuery中的html(),text(),val()三种方法
weixin_49757916的博客
05-17 998
jQuery 一·jQuery中的html()方法的讲解： 公共代码css： <style> div{ width:200px; height:200px; background-color:red; } </style> 1·JavaScript中的html()方法，代码如下： <body> <div id="box"&gt
js/jq - text方法，获取文本设置文本
阿泷的学习日志
09-21 5186
    1、设置文本值 &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){
jq获取当前完整html,jquery怎样获取html的内容？
weixin_31115971的博客
06-08 9264
jquery怎样获取html的内容？下面本篇文章给大家介绍一下使用jquery获取html内容的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。jquery获取html元素内容的方法方法1：使用html()方法html()可以设置或返回所选元素的内容(包括 HTML 标记)当该方法用于返回内容时，则返回第一个匹配元素的内容。当该方法用于设置内容时，则重写所有匹配元素的内容。示...
jQuery中.text() 和 .val()辨析
最新发布
szial的专栏
06-15 390
在jQuery中，.text()和.val()是两个用于操作DOM元素内容的常用方法，但它们有不同的用途和适用的元素类型。.text()方法用于获取或设置匹配元素的文本内容。<div><span><p>使用.text()时，它会获取或设置匹配元素的所有子节点的文本内容，包括后代元素的文本。方法用于获取或设置表单元素的值。<input><textarea><select>使用.val()时，它会获取或设置表单元素的当前值。
jQuery中.html() 方法?
墓亦龍的博客
03-30 1万+
.html() 方法?1、定义及用法：html()方法返回被选元素的内容，即括号内未设置参数。                          若设置参数，返回设置参数的内容。                          并且该参数内容覆盖所有想匹配的元素的内容                          参数可为函数，即function(index,dcontent)       ...
前端-jQuery基础知识（二）
qq_52262831的博客
12-31 1133
目录： 获取和设置元素内容 获取和设置标签属性 jquery事件 jquery事件代理
jq输出文本_jQuery获取文本节点之 text()/val()/html() 方法区别
weixin_35160622的博客
01-27 274
1. 无参html()：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String例子：html页面代码：Hellojquery代码：$("div").html();结果：Hello2.有参html(val)：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象html页面代码：jqu...
jQuery中text() val()和html()的区别实例详解
11-25
在jQuery中，`text()`, `val()`, 和 `html()` 是三个非常常用的函数，用于获取和设置HTML元素中的文本、值以及HTML内容。虽然它们的功能相似，但各自有着特定的用途和细微的区别。 首先，`text()` 主要用于获取或...
JQ 获取和设置内容 text() html() val()
08-14
在JavaScript的世界里，jQuery（简称JQ）是一个广泛使用的库，极大地简化了DOM操作、事件处理、动画制作等任务。本篇文章将详细讲解jQuery中获取和设置内容的三个主要方法：`text()`, `html()`, 和 `val()`。这些...
jquery text(),val(),html()方法区别总结
12-12
text():1、无参获取每一个匹配元素的文本内容  2、有参数 给每一个匹配元素赋值 val():1、无参获取第一个匹配元素的值  2、有参数 给每一个匹配元素赋值 html():1、无参获取第一个匹配元素的标签内容  2、有参数...
jq input标签生成
06-12
在本文中，我们将深入探讨如何使用jQuery（jq）来创建一个简单的input标签生成器，以及如何结合HTML和CSS实现这一功能。input标签是HTML中用于用户输入数据的基本元素，而jQuery则提供了一种方便的方式来处理DOM操作...
JQ 自定义HTML5 音频播放
11-19
在本文中，我们将深入探讨如何使用jQuery（简称为JQ）和HTML5技术来创建一个自定义的音频播放器。这个自定义的音频播放器能够为用户提供丰富的交互体验，包括播放、暂停、音量控制等功能。 HTML5是现代网页开发的...
jQuery 自学笔记（二）——— 选择器、text()文本操作、css()样式操作、鼠标移入移出事件、class类操作
秀岩的博客
01-02 865
一、JQuery 的选择器 1.1 基本选择器 1.2 层级选择器 1.3 过滤选择器 1.4 筛选选择器（方法） 二、text()方法：设置/获取文本 2.1 获取文本 2.2 设置文本 三、css()方法：设置/获取样式 3.1 获取样式 3.2 设置样式 四、mouseover 事件 和 mouseleave 事件 五、class 类操作 5.1 添加类 5.2 移除类 5.3 判断类 5.4 切换类
jQuery html( )方法
m0_57835615的博客
06-06 1369
jQuery html( )方法可以设置或返回所选元素的内容，值得一提的是，该方法可以解析HTML代码。 （1）获取内容 示例：
jQuery 获取和设置HTML元素
ivenqin的博客
08-04 2548
jQuery 获取和设置HTML元素 jQuery 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。 text()方法 text() 方法可以用于设置或获取所选元素的文本内容。 示例： 例如我们获取下列 <p> 标签中的文本内容： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl
jQuery的属性与样式之html()及.text()
aoer2500的博客
03-24 239
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text() .html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法： .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容 .html( htmlString ) 设置...
『jQuery』.html(),.text()和.val()的使用
weixin_30443731的博客
04-21 1633
本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法，用于读取，修改元素的html结构，元素的文本内容，以及表单元素的value值的方法。jQuery中为我们提供了多种方法用于对元素的HTML结构和元素的文本内容的操作，比如说，你可以给已存在的元素的内部，周围，前面或者后面增加新元素；或者用一个元素替代另一个元素；你也可以读取或者修改一个元素的内容或...
jQuery获取包括当前元素的HTML
热门推荐
yixu0534的博客
11-28 1万+
1、获取当前元素内的HTML (1)方法一 $("#current").html(); (2)方法二 document.getElementById("current").innerHTML; 2、获取包括当前元素在内的HTML $("#current").prop("outerHTML");
HTML使用JQ库和Cooke实现注册登录
05-17
好的，下面我将为你介绍如何使用jQuery和Cookie来实现注册和登录功能。 1. 注册表单 首先，我们需要在HTML中创建一个注册表单。代码如下： ``` <form id="register-form"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <br> <button type="submit">注册</button> </form> ``` 2. 注册事件 当用户填写完注册表单后，我们需要通过jQuery来获取表单数据并将其保存在Cookie中。代码如下： ``` $('#register-form').submit(function(e) { e.preventDefault(); // 防止表单默认提交 var username = $('#username').val(); var password = $('#password').val(); // 将用户名和密码保存在Cookie中 $.cookie('username', username); $.cookie('password', password); alert('注册成功！'); }); ``` 3. 登录表单 接下来，我们需要创建一个登录表单，让用户输入用户名和密码。代码如下： ``` <form id="login-form"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <br> <button type="submit">登录</button> </form> ``` 4. 登录事件 当用户提交登录表单后，我们需要通过jQuery来获取表单数据并与保存在Cookie中的用户名和密码进行比对。如果匹配成功，则登录成功，否则登录失败。代码如下： ``` $('#login-form').submit(function(e) { e.preventDefault(); // 防止表单默认提交 var username = $('#username').val(); var password = $('#password').val(); // 获取Cookie中保存的用户名和密码 var savedUsername = $.cookie('username'); var savedPassword = $.cookie('password'); // 比对用户名和密码 if (savedUsername === username && savedPassword === password) { alert('登录成功！'); } else { alert('用户名或密码错误！'); } }); ``` 以上就是使用jQuery和Cookie实现注册登录功能的全部代码。注意，在使用Cookie时，需要先引入jQuery和jquery.cookie.js文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值