jQuery要素を取得する方法
jQueryの基本的な設計思想は、ウェブ要素を取得し、それを使って何かをするというものです。
jQuery get a web element: は選択式で、コンストラクタ jQuery () に入れ、選択された要素を取得します。選択式はCSS セレクタでよく使われます。
let $element1 = $(div) //すべてのdiv要素を取得する
let $element2 = $(".className") //クラス名がclassNameである要素を取得する
let $element3 = $("#idName") //idNameというidを持つ要素を取得する
jQueryメソッドの連鎖操作は
jQueryのもう一つの設計思想は、ウェブページの要素が最終的に選択された後に、その要素に対して一連の操作を実行し、すべての操作をつなげてチェーンの形で記述することです。
$("div").find("p").eq(1).html('hello');
// 上記のコードは以下のように分割される↓。
$('div') //div要素を見つける
.find('p') //p要素のいずれかを選択する
.eq(1) //2番目のp要素を選択する
.html('Hello'); //その内容をHelloに変更する
jQueryには.end()メソッドもあり、取得した要素を親に返すことができます：
$('div')
   .find('p')
   .eq(1)
   .html('Hello')
   .end() //すべてのp要素を選択するステップに戻る
   .eq(2) //3番目のp要素を選択する
   .html('World'); //その内容をWorldに変更する
jQuery 要素を作成する方法
新しい要素を作成するには、jQueryのコンストラクタに直接渡すだけです：
//ul要素を作成する
$('<ul>ul element</ul>');
//クラスが newのli要素を作成する。
$('<li class="new">new list item</li>');
//ul要素の子としてli要素を追加する
$('ul').append('<li>list item</li>');
jQuery 要素を移動する方法
jQueryには、要素を移動させるためのメソッドが2つ用意されています。1つは指定した位置に要素を直接移動させるメソッド群で、もう1つは対象の要素が目的の位置に到達するように他の要素を移動させるメソッド群です。
- 方法 1 では、.insertAfter() を使用して div 要素を p 要素の後ろに移動します：
$('div').insertAfter($('p')); //return div
- 方法2は、.after()を使ってp要素をdiv要素の前に追加します：
$('p').after($('div')); //return p
この2つの違いは、.insertAfter() は div 要素を返し、.after() は p 要素を返すことです。このパターンを使用する操作は4組あります：
.insertAfter() .after() //既存の要素の外側に、後ろから要素を挿入する
.insertBefore() .before() //既存の要素の外側に、前面から要素を挿入する
.appendTo() .append() //既存の要素の後ろから要素を挿入する
.prependTo() .prepend() //既存の要素の中に前から要素を挿入する
jQueryで要素の属性を変更する方法
jQueryには、要素に指定された属性を変更するための.attr()メソッドが用意されています。
//選択した要素の属性／値を設定する
$(selector).attr(attribute,value)
//選択した要素の属性と値のペアを複数設定する
$(selector).attr({attribute1:value1, attribute2:value2 ...})
