jQueryとJavaScriptの比較

既存の古いページに合わせて、素のjavasciriptで頑張っていたら、
「jQuery使いなよ(笑)」って言われました。
ということで、（個人的には基礎を学びたいところもありjavascriptで書いてたんだけど・・・ぶつぶつ）
お仕事のためにもjQueryをおさらい。
javascriptと比べてどのくらい楽になるのか、直近使っていたものについて比較してみました。

比較内容

• おまじない
• 要素の生成
• 要素の取得
• 要素の追加
• 非同期処理（そのうち更新）

##おまじない
と、よく言われる、書き始めによく利用する書き方。

js

(function () {
    //ここに処理を書く
}());

jQuery

$(document).ready(function(){
  // ここに処理を書く
});

// 以下の書き方もある
$(function() {
  // ここに処理を書く
})

jsの書き方は、関数定義を()で括ることで関数呼び出しをせずに即実行する、即時関数というもの。スコープ汚染を防ぐために大事。
jQueryの書き方は、redyイベントという関数。HTMLドキュメントのロードが完了し、DOM操作ができるタイミングで処理を実行する。jsの window.onload に動作が似ている（window.onload はCSSやjsドキュメントも全てロード完了してから処理が実行されるので、厳密には違う)。

##要素の生成

js

var input = document.createElement("input");
input.id = "hoge";
input.type = "hidden";

console.log(input): //<input id='hoge' type='hidden'>

jQuery

var input = $('<input>').attr({
  id: "hoge",
  type: "hidden"
});

// もしくは、以下でも良い。
var input_2 = $("<input>", {
  id: "hoge",
  type: "hidden"
});

console.log(input_2[0]); //<input id='hoge' type='hidden'>

##要素の取得

取得元のHTML

<p id="hoge" class="fuga"></p>

js

// idで取得
var id = document.getElementById("hoge");
console.log(id); //<p id="hoge" class="fuga"></p>

// クラスで取得
var className = document.getElementsByClassName("fuga");
console.log(className); //HTMLCollection

jQuery

// idで取得
var id_2 = $("#hoge").get(0);
console.log(id_2); //<p id="hoge" class="fuga"></p>

// もしくは、以下でも良い。
$("#hoge")[0];

/** 補足 */
// 以下の書き方だとjQueryのオブジェクトを取得してしまう。
// jsと同様にHTMLのDOM要素を取得するには、".get(0)"をつける必要がある。
$("#hoge")

// classで取得
$(".fuga")

##要素の追加

追加先のHTML

<div id="hoge" class="fuga">Hello!</div>

appendChild

js

var target = document.getElementById("hoge");
var p = document.createElement("p");
var text = document.createTextNode("How are you?");
p.appendChild(text);
target.appendChild(p);

console.log(target); //<div id='hoge'>Hallo!<p>How are you?</p></div>

jQuery

// jsでは5行で書いていたものが1行で書ける。
$("#hoge").append('<p>How are you?</p>');

var target = $("#hoge")[0];
console.log(target); //<div id='hoge'>Hallo!<p>How are you?</p></div>

// 以下でも良い。
$('<p>How are you?</p>').appendTo("#hoge");

innerText（innerHTMLも同じ動きをするみたい）
→この解釈は間違いです。まだ修正できていません（すみません）。

js

target = document.getElementById("hoge");
console.log(target) //<div id="hoge">Hallo!</div>

target.innerText = "Bye."

console.log(target) //<div>Bye.</div>　（上書きされる）

jQuery

var target = $("#hoge")[0];
console.log(target); //<div id="hoge">Hallo!</div>

$("#hoge").html("Bye.");
  
console.log(target); //<div>Bye.</div>　（上書きされる）

#参考にさせて頂いたサイト
即時関数について
http://unitopi.com/js-function/
https://qiita.com/Koizumi-Greenwich/items/d192ad98ca8b2449e4fd

全体的に。だいぶ昔からお世話になっています。
http://semooh.jp/jquery/