2012年1月29日日曜日

[jQuery]class属性の操作

jQueryを使用して、html要素のclass属性を操作する方法

class属性に、任意のクラスを追加

addClassメソッドを使用して、クラスを追加出来る。

以下の例では、input要素すべてに「className」というクラスを追加しています。
$(function () {
  $('input').addClass('className');
});

複数のクラスを追加したい場合には、スペースで区切って複数のクラス名を列挙してあげるとよい。
もしくは、addClass('class1').addClass('class2')のようにメソッドチェイン呼び出しにしてあげるとよい。
個人的には、後者の方が好み。いくつのクラスが追加されてるか分かるし、クラス名を単独になるから可読性高くなるし。


class属性から、任意のクラスを削除

removeClassメソッドを使用して、クラスを削除することが出来る。

基本的な使い方は、addClassと同じ。

以下の例では、input要素から「className」というクラスを削除しています。
$(function () {
  $('input').removeClass('className');
});

イベントを拾ってclassの有無を切り替える

イベントに応じて特定のクラスを削除したり、追加したりする方法。
例えば、input:textにフォーカスがあたっている場合、背景色を変更するクラスを追加して、フォーカスが外れた場合に削除したりする場合に使える。
addClassとremoveClassを組み合わせて使用したら出来るけど、toggleClassというメソッドが用意されているので、こちらを使った方が見通しがよくなる。

この例は、フォーカスがあたった場合と外れた場合に、changeTextColorファンクションを呼び出しています。
呼び出し先のメソッドでは、toggleClass('active')となっているので、「active」クラスがあればクラス属性から削除され、なければ追加されます。
$(function () {
  $('input:text').focusin(changeTextColor).focusout(changeTextColor);
});
function changeTextColor() {
  $(this).toggleClass('active');
}

指定されたクラスがclass属性にあるかチェック


hasClassメソッドを使用してテストできる。

$(function () {
  $('input').hasClass('className');
});

2012年1月21日土曜日

[jQuery]テーブルの行の背景色を交互に変更する方法

trのoddとevenでひろってきて、cssで背景色を変えることが出来る。
テーブルのレコードを表すtrタグと、奇数(odd)、偶数(even)番目を表すselectorを
組み合わせて使うことで割と簡単に実現出来る。

    $(function() {
        // trの中で奇数番目のものを対象にする
        $('tr:odd').css({
            backgroundColor:'#aaaaaa'
        });
        // trの中で偶数番目のものを対象にする
        $('tr:even').css({
            backgroundColor:'#ffffff'
        });
    });

2012年1月14日土曜日

[JavaScript]checkboxのチェックをクリアする

特定のdiv要素のボタンがクリックされたら、そのdiv要素内のcheckboxのチェックを外す方法。

jQueryを使うとこんな感じで出来るみたい。

2012年1月8日日曜日

[JavaScript]文字列のtrim

jQueryのtrim関数を使用してtrimできる。

// jQueryのtrim関数を使用してtrimする。
$.trim("trimしたい文字列");

2012年1月7日土曜日

JavaScript本格入門を読んだよ

JavaScriptを使う必要に迫られたので、読んでみた。
JavaScript書くなんてかなり久しぶりでちゃんと理解しとかないとと思い、Amazonレビューでも良さげそうだったこの本にしてみた感じです。



読んでみた感じは、内容はそんなこくないとは思うけど、図とかを使い端的に説明していて非常に分かりやすかったかなと思います。
ただ、サブタイトルにあるajaxやjqueryだったりの部分は、この本で学ぶのは期待しない方がよいと思います。
あくまでも、ajaxってなに?どんなことができるの?ってことを知れたり、jqueryを使うとどれぐらい簡単にajaxを実現出来るかを知れる程度だと思います。
(jqueryの専門書が出てる訳で、この本だけでjqueryも理解出来るって思う方が間違ってると思います。)

[JavaScript]フォーカスが外れたタイミングで合計を自動計算

フォーカスが外れたタイミングで、任意のinputの値を合計してinputタグのvalue属性に出力してみた。

JavaScriptのソース。いけてるかどうかは分かりませんが・・・
$(':input[class*=autoSum-]').focusout(
    function () {
      var classes = $(this).attr('class').match(/autoSum-[^ ]*/g);
      for (var i = 0; i < classes.length; i++) {
        var className = classes[i];
        className.match(/autoSum-(.*)/);
        var target = RegExp.$1;
        var inputs = $(':input[class*=' + className + ']');
        var total = 0;
        for (var j = 0; j < inputs.length; j++) {
          var inputVal = inputs[j].value;
          if (inputVal != undefined && inputVal != '' && !isNaN(inputVal)) {
            total += parseInt(inputVal);
          }
        }
        $('input:[class*=total-' + target + ']').val(total);
      }
    }
);
上記のJavaScriptを使って、合計を自動設定するhtmlの例