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

Question

我有这个 jQuery 代码，当它放在 .HTML 文件的 <body> 和 </body> 标签之间时工作正常。

我想将此 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>

JavaScript 我想用作 External.js

<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

创建一个新文件（与您的 HTML 在同一文件夹中），例如 script.js，其中包含以下内容：

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 的新文件，然后将您的代码粘贴到该文件中。然后只需在 head.

中写一段代码，例如 <script type="text/javascript" src="your path"> </script>

Answer 3

使用了 "onload" 功能并将其 link 用于 "body" 元素。

<body onload="myFunction()">

myFunction() 将在页面加载后启动

或者你可以使用这个

            $( document ).ready(function() {

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

                    alert( "You clicked !!!" );

                });

            });

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

How do I put this jQuery code in an external .js file?

html

javascript

html-table

HTML