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

烟雨青岚
リリース: 2020-06-22 13:44:23
転載
3171 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート