jQueryが選択したオブジェクトを元のDOMオブジェクトに変換する方法

3635 ワード

jQueryでは、1ページで選択する要素が返す集合が元のDOMオブジェクトではなくjQueryオブジェクトである.だからjQueryメソッドしか実行できない.選択セットでDOMメソッドとプロパティを実行する場合は、そのセットをDOMオブジェクトに変換する必要があります.
例えば、このように使用してはいけません.
$('div').innerHTML = "hello world";
innerHTMLはjQueryオブジェクトの属性ではなくDOMの属性であるからである.確かにそうしたいなら.jQueryオブジェクトをDOMオブジェクトに変換する必要がある.方法は二つある.
①jQueryはコアメソッドget()を提供するので、上のものは$('div')と書くことができる.get().innerHTML = "hello world";
もちろんここではページにdivが1つしかない場合に対応する.複数のdivがある場合.
この方法は使いにくいので、get(index)のようなインデックス値に渡すことでコードを修正して選択する必要があります.
$("div").get(0).innerHTML = "hello world";
もちろん、jQueryが持っている$を使ってもいいです.eachサイクルは全ての付与操作を行う.
$div1 = $("div").get();

 
  
$.each($div1, function(index, val) { 
  
val.innerHTML = 'lc '+ index; 
  
});

②我々は[]を用いて配列の形式でコンテンツを取得することができる.
例えば$('div')[0].innerHTML = "hello world";
次に、完全な例を見てみましょう.

 
  
 
  
 
  
 
  <br/> 
  <br/> 
  <br/><h3>Books</h3> 
  <br/><ol> 
  <br/><li>Head First jQuery</li> 
  <br/><li>Data Structrue and Algorithm with Javascript</li> 
  <br/><li>Nodejs up and running</li> 
  <br/><li>Node js with PHP expert</li> 
  <br/><li>Sharp jQuery</li> 
  <br/><li>Professional Javascript</li> 
  <br/></ol> 
  <br/><script type="text/javascript" src="jquery-1.10.2.min.js"/> 
  <br/><script type="text/javascript"> 
  <br>$(document).ready(function() { 
  <br>var lis = $('ol li').get().reverse(); 
  <br>$ol = $('ol'); 
  <br>$ol1 = $ol.clone(false, false); 
  <br>$ol1.empty(); 
  <br>$.each(lis, function(index, val) { 
  <br>$ol1.append('<li>'+val.innerHTML+'</li>'); 
  <br>}); 
  <br>$ol1.appendTo('body'); 
  <br>}); 
  <br></script> 
  <br/> 
  <br/> 
  <br/></span> 
  <br/> 
 </code></pre> 
 <br/>        DOM     jQuery     . 
 <br/> 
 <br/>           . 
 <br/> 
   
 <pre><code> 
  <br/> 
  <br/> 
  <br/><title/> 
  <br/><style type="text/css"> 
  <br>.clicked{ 
  <br>width:100px; 
  <br>height: 40px; 
  <br>border: 1px solid #cba; 
  <br>border-radius: 3px; 
  <br>} 
  <br></style> 
  <br/> 
  <br/> 
  <br/><a href="#" id="cli" onclick="click(this)">Click Me</a> 
  <br/><script type="text/javascript" src="jquery-1.10.2.min.js"/> 
  <br/><script type="text/javascript"> 
  <br>function click(it){ 
  <br>$(it).addClass('clicked'); 
  <br>console.log('yes'); 
  <br>} 
  <br></script> 
  <br/> 
  <br/> 
  <br/> 
 </code></pre> 
 <br/>          DOM     jQuery     . 
 <br/> 
 <br/>   :   it      a      .    DOM  ,   onclick    this  . 
 <br/> 
 <br/>     $() DOM       ,       addClass  . 
 <div class="clearfix"> 
  <span id="art_bot" class="jbTestPos"/> 
 </div> 
</div>
                            </div>
                        </div>

jQuery Jcrop APIパラメータ説明(中国語版)

jQueryのメモ