JavaScript初心者によるjQuery思考への道

JavaScript Web制作

新入社員の山本のくせに、ちょっとだけ真面目な話します。

JavaScriptとHTMLの連携を簡単にするjQuery
僕はよくわからないまま使ってます。便利です。

でも始めからjQueryに慣れちゃうと、どうしてもjQueryなしで書かなければいけない場合に
「jQueryのあの挙動させたいけど、どうやって記述すればいいんだよ!」
ってな感じで途方に暮れたりします。

なので今回は、jQueryではこう書いてたけど、使わないならこう書けばいいんじゃね
っていうメモを自分なりに残したいと思ってます。

案の定、これ書いてる段階では思ってるだけです。今から調べます。
関数の内部的なことには触れず、ほとんどが表面上のことです。
しかも割とわかりきっていることばっかりです。
さらに箇条書きみたいな書き方なんで見にくいし、おもしろくもないと思います。

へへへ、自分初心者なもんで。

要素(エレメント)を取得

基本となる、HTMLの要素の取得。
jQueryではセレクタでホイッと指定すればいいんですよね。

HTML


JS

var $a = $("#ul .list a");
alert($a);

こんな感じ。
じゃあjQueryなしだと

document.getElementById(“ul”).getElementsByClassName(“list”).getElementsByTagName(“a”)

長い。枠からはみ出してると思う。これだけでもjQueryすげえってなりますね。
まあgetElement(s)ほにゃららを使おうねってことです。

でもgetElementsClassNameって初めて見た気がする。

要素(エレメント)や値を取得 ~その他~

主に基準点となる要素を変数に格納しときます。
毎回getなんちゃらを書いてると長くなっちゃうんで。

HTML


  

ひかくちゃん

JS

var elem = document.getElementById("elem");
var ul = document.getElementById("ul");
var li = document.getElementsByTagName("li");
var $elem = $("#elem");
var $ul = $("#ul");
var $li = $("#ul li");

これらの基準点から小細工を用いて周りの要素や値を取得するには。

jQuery JavaScript 備考
$ul.children() ul.children リストの子要素全て
$ul.children(“:first”) ul.firstChild $ul の最初の子
$ul.children(“:last”) ul.lastChild $ul の最後の子
$ul.parent() ul.parentNode $ul の直接の親
$li.eq(1).prev() li[1].previousSibling $liの2番目の要素のひとつ前の兄弟要素
$li.eq(1).next() li[1].nextSibling $liの2番目の要素のひとつ後ろの兄弟要素
$elem.html() elem.innerHTML $elem が含む内容をHTMLとして取得
$elem.text() elem.innerText $elem が含む内容をテキストとして取得
(Firefoxでは.textContent)

見にくいけどこんな感じ!

ここで、previousSibling と nextSibling について注意。

Firefox, Google Chrome, Safari, Opera(おそらくIE以外)では、
改行やインデントをホワイトスペースノードとして感知してしまい、

「li[1]のひとつ前(後)はli[0](i[2])じゃなくてホワイトスペースノードでーすwww」

なんてことになってしまいます。

ホワイトスペースを除外するようにカスタマイズする方法があるみたいなので、
「js ホワイトスペース」とかで検索しましょう。

ちなみに、ul.children と同じような動きをする ul.childNodes でもホワイトスペースを感知します。
気をつけましょう。

要素リストから要素を取り出す

HTML
前項参照

JS

var li = document.getElementByTagName("li");
var $li = $("#ul li");

には、詳細は違えど、どちらも配列のような形式でliが格納されています。

その中からの取り出し方。

jQuery JavaScript 備考
$li.eq(0) li[0] or li.item(0) 要素番号で指定
$li.filter(“[class='list']“) マッチしたものすべてがObject[]でもらえる
li.item(“[class='list']“) マッチした”最初の要素”のみ!

item()でこんなフィルタのかけかたがあるとは知りませんでした。

お腹がすいて書き方が雑になってきました。
これ書いてる日、朝ごはん食べられなかったんです。

要素の属性値をいじる

要素を取得したところで、いじくりまわしましょう。

jQuery JavaScript
$elem.attr(“id”) elem.getAttribute(“id”)
$elem.attr(“id”, “elem2″) elem.setAttribute(“id”, “elem2″)
$elem.text(“changed”) elem.innerText = “changed”
$elem.html(“<a href=’#'>changed</a>”) elem.innerHTML = “<a href=’#'>changed</a>”

こんなところでしょうか。

本当に基本的な部分のみを確認しました。

以下はおまけです。

おまけ:[0] と .eq(0) の違い

Object[list0, list1, list2] の場合でも $li[0] のように配列のように指定することはできる
が、そうしたとき、取得できるのは要素(<li class=”list”>)

Object[list0] が欲しい場合は、$li.eq(0) とする。

おまけ:children(), parents()をフィルタで絞り込む場合の取得順

$ul.children()で子要素(孫要素は除く)を取得した場合


ここで、
list0 の要素が欲しい場合、.children(“:first”)でフィルタをかける
list2 の要素が欲しい場合、.children(“:last”) でフィルタ!

順番に下って子要素を拾っていく感じですね。

$ul.parents()(.parent() ではなく .parents() だと先祖要素全て)で取得する場合

直接の親が欲しい場合、.parents(“:first”)

.parents(“:last”) だとたいていは Object[html] が取得できる。
(<html>の親ノードである文書ノードは除かれる)

感覚的には、コードで上に記述されているものから順番だろ!
って思うことがあるかもしれないが、自分を基準に上へ上へと親を辿っていくことになる。

まとめ

結局、jQueryは何をしてくれているのか。
引数の”個数”と”型”を分析して、ひとつの関数で色んな処理に振り分けてる感じ。
もちろんそれだけじゃないけど。

例えば
.attr(“id”) の場合、
「何かIDについての要求がきてるな。IDひとつしか引数にないし、IDが見たいだけなんだな。」
って解釈してくれるし、

.attr(“id”, “changedID”) の場合、
「IDと一緒に何か文字列があるな。IDをこれに変更したいのかな。」
って理解してくれる。

個人的には、この書き方に対する処理は直感的に理解できるので、
すんなりと受け入れて使えるようになりました。
いや、使いこなせてないんですけどね。

真面目な記事だけに良い感じにまとまったので、ここまでにしておきます。