jQuery的html()、text()、val()方法

最新推荐文章于 2021-06-26 02:02:33 发布

cb++

最新推荐文章于 2021-06-26 02:02:33 发布

阅读量232

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44768794/article/details/109118032

版权

html()
- html的使用
text()
- text()的使用
val()
- val()的使用
- - 批量操作

html()

它可以设置和获取起始标签和结束标签的内容和dom属性的innerHTML一样

html的使用

不加参数是获取，加参数是设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    导入jQuery-->
    <script type="text/javascript" src="../jQuery.js"></script>
    <script type="text/javascript">
        $(function (){
            //html()不传参数，是获取内容。传递参数是设置
            alert($("div").html());    //获取内容
            $("div").html("<h1>我是div中的标题 222</h1>")    //设置
        })

    </script>
</head>
<body>
<div>我是div标签 <span>我是div中的span</span></div>
</body>
</html>

不传参
在这里插入图片描述
传参

text()

他可以设置和获取起始标签和结束标签的文本和dom对象的innerText一样

text()的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    导入jQuery-->
    <script type="text/javascript" src="../jQuery.js"></script>
    <script type="text/javascript">
        $(function (){
            alert($("div").text());    //获取文本
            $("div").text("<h1>我是div中的标题 222</h1>")    //设置文本内容
        })
    </script>
</head>
<body>
<div>我是div标签 <span>我是div中的span</span></div>
</body>
</html>

在这里插入图片描述

可以比较text()与html()编译出来的区别

val()

他可以设置和获取表单项中的value属性值和dom对象value一样
== val()方法可以设置多个表单项的选中状态==

val()的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    导入jQuery-->
    <script type="text/javascript" src="../jQuery.js"></script>
    <script type="text/javascript">
        $(function (){
            $("button").click(function (){
                alert($("#username").val());
                $("#username").val("魔镜魔镜，谁最美丽");
            });
        });

    </script>
</head>
<body>
    <div>我是div标签 <span>我是div中的span</span></div>
    <input type="text" name="username" id="username">
    <button>输入框</button>
</body>
</html>

在这里插入图片描述

批量操作

1.批量操作单选

$(":属性名").val([“value名”]);

2.批量操作复选

$(":属性名").val([“value名1”,“value名2”]);

下拉框与上述操作相同

3.总写

$(":属性名1":“属性名2”:“属性名n”).val([“value名1”,“value名2”,“value名n”])

cb++

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的html()、text()、val()方法

html()html的使用text()text()的使用val()html()它可以设置和获取起始标签和结束标签的内容和dom属性的innerHTML一样html的使用不加参数是获取，加参数是设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 导入jQuer.
复制链接

扫一扫