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>

つまり、以前の JavaScript は次の情報を提供しました:

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 インタラクティブ機能が一時停止されたアニメーションになっています。



学び続ける
||
<!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> // window.onload=function(){ // alert(1) // }; // window.onload=function(){ // alert(2) // }; // $(document).ready(function(){ // alert(1) // }); // $(document).ready(function(){ // alert(2) // }) </script> </head> <body> <div id="box">jQuery语法</div> </body> </html>