【JQuery】attr、val、prop、html方法的功能

最新推荐文章于 2022-11-25 12:00:00 发布

致最长的电影

最新推荐文章于 2022-11-25 12:00:00 发布

阅读量324

点赞数 1

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/yuxiangdeming/article/details/104699658

版权

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

一、attr、val、prop方法示例代码（可以直接测试）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试val、attr、prop</title>
</head>

<body>

    昵称：<input type="text" id="userName" value="德玛西亚">
    <br>
    <input type="button" value="注册" id="btn">


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

    <script>
        $('#btn').click(function () {
            let attr = $('#userName').attr("value");
            let prop = $('#userName').prop("value");
            let val = $('#userName').val();
            console.log("输出attr="+attr);
            console.log("输出prop="+prop);
            console.log("输出val="+val);
        })

    </script>
</body>
</html>

1.直接运行上述代码

当我们直接运行时，浏览器控制台什么都没有输出，因为我们还没有点击注册按钮，没有触发点击事件。
页面图示
从上图中可以看出：昵称的value值默认的出现在文本输入框中。该功能可以出现在当用户修改昵称时，可以将之前的昵称值出现在文本输入框中，增加用户体验

2.点击注册按钮

我们将昵称中输入框值改变，填写为“滑板鞋”，打开浏览器控制台，看输出情况
页面图示

3.将value="德玛西亚"删除，点击注册按钮

跟上面一样，唯一不同的是将代码中的value="德玛西亚"给删除，再次运行
页面图示
刷新页面时，可以看到输入框中的默认值没有了
我们现在什么都不输入，点击注册按钮，浏览器控制台输出图示
可以发现attr输出为undefined，其他两个什么都没有输出为：空白

我们在输入框输入“滑板鞋”，浏览器控制台图示
可以看到：attr输出为undefined，prop和val输出为滑板鞋

4.总结

prop()和val()都能获取到文本框的实际value值，而attr()获取的则始终为文档结构中的value的属性值，与文本框实际输入值无关，并不会变化
val()方法一般用在input标签上，有些人写input标签，不写value属性，但都会有输入框

手机：<input type="text" id="phone">

在这里插入图片描述

二、html方法示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试html</title>
</head>

<body>


    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button class="btn">改变 p 元素的内容</button>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

    <script>
        $('.btn').click(function () {
            $('p').html("Hello  <span style=\"color: red\">你好</span>")
        })

    </script>
</body>
</html>

1.执行上诉代码

页面显示
点击按钮时显示的页面

2.总结

html() 方法返回或设置被选元素的内容 (inner HTML)。inner HTML指的是html里面的代码
如果该方法未设置参数，则返回被选元素的当前内容（p标签元素里面的内容）。$('p').html();

如果对你有帮助，不如点个赞，也算是支持一下0.0
若有不正之处，请多多谅解并欢迎批评指正，不甚感激

参考文章：

致最长的电影

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】attr、val、prop、html方法的功能

一、attr、val、prop方法示例代码（可以直接测试）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试val、attr、prop</title></head><body> ...
复制链接

扫一扫

专栏目录