めも。
PHPとかで引数が足りていなくてもエラーにならない感じの関数をJavascriptでやりたい時。
function hoge(fuga){
if(typeof fuga === 'undefined') fuga = 'piyo';
console.log(fuga);
}
こんな感じにするとよい。
【Javascript】Javascriptの関数にデフォルト引数を設定する。
【jQuery】:contains()フィルタで完全一致を実現する方法。
セレクタで要素中に特定の値（テキスト）を含む条件を指定したい場合:contains()を用いてフィルターをかけると便利だが、こいつは完全一致ではないため文字列が含まれていればそのまま引っ張ってきてしまう。しかも正規表現が使用できないので完全一致の場合のみ選択したいとなるとちょっとこまる。
ということで調べてみた結果、結局ひっかかった要素をループでまわして評価していくしかなさそうなので下記のような感じで実装した。
下記のような同一のクラスを持つ要素の中で、「testtt」という文字列をもった要素のみテキストを書き換えたいとする。
この場合、普通に:contains()でフィルターをかけると4行目、5行目の要素も選択されてしまう。
<div class="target">test</div> <div class="target">testt</div> <div class="target">testtt</div> <div class="target">testttt</div> <div class="target">testtttt</div>
なので以下のようにする。
<script>
$(function(){
var txt = 'testtt';
var elem = null;
$('.target:contains('+txt+')').each(function(){
if($(this).text() == txt) elem = $(this);
});
elem.text('match!!');
})
</script>
ごり押しで解決。笑
【jQuery】指定した要素をDOM Elementで置き換える。
めも。
■HTML
<div class="target">target</div> <button type="button" class="js_btn">replace</button>
ボタンが押されたら上のdiv要素を置換してみる。
■Javascript
<script>
$(function(){
$('.js_btn').click(function(){
var elem = '<span>replaced</span>';
$('.target').replaceWith(elem);
})
})
</script>
こんな感じ。
【jQuery】指定した要素の手前にDOMを追加する。
めも。
下記のようなHTMLがあったと仮定。
<table class="table"> <thead> <tr><th>hoge</th><th>fuga</th><th>piyo</th></tr> </thead> <tbody> <tr><td>data1</td><td>data1</td><td>data1</td></tr> <tr><td>data2</td><td>data2</td><td>data2</td></tr> <tr class="target"><td>data3</td><td>data3</td><td>data3</td></tr> <tr><td>data4</td><td>data4</td><td>data4</td></tr> <tr><td>data5</td><td>data5</td><td>data5</td></tr> </tbody> </table> <button type="button" class="js_btn">append</button>
ボタンをクリックした時、特定要素（.target）の手前に一行追加したい場合は、下記の通り。
<script>
$(function(){
$('.js_btn').click(function(){
var elem = '<tr><td>data999</td><td>data999</td><td>data999</td></tr>';
$(elem).insertBefore('tr.target');
})
})
</script>
ちなみに。
$(a).insertBefore(b)、は「b」の手前に「a」が挿入される。
$(a).before(b)、は「a」の手前に「b」が挿入される。
【MySQL】複数のテーブルをJOINさせる方法。
めも。
極めて文法的なお話。
下記のような名前のテーブルがあるとする。
・table_1
・table_2
・table_3
ほしいカラムは下記とする。
・table_1.col_1
・table_2.col_2
・table_3.col_3
そして。
・「table_1.id」=「table_2」の「table1_id」
・「table_1.hoge_id」=「table_3」の「id」
だったとする。
この場合これらをすべてJOINしようとすると下記のようになる
SELECT t1.col_1, t2.col_2, t3.col_3 FROM table_1 AS t1 LEFT JOIN table_2 AS t2 ON t1.id = t2.table1_id LEFT JOIN table_3 AS t3 ON t1.hoge_id = t3.id
そして、この末端にWHERE、LIMIT、ORDERなどを追加してやればよい。
※この際、複数のテーブル間で同一のカラム名が存在しなかった場合、WHERE句などでテーブル名のプレフィックスを付加してやらなくてもエラーにはならない。っぽい。
【jQuery】要素をおもいっきりガクブルさせる。
面白いプラグインを見つけたのでメモ。
■jrumble
http://jackrugile.com/jrumble/
使い方は簡単。
上記URLから飛んだ先の「Download」よりソースを拝借。
以下のようにjQueryの後に読み込む。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.jrumble.1.3.js"></script>
あとはガクブルさせたい要素に対して以下のようにメソッドをバインドしてやればよい。
// 要素に対してガクブルライブラリをバインドする。
$('#hoge').jrumble();
// ガクブル開始（スタート）
$('#hoge').trigger('startRumble');
// ガクブル終了（ストップ）
$('#hoge').trigger('stopRumble');
.jrumble()に対して引数を渡してやることで、ガクブルを自由自在に操作することが可能。
細かいパラメータやセッティング方法に関しては公式ドキュメントを参照されたし。
【CSS】テキストを垂直方向に中央寄せする。
めも。
「height」と「line-height」に同一の値を指定する。
以上。
【CSS】tr要素のdisplayプロパティまとめ。
tableタグ内のtr要素を見せたり隠したりしたかった際に嵌ったのでメモ。
通常DOM要素を見せ隠ししたい場合は、displayプロパティを「none」や「block」にして操作する。
が、trのdisplayプロパティの場合「none」に対をなす値が「block」ではなく「table-row」となる。
ざっくり言うと。
■divとか
display:none / block
■tr
display:none / table-row
となる。
なので以下のようなコードを書くと表示が崩れておかしくなるので注意。
■HTML
<button type="button" class="js_btn">btn</button> <table class="table"> <thead> <tr><th>hoge</th><th>fuga</th></tr> </thead> <tbody> <tr class="tr1"><td>ho</td><td>ge</td></tr> <tr class="tr2"><td>fu</td><td>ga</td></tr> </tbody> </table>
■Javascript
<script>
$(function(){
$('.js_btn').click(function(){
if($('.tr1').css('display') == 'none'){
// display:table-rowでなければならない
$('.tr1').css({'display':'block'});
}else{
$('.tr1').hide();
}
})
})
</script>
これはボタンをクリックした際に特定のtr要素を調査し、display属性がnoneであればblockに、そうでなければnoneに変更するスクリプトであるが、この場合 において要素を再表示させたいのであれば、5行目を「$(‘.tr1′).css({‘display':’table-row’});」とする必要がある。