ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryコード記述とネイティブjs記述の違いを詳しく解説

jqueryコード記述とネイティブjs記述の違いを詳しく解説

伊谢尔伦
伊谢尔伦オリジナル
2017-06-19 11:19:391658ブラウズ

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

<script language="javascript" src="/js/jquery.min.js"></script>

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

jquery コードの記述とネイティブ js の記述の違いは次のとおりです:

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.show();

abc.toggle();

//表示と非表示を切り替えます

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", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);
function recall(result) {
alert(result);
//如果返回的是json,则如下处理
//result = eval(&#39;(&#39; + result + &#39;)&#39;); 
//alert(result);
}

10.

チェックボックス

が選択されているかどうかを判断しますjQueryif(abc.attr("checked") == "checked")

以上がjqueryコード記述とネイティブjs記述の違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。