Question

我有这个jQuery代码，可以放在.HTML文件的<body>和</body>标记之间。

我想将此JavaScript用作外部JavaScript而不是内部JavaScript。只有当JavaScript放在</body>标记之前的末尾时，它才有效。
如果我将JavaScript放在<head></head>中，它也不起作用。

所以我需要帮助让这个JavaScript代码在外部运行。

如果将此代码放在外部.js文件中，该如何修改？
如何调用onLoad上的代码？

HTML

<html>
<head>
<style>
   .blue1 {background: green;}
   .red {background: red;}
   .orange {background: orange;}
   .yellow {background: yellow;}
</style>
</head>
<body>
<table border="2px solid black">/*border*/
<tr>
    <td colspan="1">
        <p class="Hello_blue1">Hello Stack Overflow1</p>
    </td>
    <td rowspan="1" colspan="2">
        <p class="Tab-Text-7-aufz_red">Hello Stack Overflow2</p>
        <p class="Tab-Text-7_red">defines red color,that class want to apply 
    to</p>
    </td>
    <td rowspan="1" colspan="1">
        <p class="Hello_orange">Hello Stack Overflow3</p>
    </td>
     <td rowspan="1" colspan="1">
        <p class="Tab-Text-7_yellow">Hello Stack Overflow3</p>
    </td>
</tr>
</table>

我想用作External.js的JavaScript

<script>
// convert "Hello_blue" to "blue"
function convertClassName(src) 
{
    return src.replace(/^.*?_/, "");
}

var pTags = document.querySelectorAll("table p");
for (var i = 0; i < pTags.length; i++) 
{
     pTags[i].parentNode.className += " " 
         + convertClassName(pTags[i].className);
}

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

Answer 1

创建一个名为script.js的新文件（与HTML相同的文件夹），其中包含以下内容：

function convertClassName(src) {
    return src.replace(/^.*?_/, "");
}

var pTags = document.querySelectorAll("table p");
for (var i = 0; i < pTags.length; i++) {
    pTags[i].parentNode.className += " " + convertClassName(pTags[i].className);
}

将其保留在HTML中：

<html>
<head>
<style>
.blue1 {background: green;}
.red {background: red;}
.orange {background: orange;}
.yellow {background: yellow;}
</style>
</head>
<body>
<table border="2px solid black">/*border*/
<tr>
    <td colspan="1">
        <p class="Hello_blue1">Hello Stack Overflow1</p>
    </td>
    <td rowspan="1" colspan="2">
        <p class="Tab-Text-7-aufz_red">Hello Stack Overflow2</p>
        <p class="Tab-Text-7_red">defines red color,that class want to apply 
    to</p>
    </td>
    <td rowspan="1" colspan="1">
        <p class="Hello_orange">Hello Stack Overflow3</p>
    </td>
     <td rowspan="1" colspan="1">
        <p class="Tab-Text-7_yellow">Hello Stack Overflow3</p>
    </td>
</tr>
</table>
<script src="./script.js"></script>
</body>
</html>

Answer 2

是的，您可以创建扩展名为.js的新文件，并将代码粘贴到该文件中。然后只需编写一个像<script type="text/javascript" src="your path"> </script>一样的代码。

Answer 3

使用＆＃34; onload＆＃34;功能并将其链接到＆＃34; body＆＃34;元件。

<body onload="myFunction()">

一旦页面加载

，

myFunction（）就会启动

或者你可以使用这个

            $( document ).ready(function() {

                $( "a" ).click(function( event ) {

                    alert( "You clicked !!!" );

                });

            });

如何将此jQuery代码放在外部.js文件中？

HTML

3 个答案: