ホームページ > 記事 > ウェブフロントエンド > Web ページで JS 関数を自動実行するためによく使用される 3 つの方法_JavaScript スキル
Web ページで JS 関数を自動実行するためによく使用される 3 つの方法_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:07:331375ブラウズ
この記事では、Web ページ上で JS 関数を自動的に実行するための一般的な方法を紹介します。具体的な内容は次のとおりです。
1. JS メソッド
1. 呼び出す最も簡単な方法は、HTML の body タグに直接書き込むことです:
<body onload="myfunction()"> <html> <body onload="func1();func2();func3();"> </body> </html>
2. JS ステートメントを呼び出します:
<script type="text/javascript">
function myfun()
{ alert("this window.onload"); } /*用window.onload调用myfun()*/
window.onload = myfun;//不要括号
</script>
3 番目のタイプ
<script type="text/javascript">
window.onload=function(){
func1();
func2();
func3(); }
</script>
2. JQ メソッド
1. ページ全体のすべてのドキュメントが読み込まれてから実行します。残念ながら、この方法では、ページの DOM ツリーが完全にロードされている必要があるだけでなく、すべての外部イメージとリソースがロードされている必要もあります。さらに残念なことに、画像などの外部リソースの読み込みに時間がかかると、この js メソッドの実行が遅く感じられることです。つまり、これはページが読み込まれた後にメソッドを実行する最も厳密な方法です。
window.onload =function() { $("table tr:nth-child(even)").addClass("even"); //これは jquery コードです};
2. ブラウザーがすべての HTML を DOM ツリーに配置する前に、すべての DOM 構造をロードしてメソッドを実行します。外部の画像とリソースをロードする前に組み込まれます。
$(document).ready(function() { $("table tr:nth-child(even)").addClass("even"); //実行する必要がある任意の js 特殊効果});
略語もあります
$(function() { $("table tr:nth-child(even)").addClass("even"); //実行する必要がある任意の js 特殊効果 });
Web ページ上で JS 関数を自動的に実行するための 3 つの一般的な方法
HTML の Head 領域には次の関数があります:
<SCRIPT LANGUAGE="JavaScript">
functionn MyAutoRun()
{
//以下是您的函数的代码，请自行修改先！
alert("函数自动执行哦！");
}
</SCRIPT>
次に、上記の関数に焦点を当て、Web ページが読み込まれたときに自動的に実行されるようにします。
①最初の方法
上記のコードを次のように変更します:
<SCRIPT LANGUAGE="JavaScript">
functionn MyAutoRun()
{
//以下是您的函数的代码，请自行修改先！
alert("函数自动执行哦！");
}
window.onload=MyAutoRun(); //仅需要加这一句
</SCRIPT>
②2番目の方法
Web ページの本文を次のように変更します:
または次のように変更します:
③3番目の方法
JS タイマーを使用して関数を断続的に実行します:
setTimeout("MyAutoRun()",1000) //MyAutoRun() 関数を 1000 ミリ秒ごとに実行します
実装方法は、先頭の JS 関数を次のように変更します。
<SCRIPT LANGUAGE="JavaScript">
functionn MyAutoRun()
{
//以下是您的函数的代码，请自行修改先！
alert("函数自动执行哦！");
}
setTimeout("MyAutoRun()",1000); //这样就行拉
</SCRIPT>
他の方法はより特殊で、一般的には使用されず、汎用性も低いため、紹介しません。
上記では、JS 関数を自動実行する一般的な方法を紹介しました。学習に役立つことを願っています。