覚えておくと捗るjQueryのコードスニペットあれこれ。その２

jQueryを使って誕生日を検証

18禁サイトとかに実装したいですね。
年齢認証とか、ただ設けているだけで実際には機能してないですから…。

$("#age-form").submit(function(){
	var day = $("#day").val();
	var month = $("#month").val();
	var year = $("#year").val();
	var age = 18;
	var mydate = new Date();
	mydate.setFullYear(year, month-1, day);

	var currdate = new Date();
	currdate.setFullYear(currdate.getFullYear() - age);
	if ((currdate - mydate) < 0){
		alert("ごめんなさい。" + age + "歳未満はｵｺﾄﾜﾘ━━━( ﾟωﾟ )━━━!!!!");
		return false;
	}
	return true;
});

画像がロードされていることを確認する

よく、$( function(){…でスクリプト動かしてるサイトとかありますけど、スライダーバナーとか画像がロードされてないと実行してもしょうがないスクリプトなんかは、これを使いたいです。

$('#Image').attr('src', 'image.jpg').load(function() {
    ここにコードを…(ry
});

jQueryを使用してテキスト内の検索

これは捗るスニペットです。

$.fn.egrep = function(pat) {
 var out = [];
 var textNodes = function(n) {
  if (n.nodeType == Node.TEXT_NODE) {
   var t = typeof pat == 'string' ?
    n.nodeValue.indexOf(pat) != -1 :
    pat.test(n.nodeValue);
   if (t) {
    out.push(n.parentNode);
   }
  }
  else {
   $.each(n.childNodes, function(a, b) {
    textNodes(b);
   });
  }
 };
 this.each(function() {
  textNodes(this);
 });
 return out;
};

ブラウザの検出

ここにあるのはあくまでも一例。
jQueryを使うと、ブラウザ検出も「$.browser.○○○」で出来ちゃうんですね。

//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

相対マウス位置を取得する

表示領域の左上からの「絶対位置」ではなく、指定要素の左上からの相対位置を取得します。

function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;

  return {'x': x, 'y': y};
}

マウスカーソルのX軸とY軸を取得

これは表示エリアに対するX軸・Y軸の位置を取得。

$(document).mousemove(function(e){  
$(document).ready(function() {  
$().mousemove(function(e){  
$(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);  
});  
});  

右クリック禁止

よくありますよね…結構ウザイ。
「要素を検証」が右クリックで呼び出せなくてイラっとします。

$(document).bind('contextmenu',function(e){ return false; }); 

ちなみに、クリックを「検出」するには、以下のコードを。

$("#id").live('click', function(e) {  
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {  
        alert("左クリックしましたね？");  
    }  
    else if(e.button == 2)  
        alert("右クリックとか、まぢありえないんですけど？");  
}); 

テキストエリアの文字数を制限する

テキストエリア…。
文字数制限しておかないと、だらだらとたくさん書いたりする人いますよね。
そんな時には文字数制限をしてしまいましょう。
「maxLength(数値)」で適用するのですが、数値の単位は文字数ではなくバイト数です。

jQuery.fn.maxLength = function(max){  
    this.each(function(){  
        var type = this.tagName.toLowerCase();  
        var inputType = this.type? this.type.toLowerCase() : null;  
        if(type == "input" && inputType == "text" || inputType == "password"){  
            
            this.maxLength = max;  
        }  
        else if(type == "textarea"){  
            this.onkeypress = function(e){  
                var ob = e || event;  
                var keyCode = ob.keyCode;  
                var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;  
                return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);  
            };  
            this.onkeyup = function(){  
                if(this.value.length > max){  
                    this.value = this.value.substring(0,max);  
                }  
            };  
        }  
    });  
};

▼使い方はこんな感じ▼
$('#id').maxLength(500);

jQueryで要素のクローンを作成する

まあ、あまり使わないかもしれませんが、クローンを作って大量にappend()しまくったりとか。
え…それって(・∀・)ﾌﾞﾗｸﾗ?

var cloned = $('#clone元').clone();

要素を画面中央に表示

よく、LightBox系プラグインに使われてるコードです。

jQuery.fn.center = function () {  
    this.css('position','absolute');  
    this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');  
    this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;
}

    ▼使い方
    $("#要素id").center();

特定の名前のすべての要素の値を配列に取得

いやぁ…これは捗ります。

var arrInputValues = new Array();  
  $("input[name='table\\[\\]']").each(function(){  
    arrInputValues.push($(this).val());  
);  

ストリップタグ(strip HTML-Tag)

要はPHPで言うところの「strip_tags()」です。

(function($) {  
    $.fn.stripHtml = function() {  
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;  
        this.each(function() {  
            $(this).html(  
                $(this).html().replace(regexp,"")  
            );  
        });  
        return $(this);  
    }  
})(jQuery);
 
    ▼使い方  
    $('input').stripHtml();

ページ上のすべてのチェックボックスを切り替える

こういう「全て選択」系のスニペットは結構需要あります。

var tog = false; // ロード時に全てチェックされている設定の時はtrueに  
$('#all').click(function() {  
    $("input[type=checkbox]").attr("checked",!tog);  
    tog = !tog;  
});  

Cookieが有効かそうでないかを確認する方法

よく「クッキーを有効にしてください」とかメッセージが出ますが、あれはこうやって確認してるんですね。

var dt = new Date();  
dt.setSeconds(dt.getSeconds() + 60);  
document.cookie = "cookietest=1; expires=" + dt.toGMTString();  
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;  
if(!cookiesEnabled){
    alert("私の美味しいクッキーは如何ですか？… 欲しけりゃ有効にしな。このブタ野郎！");
}