jqueryとjavascriptの違い（一般的な手法の比較）_基礎知識

jquery は JavaScript の拡張およびカプセル化であり、JavaScript をより使いやすく、よりシンプルにします。よく言われているように、jquery はより少ないコードでより多くの関数を美しく完成させます。 JavaScript と JQuery の一般的なメソッドの比較

1. DOM の読み込みの違い

JavaScript:
window.onload

function first() {
alert('first');
}
function Second(){
alert('first');
}
window.onload = first; .onload = Second;
//2 番目の window.onload のみが実行されますが、次の方法で改善できます。 🎜>2 番目() ;
}

Jquery:
$(document).ready()

$(document).ready(){
関数 first( ){
アラート('最初');
}
関数 2 番目(){
アラート('2 番目');
}
$(ドキュメント).ready(関数( ){
first();
}
$(document).ready(function(){
second();
}
//両方とも実行されます
}


2. ID を取得します


JavaScript: document.getElementById('idName')
JQuery:
$( '#idName')


3. クラスの取得


JavaScript: JavaScript にはクラスを取得するデフォルトのメソッドがありません
JQuery:
$('.className')


4. タグ名を取得します


JavaScript: document.getElementsByTagName('tagName')
JQuery :
$ ('tagName')


5. オブジェクトを作成してドキュメントに追加します


JavaScript: var para = document.createElement ('p'); //p 要素を作成します。
document.body.appendElement(para);
//ボディの最後の子ノードとして p 要素を追加します。新しく作成された p 要素を既存の要素に挿入する 要素の前に、insertBefore() メソッドを使用できます。

JQuery:
JQuery には、既存の要素 (内部) の前後に新しい要素を挿入するための 4 つのメソッドが用意されています。 )、appendTo()、prepend()、prependTo()。
形式: $(html);
例: HTML コード:

World!

$('p').append('
Hello!

');

//出力:
世界!Hello!

$('Hello!').appendTo('p'); //出力: 上記と同じ

$('p').prepend('
Hello!') //出力:
Hello!World !

$('Hello!').prependTo('p');

//出力: 上記と同じ
6. new element


JavaScript: insertBefore() 構文形式: parentElement.insertBefore(newElement,targetElement)
たとえば、段落の前に img 要素を挿入します。

HTML コード:



これはテキストです

JavaScript コード:

var imgs = document.getElementById(' imgs' );

var para = document.getElementsByTag('p');

JQuery:
JQuery は 4 種類の新しいelements 既存の要素の前または後に挿入するメソッド (外部): after()、insertAfter()、before()、insertBefore()。
形式: $(html);
例: HTML コード:

World!


JQuery コード
$('p').after('

こんにちは!

');
//出力:
世界!
こんにちは!
$('

こんにちは!

') . insertAfter ('p'); //出力: 上記と同じ $('p').before('
Hello!'); 🎜> こんにちは!
世界

$('Hello!').insertBefore('p');
//出力: 上記と同じ

7. ノード をコピーします。

JavaScript:
reference = node.cloneNode(deep)
このメソッドには Boolean パラメーターが 1 つだけあり、その値は true または false のみです。このパラメータは、コピーされたノードの子ノードも新しいノードにコピーされるかどうかを決定します。

JQuery:
clone() //ノードをコピーした後、コピーされた新しい要素は何も動作しません
clone(true) //ノードのコンテンツとそのバインドされたイベントをコピーします
備考: このメソッドは通常、appendTo()、prependTo()、および他のメソッドと組み合わせて使用​​されます。

8. ノードの削除

JavaScript:
reference = element.removeChild(node)
removeChild() メソッドは、指定された要素の子ノードから 1 つを削除します。

JQuery:
remove();
remove() メソッドは、DOM からすべての一致する要素を削除します。remove() メソッドは、他のフィルター セレクターと組み合わせて使用​​することもできます。 。
例: タイトルが "Hello" ではない ul li の下の li を削除します:
$('ul li').remove(li[title!='Hello']);
empty();
empty() メソッドはノードをクリアするために使用されます。

9. ラップ ノード

JavaScript:
JavaScript はまだ利用できません

JQuery:
wrap() // 一致する要素をラップしますwith 他の要素の構造化タグを個別にラップします
wrapAll() //一致するすべての要素を 1 つの要素でラップします
wrapInner() //一致する要素のサブコンテンツを他の構造化タグでラップします

10. 属性操作: 属性ノードの設定、属性ノードの検索

JavaScript:
document.getElementsByTagName('tagName')

JQuery:
設定およびJQuery での属性ノードの検索は両方とも attr() です。
$('p').attr('title'); //p 要素の title 属性を取得します。
$('p').attr('title','My title'); // p 要素の title 属性を設定します
$('p').attr('title':'My title','class':'myClass') // 複数の属性を追加する必要がある場合は、 「名前」:「値」のペアをカンマで区切って使用できます。

11. ノードの置換

JavaScript:
reference = element.replaceChild(newChild,oldChild)
このメソッドは、指定された親要素を次のノードに置き換えます。子ノードを別のノードに置き換えます。

JQuery:
replaceWith()、replaceAll()
例:

こんにちは

置換したい:

こんにちは

JQuery コード:
$('p') .replaceWith('

Hi

');
または次のように書くこともできます:
$('

こんにちは

').replaceAll('p');

12. CSS-DOM 操作

形式: element.style .property
CSS-DOM はスタイル オブジェクトのプロパティを読み取って設定できますが、JQuery の .css() メソッドは外部 CSS によって設定されたスタイル情報を抽出できないという欠点があります。
注: CSS に「font-size」などの「-」がある場合は、fontSize のように最初の文字を小文字にしたキャメルケースを使用します。

JQuery:
形式: $(selector).css()
要素の style 属性を取得するための css() メソッド
さらに、JQuery は height() と width も提供します() それぞれ要素の高さと幅 (単位なし) を取得するために使用され、css(height) と css(width) は単位付きの高さと幅を返します。