jsjqちょっと復習中 - programmingdogのブログ

Eachfor文のvalueとindexの説明ここが分かり易い

$(".content").removeClass("show").eq(index).addClass("show");

全てのコンテントクラスの内最初のshowクラスを削除してeqの引数に渡したindex番号のコンテントクラスにshowクラスを追加

カリキュラムでは.click使ってるが基本的にはonを使う

thisって引数の時は何も変わらんけどノードの時はjsだとthis.でなのにjqだと$(this)になるんだなぁと思った。まあjqだから普通に$(ノード)は分かり易いんだけど、ライブラリ側で記述量増えるとふーんって思ってしまう。

jqのfind("使うセレクタ")はrubyで言うならfindって言うよりはwhere

jsのforEach文でも似たようなこと書いたかもしれないけどjsjqはよくeach系にindexも渡す。

jqだったらeach()メソッドで

オブジェクト.each(function(index){

　　繰り返す処理

});

みたいなのが基本形っぽい。

とりあえずindexだけ書いたけど、最初の複数形のオブジェクトの単数形を第二引数で受け取って繰り返し処理の中で使うのが普通なんかな？

$.each(対象オブジェクト, function(index, val){

繰り返し処理

});)

みたいにすると配列やハッシュにも繰り返し処理できる見たい

カリキュラムから抜粋

$.each(fruits, function(i, fruit) {

if(input === fruit ) {

$("#result").text(input);

return false;

}

});

みたいな感じで渡すだけは渡すけど（indexを）使わないことも多いんかな？

（ちなみにfruitsは配列。inputはテキストタイプのフォームから.val()で値取得した物をlet変数で定義したもので#resultはpタグなのでそこに.text()で受け取ったinputを出力してる。見つかったら出力してfalseで抜ける。見つかんなかった時の処理はここでは書いてない）

複数キーワード検索ざっくり

前方一致を表す^をくっつける関数作っとく

入力されたフォームのテキストに.split(" ")で空白で区切って配列作って変数に入れとく

さっきの変数に.map(^くっつける関数)使って各要素に^くっつける

let reg = RegExp(さっき作った各要素に^が付いてる配列.join("|"));

って感じで各要素を.joinで各要素を引数の|使ってくっつけた上でRegExpオブジェクトを作る。

追記予定