jQueryの構文
jQuery を使用すると、HTML 要素を選択 (クエリ) し、それらに対して「アクション」を実行できます。
jQuery構文
jQueryプログラムでは、ページ要素の選択であっても、組み込み関数であっても、すべてドル記号「$」で始まり、この「$」がjQueryです。その中で最も重要でユニークなオブジェクト: jQuery オブジェクトなので、ページ要素を選択したり関数関数を実行したりするときは、次のように書くことができます:
$(function(){}); //执行一个匿名函数
$('#box'); //进行执行的ID元素选择
$('#box').css('color','red'); //执行函数功能
"$" 自体は jQuery オブジェクトの略語であるため、つまり、上記のコードは次の形式で記述できます:
jQuery(function(){});
jQuery('#box');
jQuery('#box').css('color','red');
Instance
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script> $(function(){ $('#box').css('color','red'); }); // alert($===jQuery); </script> </head> <body> <div id="box">jQuery语法</div> </body> </html>
jQuery読み込みモード
$(function(){}); を使用しています。前のコードでは、このコードは最初と最後をラップする理由を知っていますか?
その理由は、jQuery ライブラリ ファイルが body 要素の前に読み込まれるためです。そうしないと、
インスタンスを取得できません。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$('#box').css('color','red');
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>
window.onload=function(){}; //JavaScript等待加载
jQuery は次の情報を提供しました:
$(document).ready(function(){}); //jQuery等待加载
2 つの違い:
1.実行タイミングwindow.onload: パッケージ コードを実行する前に、Web ページ (画像を含む) が読み込まれるまで待つ必要があります。
$(document).ready(function(){}): ラップされたコードを実行する前に、Web ページ内の DOM 構造がロードされるのを待ちます。効果は高くなります
2. 実行回数window.onloadは2回目に実行すると上書きされます
$。 (document ).ready(function(){}): 何度実行しても上書きされません
$(document).ready(function(){ }) $(function (){});
実際のアプリケーションでは、JS コードを実行する前に画像などの大きな要素がロードされるまで待機する必要があるため、window.onload を直接使用することはほとんどありません。ネットワーク速度が遅いと、ページが完全にロードされてしまいます。展開すると、画像の読み込みがまだ遅くなります。この時点では、一部のドロップダウン メニューなど、ページ上のすべての JS インタラクティブ機能が一時停止されたアニメーションになっています。