jQuery、JavaScript、JS の違いを 2 分で理解する

jQuery、JavaScript、および JS

JavaScript の違いを 2 分で理解します。私たちの生活の中で頻繁に登場するjQueryとJSですが、両者の共通点と相違点は何かご存知ですか？以下で 2 分かけてそれらについて学びましょう。

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定位 
$("p") 通过标签定位

注: 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 p = document.getElementByID("one");

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

例:

var p = $("#one");

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

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

JQUERY:

例:

var p = $(".test");

3.名前に基づいて要素を取得します JS: 配列を返します
例:

var bd = document.getElementsByName(uid);

JQUERY: このメソッドは角かっこを使用し、属性 = 値を取得します。名前に基づいて値を取得し、JQUERY は属性に基づいて要素を取得します

例:

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

4. タグ名に基づいて要素を取得します JS: 戻り値も配列です
例:

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

JQUERY: And style テーブル内のすべての p にスタイルを追加する方法は同じです ダブルクォート内に直接タグ名を記述します

例:

$("p");

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

#操作内容

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

例: 1.1. がある場合パラメータがない場合、値は

p.text();

p.html();
1.2 です。パラメータがある場合は、値が割り当てられます
p.text("aaaa");
p.html("aaaa");

2. フォーム要素

JS: 2.1. 値の取得 p.value;
2.2. 割り当てvalue
p.value = 'xxx';
JUQERY：
2.3. 値の取得
p.val() ;
3.4. 代入
p.val('xxx') ;


操作属性

JS 操作属性

属性の設定 | 変更:

p.setAttribute("","");

属性の削除

p.removeAttribute("");

属性の取得

p.getAttribute();

JQUERY で使用される属性の操作メソッド

属性の追加:

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

属性の削除:

p.removeAttr("width");

属性の取得:

p.attr("width");

操作样式
JS操作样式-关键字是[style]
例：

p.style.backgroundColor = "red";

JQUERY里面操作样式的关键字是css
例：

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

——把这个p的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
JQUERY操作样式的方法可以是内联的也可以是内嵌的

感谢大家的阅读，希望大家收益多多。

本文转自：https://blog.csdn.net/dalei9243/article/details/79804789

推荐教程：《JS教程》

 

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