02_DOMオブジェクトとJQueryオブジェクトの違い

3480 ワード

DOMオブジェクトは、従来の方法(javascript)で得られたオブジェクトであり、jQueryオブジェクトはjQueryクラスライブラリのセレクタで得られたオブジェクトである.

var domObj = document.getElementById("id"); //DOM  
var $obj = $("#id"); //jQuery  ;

jQueryオブジェクトは、jQueryによってDOMオブジェクトがパッケージされたオブジェクトであり、jQuery独自のオブジェクトである.
1つのオブジェクトがjQueryオブジェクトである場合、jQueryのメソッドを使用することができます.例:$("#foo").html();//idがfooの要素内のhtmlコードを取得し、html()はjQuery特有の方法である.上のコードはdocumentと同じです.getElementById("foo").innerHTML;
注意:jQueryオブジェクトではDOMオブジェクトのメソッドは使用できません.例えば$("#id")である.innerHTMLと$("#id").checkedとかの書き方が間違っていて、
$("#id")を使うことができます.html()と$("#id").attr(「checked」)のようなjQueryメソッドに置き換えられる.
同様に、DOMオブジェクトでもjQueryメソッドは使用できません.

jQueryオブジェクトとDOMオブジェクトの相互変換
1 jqueryは、1つのjqueryオブジェクトをdomオブジェクト、すなわち[index]およびget(index)に変換する2つの方法を提供する.

var $cr=$("#cr"); //jquery  
var cr = $cr[0]; //dom        var cr=$cr.get(0);
alert(cr.checked); //    checkbox

2 domオブジェクトをjqueryオブジェクトに変換

var cr=document.getElementById("cr"); //dom  
var $cr = $(cr); //   jquery

ps:通常使用するjqueryオブジェクトは$()関数によって製造され、$()関数はjqueryオブジェクトの製造工場である.推奨:取得したオブジェクトがjqueryオブジェクトである場合、変数の前に$を追加すると、jqueryオブジェクトとは何かを容易に識別できます.

========================================================
jQuery方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-6-1</title>
<!--    jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//  dom      .
$(document).ready(function(){
	var $cr = $("#cr");  //jQuery  
	$cr.click(function(){
		if($cr.is(":checked")){ //jQuery    
			alert("      !       ！");
		}
	})
});
</script>
</head>
<body>
<input type="checkbox" id="cr"/><label for="cr">          .</label>
</body>
</html>

DOM方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-6-2</title>
<!--    jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//  dom      .
$(document).ready(function(){
	var $cr = $("#cr");  //jQuery  
	var cr = $cr.get(0); //DOM  ，   $cr[0]
	$cr.click(function(){
		if(cr.checked){ //DOM    
			alert("      !       !");
		}
	})
});
</script>
</head>
<body>
<input type="checkbox" id="cr"/> <label for="cr">          .</label>
</body>
</html>

jQueryパッケージ解析データ(配列,jsonオブジェクト)

c言語構造体における定義関数