jQuery、JavaScript、JS の違いについて話しましょう

JavaScript: ブラウザーで一般的なスクリプト言語であり、Web ページのダイナミクスやバックエンド (データベース) との対話を実現するために使用されます。

jQuery: JavaScriptと統合されたクラスライブラリであり、jQueryを動作させることでネイティブJavaScript文の使用を減らし、効率化が図れます。

JS:JavaScriptの略称です。

相違点の概要:

1. JQuery は JavaScript を大幅に簡素化し、最小限のコードでより多くの関数を最大限に完成させるという困難なタスクを達成します。

2. JavaScript は DOM を 1 回だけ読み込みますが、JQuery は DOM を複数回読み込みます。

3. DOM を操作するには JQuery の方が便利です。ノード取得など。例: $()

説明: ネイティブ JavaScript とカプセル化された JQuery の理解を向上させる最も直接的な方法は、ページに JQuery を導入せずに、基本的なフロントエンドとバックエンドの対話を実現することです。

次の内容は、jQuery と JS の違いを理解するためにまとめられた概要です:

jQuery とネイティブ Javascript の記述方法:

1 要素の配置

JS:

document.getElementById("abc")

jQuery:

$("#abc") 通过id定位 
$(".abc") 通过class定位 
$("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();         //在显示和隐藏之间切换、

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 チェック ボックスがオンになっているかどうかを確認します

jQuery

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

注: オンラインで .attr("checked") == true と言われているものは、実際には使用できません。上記のものはテストされており、動作します。

JS と JQUERY

1 の違い . ID に基づいて要素を取得する

JS: 取得するのは DOM オブジェクトです。

例:

var div = document.getElementByID("one");

JQUERY: 取得されるのは JQUERY オブジェクトです。

例:

var div = $("#one");

2. クラスに従って要素を取得 [配列の場合、DOMオブジェクトを取得したい場合はindexメソッドを使用し、JQUERYオブジェクトを取得したい場合は、 use eq()]

JS: 取得されるのは配列です

例:

var div = document.ElementsByClassName("test");

JQUERY:

例:

var div = $(".test");

3. 名前に基づいて要素を取得します

JS: 配列を返します

例:

var bd = document.getElementsByName(uid);

JQUERY: この方法では、角括弧を使用し、属性 = 値を指定します。名前に基づいて値を取得することに制限はありません。JQUERY 要素は属性に基づいて取得されます

例:

$("[name='uid']");

4. 要素はタグ名に基づいて取得されます

JS:返される配列も配列です

例:

var div = document.getElementsByTagName("div");

JQUERY: スタイル シート内のすべての div にスタイルを追加するのと同じ方法で、タグ名を二重引用符で囲んで直接記述します

例:

$("div");

例: サブディレクトリ要素オブジェクトを指定 Get: var div = $("div span"); ・組み合わせ方法は多数あり

操作内容

1. 非フォーム要素 (テキストの場合は text メソッドを使用、html コードの場合は html メソッドを使用)

例:

1.1.パラメータがない場合は

div.text();
div.html();

1.2 パラメータがある場合は assign

div.text("aaaa");
div.html("aaaa");

2. フォーム要素

JS：

2.1 . 値

div.value;

2.2. 代入

div.value = 'xxx';
JUQERY：

2.3. 値

div.val();

3.4. 代入

div.val('xxx');

操作属性

JS 操作属性

設定 | 属性の変更:

div.setAttribute("","");

属性の削除

div.removeAttribute("");

属性の取得

div.getAttribute();

JQUERY で属性を操作するために使用されるメソッド

属性の追加:

div.attr("width","20%");

属性の削除:

div.removeAttr("width");

属性の取得:

div.attr("width");

操作スタイル

JS 操作スタイルのキーワードは [style]

例:

div.style.backgroundColor = "red";

JQUERY の操作スタイルのキーワードは css

です例:

div.css("background-color","yellow");

——この div の背景色を変更します。黄色に変わります。ここでの CSS 内のすべてのスタイルは、何も変更せずに CSS スタイル シート内のスタイルとまったく同じです。
スタイルを操作する JS メソッドはインライン スタイルのみを取得でき、埋め込みスタイルは取得できません。 ！ ！ ！ ！

JQUERY のスタイル操作方法は、インラインでも埋め込みでも可能です

皆さん、読んでいただきありがとうございます。多くの利益が得られることを願っています

この記事は https://blog から転載しています。 csdn .net/dalei9243/article/details/79804789

推奨チュートリアル: "JS チュートリアル "

以上がjQuery、JavaScript、JS の違いについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。