Question

我正在动手：在Microsoft Dev211.1中引入HTML和JavaScript，使用JQuery操作DOM。此代码应该更新html中的H1和H3元素。与指令中的内容相比，我已经查看了代码，但我无法使用它。这是我的代码：

 <!DOCTYPE html>
 <html lang="en-US">
    <head>
       <title>HTML Page</title>
       <script type="text/javascript" src="https://code.jquery.com/jquery-   2.2.2.min.js"></script>
       <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <h1>H1 Header</h1>
        <hr />
        <h3>H3 Header</h3>
        <hr />
        <h3>Another H3 Header</h3>
    </body>
</html>

//JavaScript Code
$(document).ready(function () {
    manipulateDOM();
});

function manipulateDOM() {
    var h1Headers = $('h1');
    var h3Headers = $('h3');
}

 h1Headers.text('Hello World');
 h3Headers.css('color', '#37887D');
 h3Headers.first().css('text-decoration', 'line-through');

Answer 1

您需要将JavaScript代码放在<script></script>标记内才能生效。并在关闭html标签之前放置它。

 <!DOCTYPE html>
 <html lang="en-US">
    <head>
       <title>HTML Page</title>
       <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
       <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <h1>H1 Header</h1>
        <hr />
        <h3>H3 Header</h3>
        <hr />
        <h3>Another H3 Header</h3>
    </body>
    <script type="text/javascript">
//JavaScript Code
$(document).ready(function () {
    manipulateDOM();
});

function manipulateDOM() {
    var h1Headers = $('h1');
    var h3Headers = $('h3');
 h1Headers.text('Hello World');
 h3Headers.css('color', '#37887D');
 h3Headers.first().css('text-decoration', 'line-through');
}

</script>
</html>

还会从https://code.jquery.com/jquery- 2.2.2.min.js中移除空格，从而使其成为https://code.jquery.com/jquery-2.2.2.min.js

也是你的

 h1Headers.text('Hello World');
 h3Headers.css('color', '#37887D');
 h3Headers.first().css('text-decoration', 'line-through');

应该进入函数内部。

因此使您的功能看起来像：

function manipulateDOM() {
    var h1Headers = $('h1');
    var h3Headers = $('h3');
         h1Headers.text('Hello World');
    h3Headers.css('color', '#37887D');
    h3Headers.first().css('text-decoration', 'line-through');
}

可以在这里看到正在运行的演示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>H1 Header</h1>
            <hr />
            <h3>H3 Header</h3>
            <hr />
            <h3>Another H3 Header</h3>
        <script type="text/javascript">
    //JavaScript Code
    $(document).ready(function () {
        manipulateDOM();
    });
    
    function manipulateDOM() {
        var h1Headers = $('h1');
        var h3Headers = $('h3');
             h1Headers.text('Hello World');
     h3Headers.css('color', '#37887D');
     h3Headers.first().css('text-decoration', 'line-through');
    }
    </script>

Answer 2

除了Shakti的答案，你可以改变manipulateDOM（）函数来接受参数，这样你就可以在不同的地方使用它。

    $(document).ready(function () {
        var h1_header = $('h1');
        var h3_header = $('h3');
      
      manipulateDOM(h1_header,h3_header);
    });


    function manipulateDOM(h1Headers, h3Headers) {
     h1Headers.text('Hello World');
     h3Headers.css('color', '#37887D');
     h3Headers.first().css('text-decoration', 'line-through');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body>
            <h1>H1 Header</h1>
            <hr />
            <h3>H3 Header</h3>
            <hr />
            <h3>Another H3 Header</h3>
        </body>

使用JQuery操纵DOM时遇到问题

2 个答案: