jsとjQueryのDOM操作の比較(二)

1、属性の設定
1)DOMでsetAttribute()メソッドを使用して要素属性を設定します.具体的な使い方は以下のとおりです.
   elementNode.setAttribute(name,value)elementNodeは要素ノードを表し、パラメータは設定された属性名を表し、valueは設定するertyName値を表す.
2)jQueryは、要素の属性値を設定する2つの方法:prop()とattr()を定義します.以下では、具体的に説明します.
propメソッド:prop()は、一致する要素に1つ以上のプロパティを設定できます.具体的な方法は以下の通りです.
prop(propertyName,value)
prop(map)
prop(propertyName,function(index,oldPropertyValue))function()は、戻り値を設定するための関数です.
attr()メソッド:attr()は、一致する要素に1つ以上のプロパティを設定することもできます.具体的な方法は以下の通りです.
attr(propertyName,value)
attr(map)
attr(propertyName,function(index,oldPropertyValue))function()は、戻り値を設定するための関数です.
次はDOMとjQueryでのコードの違いです.
(1)

	window.οnlοad=function(){
		var span=document.getElementsByTagName('span');
		p.setAttribute("color","red");
	}

(2)

	$(function(){						
			$input("[checked='checked']").prop({
				disabled.true
				});
		})


	$(function(){
		$("img").attr("src",function(index){
			return "images/dex("+(index+1)+").png";
			})
	})

2、アクセス属性
1)DOM定義getAttribute()メソッドを使用して、要素の属性にアクセスし、属性の値を取得します.具体的な使い方は以下の通りです.
elementNode.getAttribute(name)
2)jQueryは、要素属性値にアクセスするための2つの方法:prop()とattr()を定義します.
どちらのメソッドも、jQueryオブジェクトの最初の一致する属性値のみを取得します.エレメントのプロパティが設定されていない場合、または一致するエレメントがない場合、このメソッドはundefined値を返します.各要素の個別の値のために循環構造のjQueryを用いることができる.each()または.map()メソッドを1つずつ読み取ります.次は簡単な列を挙げて、皆さんの理解を助けます.

$(function(){
	$("input").change(function(){
		var $input = $(this);
		$("p").html(".attr('checked') = <b>" + $input.attr('checked') + "</b><br>"
				  + ".prop('checked') = <b>" + $input.prop('checked') + "</b><br>"
				  + ".is(':checked') = <b>" + $input.is(':checked') );
	}).change();

})

プレゼンテーションの効果は次のとおりです.
.attr('checked') = checked.prop('checked') = true.is(':checked') = true
3、属性の削除
1)DOM定義removeAttribute()メソッドを使用して、指定した要素属性を削除します.具体的には、次のようになります.
elementNode.removeAttribute(name)
2)jQueryはremoveProp()メソッドとremoveAttr()メソッドの両方で指定した要素属性を削除できることを定義しています.具体的な方法は以下のとおりです.
removeProp(propertyName)、removeAttr(attributeName)
removeProp()メソッドは、主にprop()メソッドで設定された属性値を削除するために使用されます.removeAttr()メソッドの使用
DOM
元のremoveAttribute()メソッドは、jQueryオブジェクトアクセスによって呼び出され、ブラウザ互換性に優れているという利点があります.