jQuery ジュリーとネイティブ js の違い

先ほど js の基本をいくつか学びました。次の jquery を見てみましょう

jquery オブジェクトと DOM オブジェクトは異なります

例を通して 2 つの違いを説明しましょう

、ネイティブ コードを使用します。js ネイティブ コードは次のとおりです:

var div = document.getElementById('dv');
div.innerHTML="php Chinese website";

上記のコードはネイティブ DOM モデルによって提供されます。 document.getElementById(「dv」によって取得された DOM 要素) メソッドは DOM オブジェクトであり、テキストは innerHTML を通じて処理されます。

以下の jquery コードを見てみましょう

$(function(){

var div = $('#dv');

div.html("php Chinese website");

});

$('#dv') メソッドは、配列のようなオブジェクトである $p の jQuery オブジェクトを取得します。このオブジェクトには DOM オブジェクトの情報が含まれており、独自のメソッド html および css を呼び出して、多くの操作メソッドをカプセル化します。得られる効果は、標準の JavaScript 処理結果と一致します。

標準JavaScriptによるDOM操作とjQuyerによるDOM操作の比較

1. jQueryメソッドでラップされたオブジェクトは配列のようなオブジェクトです。 DOM オブジェクトとはまったく異なります。唯一の類似点は、両方とも DOM を操作できることです。

2. jQuery を介して DOM 操作を処理すると、開発者はどの DOM ノードにそれらのメソッドがあるかを具体的に知る必要がなく、さまざまなブラウザーの互換性の問題を気にする必要もありません。開発に jQuery が提供する API を使用すると、コードがより合理化されます。


学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery</title> <style type="text/css"> #dv{ width:150px; height:150px; border:1px solid red; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> // window.onload=function(){ // var div = document.getElementById('dv'); // div.innerHTML="php 中文网"; // } $(function(){ var div = $('#dv'); div.html("php中文网"); }); </script> </head> <body> <div id="dv"></div> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜