jQuery をすぐに始める: jQuery の記述と JS の直接記述の違いの詳細な分析

jQuery をすぐに始める: jQuery の記述と JS の直接記述の違いの詳細な分析_jquery

WBOY

リリース： 2016-05-16 17:24:25

オリジナル

1096 人が閲覧しました

jQuery を使用するには、まず HTML コードの先頭に jQuery ライブラリへの参照を追加する必要があります (

ライブラリファイルはローカルに配置することも、有名企業の CDN を直接使用することもできます。その利点は、ユーザーが Web サイトにアクセスする前に、これらの大企業の CDN の方が人気があることです。他の Web サイトにアクセスするとブラウザにキャッシュされるため、Web サイトを開く速度が向上します。もう 1 つの利点は明らかで、Web サイトのトラフィック帯域幅を節約できます。

一般的な操作を実行する場合の jQuery コードの具体的な記述方法とネイティブ Javascript の記述方法の違いは次のとおりです。

1 配置要素
JS document.getElementById("abc")

jQuery

$("#abc") ID によって配置
$(".abc") クラスによって配置
$("div") タグによって配置

JS によって返される結果はこの要素であり、jQuery によって返される結果は JS オブジェクトであることに注意してください。次の例では、要素 abc が配置されていると想定しています。

2
JS abc.innerHTML = "test";
jQuery
abc.html("test"); の内容を変更します。

3 非表示の要素を表示します

JS
abc.style.display = "none"; abc.style.display = "block";
jQuery
abc.hide();

abc.show();

abc.toggle();
//表示・非表示を切り替える(2012.4.21更新)

4 フォーカスの取得

JS と jQuery は同じで、両方とも abc.focus();

5 フォームに値を代入します。
JS

abc.value = "test";

jQuery abc.val("test");
6

JS
alert(abc.value);

jQuery

alert(abc.val()); の値を取得します。
7 設定要素は使用できません
JS
abc.disabled = true;
jQuery

abc.attr("disabled", true);

8 要素のスタイルを変更します
JS
abc.style.fontSize=size;
jQuery

abc.css('font-size', 20);

JS
abc.className="test";JQuery
abc.removeClass();
abc.addClass("test");

9 Ajax

JS
オブジェクトを自分で作成し、ブラウザの互換性やその他の厄介な問題を自分で処理し、省略します
jQuery

$.get("abc.php ?a=1&b=2", 思い出してください);

postvalue = "a=b&c=d&abc=123";$.post("abc.php", postvalue, 思い出してください);
function remember(result) {
alert(result);
//json が返された場合は次のように処理します
//result = eval('(' result ')'); >//alert(結果);
}

10 チェックボックスがチェックされているかどうかを判断します

jQuery
if(abc.attr("checked") == "checked")