jQueryで要素を作成する方法を学ぶ

jQueryで要素を作成する方法を学ぶ

新しい要素の作成は、jQueryJavaScriptライブラリで実行できる最も基本的なタスクの1つです。 jQueryを使用すると、タスクはDocument Object Model（DOM）を使用した同等のアプローチよりもはるかに簡単になります。また、jQueryを使用すればするほど、柔軟性と表現力が向上します。





目的を果たすには、要素をWebページに追加できる必要があります。 jQueryを使用して、新しいリストアイテムを追加する方法、または段落を新しいコンテンツに置き換える方法を学びます。



jQueryとは何ですか？

jQueryライブラリはのコレクションです JavaScript 2つの主な目的を持つコード：





  • 一般的なJavaScript操作を簡素化します。
  • さまざまなブラウザ間の相互互換性のあるJavaScriptの問題を処理します。

2番目の目的はバグに対応しますが、ブラウザー間の実装の違いにも対処します。ブラウザは時間の経過とともに向上するため、どちらの目的も以前よりも必要性が低くなります。しかし、jQueryは依然として価値のあるツールです。

要素とは何ですか？

要素はタグと呼ばれることもあります。この2つは同じ意味で使用されることがよくありますが、微妙な違いがあります。タグはリテラルを参照します

また



テキストコンテンツをマークアップするためにHTMLファイルに含めます。要素は、マークアップされたテキストを表す舞台裏のオブジェクトです。要素は、HTMLタグに対応するDOMと考えてください。

jQueryを使用して新しい要素を作成する方法

ほとんどのjQuery操作と同様に、要素の作成はドル関数から始まります。 $（） 。これはコアへのショートカットです jQuery（） 関数。この関数には、次の3つの明確な目的があります。



  • 要素、通常はドキュメントにすでに存在する要素と一致します
  • 新しい要素を作成します
  • DOMの準備ができたときにコールバック関数を実行します

HTMLを含む文字列を最初のパラメーターとして渡すと、この関数は新しい要素を作成します。

$(' ')

これは、要素のコレクションを含む特別なjQueryオブジェクトを返します。この場合、作成したばかりの「a」要素を表す単一のオブジェクトがあります。



Androidでメールを同期する方法

このアクションを一致する要素と区別するには、文字列がHTMLのように見える必要があります。実際には、これは文字列がで始まる必要があることを意味します < 。この方法を使用して、ドキュメントにプレーンテキストを追加することはできません。

これはドキュメントに要素を追加するのではなく、追加できる新しい要素を作成するだけであることを理解することが重要です。要素は「アタッチされていない」ため、メモリを消費しますが、実際には最終ページの一部ではありません。

より複雑なHTMLの追加

ドル関数は、実際には複数の要素を作成できます。実際、必要なHTML要素のツリーを構築できます。

$('
  • one
  • two
  • three
')

この形式を使用して、次の属性を持つ要素を作成することもできます。

$(' my hometown')

新しい要素に属性を設定する方法

完全なHTML文字列を自分で作成しなくても、新しいjQuery要素を作成してその属性を設定できます。これは、属性値を動的に生成する場合に役立ちます。例えば：

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

要素を追加する方法

新しい要素を作成したら、いくつかの異なる方法でドキュメントに追加できます。 jQueryのドキュメントでは、これらのメソッドを 「操作」カテゴリ 。

既存の要素の子として追加

$('body').append($('

Hello, world

'));
$(document.body).append($el);

たとえば、このメソッドを使用して、リストの最後に新しいリストアイテムを追加できます。

既存の要素の兄弟として追加します

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    これは、たとえば、他の2つの段落の途中に新しい段落を追加する場合に適しています。

    既存の要素を置き換える

    を使用して、既存の要素を新しく作成された要素と交換できます。 と置換する（） 方法：

    $('#old').replaceWith('

    New paragraph

    ');

    既存の要素をラップアラウンド

    これは非常にまれなユースケースですが、既存の要素を新しい要素で囲むことをお勧めします。たとえば、 コード ラップしたい要素 にとって ：

    $('code#n1').wrap('
    ')
    作成した要素へのアクセス
     
    NS $（） 関数はjQueryオブジェクトを返します。これは、フォローアップ操作に役立ちます。
    $el = $('p');  
    $('body').append($el);
    慣例により、jQueryプログラマーはjQuery変数に先頭のドル記号を付けることがよくあることに注意してください。これは単なる命名スキームであり、 $（） 関数。
     
    jQueryを使用した要素の作成
     
    ネイティブJavaScript関数を使用してDOMを操作できますが、jQueryを使用すると操作がはるかに簡単になります。 DOMをよく理解することは依然として非常に便利ですが、jQueryを使用するとDOMの操作がはるかに快適になります。
      共有    共有      つぶやき      Eメール      ウェブサイトの隠されたヒーロー：DOMを理解する  
    Webデザインを学び、ドキュメントオブジェクトモデルについてもっと知る必要がありますか？ DOMについて知っておくべきことは次のとおりです。
    次を読む       関連トピック  
       
    • プログラミング
      •  
    • ウェブ開発
      •  
    • jQuery
      •  
      著者について   ボビージャック（58の記事が公開されました）      
    ボビーは、20年のほとんどの間ソフトウェア開発者として働いた技術愛好家です。彼はゲームに情熱を注いでおり、Switch Player Magazineのレビュー編集者として働いており、オンラインパブリッシングとウェブ開発のあらゆる側面に没頭しています。
    ボビージャックのその他の作品
    ニュースレターを購読する
     
    ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
    購読するにはここをクリックしてください