jQuery学习二-设置

最新推荐文章于 2021-06-04 13:25:22 发布

Mr丶M

最新推荐文章于 2021-06-04 13:25:22 发布

阅读量294

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_34390576/article/details/78236604

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery中有很多提供给我们修改html中的内容，这里简单说一下简单的修改。
其实使用的方法和捕获的方法是一样的，但是那里是用来获取内容，这里是用修改内容。

下面用代码来说明吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
    <p id="p1">hello world</p>
    <button id="btn1">setting</button>
</body>
</html>

js.代码

$(document).ready(function () {
    $("#btn1").click(function () {
       $("#p1").text("Hello World");
    });
});

大家学习过javascript的话会发现用jQuery来修改的代码比javascript的少很多。同样.text方法的使用和捕获是一样的，只是.text()里面增加了要修改的内容而已。

下面说一下.html()的方法的使用，如果上面的.text()方法只能修改文本内容和增加文本内容的话，那.html()就能修改内容而且里面还能添加上标签语句。
下面看代码(布局代码不变)：

$(document).ready(function () {
    $("#btn1").click(function () {
       $("#p1").html("<a href='www.baidu.com'>百度</a>")
    });
});

执行可以看到p标签里面的hello world 换成了一个a标签并且带有一个超链接。

如果你想修改输入框的内容也是可以的，这里就需要用到了.val()的方法。

下面用代码说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
    <input type="text" id="text" value="hello world">
    <button id="btn1">setting</button>
</body>
</html>

$(document).ready(function () {
    $("#btn1").click(function () {
        $("#text").val("test success");
    });
});

执行的结果是输入框的内容变成了“test success”
上面的几个方法只是对元素进行了修改，下面说一下对元素的属性来进行修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
    <a id="attr" type="text" href="www.baidu.com" title="hello world">测试</a>
    </br>
    <button id="btn1">setting</button>
</body>
</html>

js的代码

$(document).ready(function () {
    $("#btn1").click(function () {
        $("#attr").attr({
            "href":"http://123sogou.com",
            "title":"test success"
        });
    });
});

执行完成以后你可以通过查看网页的源代码来判断是否执行成功。如果成功则title和href都会发生变化。

Mr丶M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习二-设置

jQuery中有很多提供给我们修改html中的内容，这里简单说一下简单的修改。其实使用的方法和捕获的方法是一样的，但是那里是用来获取内容，这里是用修改内容。下面用代码来说明吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script src="jque
复制链接

扫一扫