ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery が選択したオブジェクトを元の DOM に変換する方法 object_jquery

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

WBOY
リリース: 2016-05-16 16:45:09
オリジナル
1285 人が閲覧しました

jQuery では、ページ上の要素を選択することによって返されるコレクションは、元の DOM オブジェクトではなく jQuery オブジェクトであるため、選択セットに対して DOM メソッドとプロパティを実行する場合は、コレクションを変換する必要があります。 DOM オブジェクトへ

たとえば、次のように使用することはできません。

$('div').innerHTML = "hello world";

jQuery オブジェクトのプロパティではなく、DOM のプロパティを使用します。これを本当に実行したい場合は、jQuery オブジェクトを DOM オブジェクトに変換する必要があります。

①jQuery には 2 つのコア メソッドが用意されています。 get() なので、上記は $('div') .get().innerHTML = "hello world";

もちろん、これは div が 1 つしかない状況に対応します。ページに

がある場合、このメソッドは使いにくく、インデックス値を

に渡すことで選択する必要があります。 $("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";

完全な例を見てみましょう


コードをコピーします
コードは次のとおりです: </タイトル> </div><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <div class="codebody" id="code86237"><h3>書籍<h3> <br><li> <br><li>JavaScript によるデータ構造とアルゴリズム</li> <br><li>PHP エキスパートによる Nodejs</li> ><li>Sharp jQuery</li> <br><li>プロフェッショナル Javascript</li> <br></ol> <br><script type="text/javascript" src="jquery- 1.10.2.min.js"></script> <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); .empty(); <br>$.each(lis, function(index, val) { <br>$ol1.append('< li>' val.innerHTML '</li>'); <br> }); <br>$ol1.appendTo('body'); <br></html> ;/span> <br><br> <br>ここで、DOM オブジェクトを jQuery オブジェクトに変換する処理を追加します。<br><br><br><br><br>コードをコピーします<br><br><br> コードは次のとおりです:<br><br> <br><html> ; <BR><head> </div><title>
クリックしてください


DOM オブジェクトをjQuery オブジェクト。

注: 実際、これはリンク オブジェクト a を参照します。これは通常の DOM オブジェクトであり、これを onclick イベントに渡します。

$() を使用して DOM オブジェクトをカプセル化すると、addClass 関数を使用できるようになります。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート