jQueryの構(gòu)文
jQuery を使用すると、HTML 要素を選択 (クエリ) し、それらに対して「アクション」を?qū)g行できます。
jQuery構(gòu)文
jQueryプログラムでは、ページ要素の選択であっても、組み込み関數(shù)であっても、すべてドル記號(hào)「$」で始まり、この「$」がjQueryです。その中で最も重要でユニークなオブジェクト: jQuery オブジェクトなので、ページ要素を選択したり関數(shù)関數(shù)を?qū)g行したりするときは、次のように書くことができます:
$(function(){})； //執(zhí)行一個(gè)匿名函數(shù)$('#box'); //進(jìn)行執(zhí)行的ID元素選擇$('#box').css('color','red'); //執(zhí)行函數(shù)功能"$" 自體は 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 は次の情報(bào)を提供しました:
$(document).ready(function(){}); //jQuery等待加載2 つの違い:
1.実行タイミングwindow.onload: パッケージ コードを?qū)g行する前に、Web ページ (畫像を含む) が読み込まれるまで待つ必要があります。
$(document).ready(function(){}): ラップされたコードを?qū)g行する前に、Web ページ內(nèi)の DOM 構(gòu)造がロードされるのを待ちます。効果は高くなります
2. 実行回?cái)?shù)window.onloadは2回目に実行すると上書きされます
$。 (document ).ready(function(){}): 何度実行しても上書きされません
$(document).ready(function(){ }) $(function (){});
実際のアプリケーションでは、JS コードを?qū)g行する前に畫像などの大きな要素がロードされるまで待機(jī)する必要があるため、window.onload を直接使用することはほとんどありません。ネットワーク速度が遅いと、ページが完全にロードされてしまいます。展開すると、畫像の読み込みがまだ遅くなります。この時(shí)點(diǎn)では、一部のドロップダウン メニューなど、ページ上のすべての JS インタラクティブ機(jī)能が一時(shí)停止されたアニメーションになっています。
