第三章jQuery操作DOM

29480 ワード

JavaScript html 基礎 object

DOM(Document Object Model、ドキュメントオブジェクトモデル)は、ドキュメントの内容と表示形式を変更できる結果的な表示方法を提供します.
3.1 DOMベース
例3-1 DOMページドキュメントの作成


  
  
  
  
   
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
   
   
   
   <html>  
   
   
   
   <head>  
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
   
   
   
   <title>DOM    </title>  
   
   
   
   <style>  
   
   
   
       body{font-size:13px}  
   
   
   
       table,div,p,ul{width:280px;border:solid 1px #666;margin:10px 0px 10px 0px;padding:0px;background-color:#eee}  
   
   
   
   </style>  
   
   
   
   </head>  
   
   
   
   <body>  
   
   
   
       <table>  
   
   
   
           <tr><td>Td1</td></tr>  
   
   
   
           <tr><td>Td2</td></tr>  
   
   
   
       </table>  
   
   
   
       <div>DIV</div>  
   
   
   
       <p>P</p>  
   
   
   
       <div><span>Span</span></div>  
   
   
   
       <ul>  
   
   
   
           <li>Li1</li>  
   
   
   
           <li>Li2</li>  
   
   
   
       </ul>  
   
   
   
   </body>  
   
   
   
   </html>

3.2要素へのアクセス

3.2.1要素属性操作
jQueryでは、attr()メソッドを使用して要素属性の取得と設定操作を実行できますが、removeAttr()メソッドを使用すると、指定した属性を簡単に削除できます.
1、要素の属性を取得する
要素のプロパティを取得する構文は次のとおりです.
attr(name)
ここで、パラメータnameは属性の名前を表す.
例3-2 attr(name)メソッドによる要素の属性の取得


  
  
  
  
   
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>       </title> 
   
   
   
   <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script> 
   
   
   
   <style type="text/css"> 
   
   
   
       body{font-size:12px}  
   
   
   
       div{float:left;padding-left:10px}  
   
   
   
       img{border:solid 1px #ccc;padding:3px;float:left}  
   
   
   
   </style> 
   
   
   
   <script type="text/javascript"> 
   
   
   
       $(function(){  
   
   
   
           var strAt = $("img").attr("src");//      
   
   
   
           strAt+="<br/><br/>"+  
   
   
   
           $("img").attr("title");//      
   
   
   
           $("#divAlt").html(strAt);//        
   
   
   
       })  
   
   
   
   </script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <img alt="" title="       " src="../images/3/img01.jpg"></img> 
   
   
   
       <div id="divAlt"></div> 
   
   
   
   </body> 
   
   
   
   </html>

2、要素の属性を設定する

ページでは、attr()メソッドでは、要素のプロパティだけでなく、次のようにプロパティ構文フォーマットを設定する要素のプロパティも設定できます.
attr(key,value)
ここでkeyは属性名を表し、valueは属性の値を表す.複数のプロパティを設定する場合は、attr()メソッドで実装することもできます.構文フォーマットは次のとおりです.
attr({key0:value0,key1:value1})
例3-3要素のプロパティの設定(一)


  
  
  
  
   
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>       </title> 
   
   
   
   <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script> 
   
   
   
   <style type="text/css"> 
   
   
   
       body{font-size:12px}  
   
   
   
       .clsSpn{float:left;padding-top:10px;padding-left:10px}  
   
   
   
       .clsImg{border:solid 1px #ccc;padding:3px;float:left}  
   
   
   
   </style> 
   
   
   
   <script type="text/javascript"> 
   
   
   
       $(function(){  
   
   
   
           $("img").attr("src","../images/3/img01.jpg");//  src    
   
   
   
           $("img").attr("title","       ");//  title    
   
   
   
           $("img").attr({"src":"../images/3/img02.jpg","title":"       "})//          
   
   
   
           $("img").addClass("clsImg");//      
   
   
   
           $("span").html("    ");//        
   
   
   
       })  
   
   
   
   </script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <img alt="" src="../images/3/img03.jpg" style="float:left"></img> 
   
   
   
       <span class="clsSpn">      </span> 
   
   
   
   </body> 
   
   
   
   </html>

それ以外にattr()メソッドはfunction()関数をバインドすることもでき、この関数によって返される値は要素の属性値として、その構文フォーマットは以下のように表される.

attr(key,function(index))
ここで、パラメータindexは現在の要素のインデックス番号であり、関数全体が要素の属性値として文字列を返します.
例3-4要素のプロパティの設定(2)
機能の説明:ページでfunction()ランダム関数を使用してランダムな数値を返し、その数値に基づいてプロパティsrcの値として文字列を構成します.


  
  
  
  
   
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>       </title> 
   
   
   
   <script language="javascript" type="text/javascript" src="../../js/jquery/jquery-1.4.2.min.js"></script> 
   
   
   
   <style type="text/css"> 
   
   
   
       body{font-size:12px}  
   
   
   
       。clsSpn{float:left;padding-top:10px;padding-left:10px}  
   
   
   
       .clsImg{border:solid 1px #ccc:padding:3px;float:left}  
   
   
   
   </style> 
   
   
   
   <script type="text/javascript"> 
   
   
   
       $(function(){  
   
   
   
           $("img").attr("src",function(){  
   
   
   
               return "../../images/3/img0"+Math.floor(Math.random()*2+1)+".jpg"  
   
   
   
           });//  src    
   
   
   
           $("img").attr("title","       ");//  title    
   
   
   
           $("img").addClass("clsImg");//      
   
   
   
       })  
   
   
   
   </script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <img alt="" src="../../images/3/img03.jpg" style="float:left"></img> 
   
   
   
   </body> 
   
   
   
   </html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>       </title> 
   
   
   
   <script language="javascript" type="text/javascript" src="../../js/jquery/jquery-1.4.2.min.js"></script> 
   
   
   
   <style type="text/css"> 
   
   
   
       body{font-size:12px}  
   
   
   
       。clsSpn{float:left;padding-top:10px;padding-left:10px}  
   
   
   
       .clsImg{border:solid 1px #ccc:padding:3px;float:left}  
   
   
   
   </style> 
   
   
   
   <script type="text/javascript"> 
   
   
   
       $(function(){  
   
   
   
           $("img").attr("src",function(){  
   
   
   
               return "../../images/3/img0"+Math.floor(Math.random()*2+1)+".jpg"  
   
   
   
           });//  src    
   
   
   
           $("img").attr("title","       ");//  title    
   
   
   
           $("img").addClass("clsImg");//      
   
   
   
       })  
   
   
   
   </script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <img alt="" src="../../images/3/img03.jpg" style="float:left"></img> 
   
   
   
   </body> 
   
   
   
   </html>

3.要素の属性を削除する

jQueryでattr()メソッドで要素のプロパティを設定した後、removeAttr()メソッドを使用して要素のプロパティを削除します.構文フォーマットは次のとおりです.
removeAttr(name)
ここで、パラメータnameは要素属性の名前です.
たとえば、ラベルのsrcプロパティを次のコードで削除できます.
$("img").removeAttr("src");
3.2.2要素の内容操作
jQueryでは、要素のコンテンツを操作する方法としてhtml()とtext()があり、前者はJavaScriptのinnerHTML属性と類似しており、要素のHTMLコンテンツを取得または設定する.後者は、JavaScriptのinnerTextプロパティ、すなわち要素のテキストコンテンツを取得または設定することに似ています.両者のフォーマットと機能の違いは以下の通りである.

構文フォーマット
パラメータの説明
機能の説明
html()
パラメータなし
要素を取得するためのHTMLコンテンツ
html(var)
varパラメータが要素のHTMLコンテンツ
要素を設定するためのHTMLコンテンツ
text()
パラメータなし
要素を取得するテキストの内容
text(var)
varパラメータは要素のテキスト内容です
要素を設定するテキストの内容
説明:html()メソッドはXHTMLのドキュメントのみをサポートし、XMLドキュメントには使用できませんが、text()はHTMLドキュメントもサポートし、XMLドキュメントもサポートします.

例3-5要素の内容を設定または取得する


  
  
  
  
   
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   
   
   
   <title>          </title> 
   
   
   
   <script language="javascript" type="text/javascript" src="../../js/jquery/jquery-1.4.2.min.js"></script> 
   
   
   
   <style type="text/css"> 
   
   
   
       body{font-size:12px}  
   
   
   
       div{border:solid 1px #666;padding:5px;width:220px;margin:5px}  
   
   
   
   </style> 
   
   
   
   <script type="text/javascript"> 
   
   
   
       $(function(){  
   
   
   
           var strHTML = $("#divShow").html();//  HTML    
   
   
   
           var strText = $("#divShow").text();//        
   
   
   
           $("#divHTML").html(strHTML);//  HTML    
   
   
   
           $("#divText").text(strText);//        
   
   
   
       })  
   
   
   
   </script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <div id="divShow"><b><i>Write Less Do More</i></b></div> 
   
   
   
       <div id="divHTML"></div> 
   
   
   
       <div id="divText"></div> 
   
   
   
   </body> 
   
   
   
   </html>

3.2.3要素値の取得または設定

jQueryでは、要素の値を取得する場合、val()メソッドで実装されます.構文フォーマットは次のようになります.
val(val)
パラメータvalを持たない場合は、要素の値を取得し、逆にパラメータvalの値を要素に割り当てます.すなわち、要素の値を設定します.
また、val()メソッドでは、selectタグのペアオプション値も取得できます.構文フォーマットは次のとおりです.
val().join(",")
例3-6要素の値の設定または取得

$is not a functionが解決しました

jQuery MiniUIの使用概要