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

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

创建一个新文件（与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的新文件，并将代码粘贴到该文件中。 然后，只需在头中编写<script type="text/javascript" src="your path"> </script>的代码即可。

Answer 3

使用了“ onload”功能并将其链接到“ body”元素。

<body onload="myFunction()">

页面加载后，myFunction（）将启动

或者你可以用这个

            $( document ).ready(function() {

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

                    alert( "You clicked !!!" );

                });

            });

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

问题描述

HTML

3 个解决方案

解决方案1
1 已采纳 2015-06-04 17:56:30

解决方案2
0 2015-06-04 17:59:06

解决方案3
0 2015-06-04 22:12:48

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

问题描述

HTML

3 个解决方案

解决方案1 1 已采纳 2015-06-04 17:56:30

解决方案2 0 2015-06-04 17:59:06

解决方案3 0 2015-06-04 22:12:48

解决方案1
1 已采纳 2015-06-04 17:56:30

解决方案2
0 2015-06-04 17:59:06

解决方案3
0 2015-06-04 22:12:48