2013年02月04日

IEでjQueryの画象のloadが動かない件

IE8以下でjQueryのimg要素のloadが動かない件でプチハマりしたのでメモ

$("<img>").attr("src","....").on("load",function(){
//do something
});


だとすでに画象がキャッシュされている際に動かない。

$("<img>").on("load",function(){
//do something
}).attr("src","....");


にするとちゃんとロードされる。でもwidthやheightはうまくとれないので、

$("<img>").on("load",function(){
setTimeout(function(){
//do something
},1);
}).attr("src","....");


とするとちゃんとwidthやheightも取得できる
タグ:jquery load img IE
posted by ねこまんま at 22:04 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年12月06日

IE9でjQueryのanimateメソッドでtransformを変更する

IE9はCSS3のtransformに対応しているけどtransitionやanimateには対応していない。jQueryのアニメーションでしなくちゃ行けないけどanimateメソッドはtransformに対応していないということで色々と試行錯誤。

IE9の場合のみ以下の関数を使ってアニメーションを行ないました。

var rotate = function(target,value,duration,callback){
target.animate(
{borderSpacing:value},
{
complete:callback,
duration: duration,
step: function(now,fx) {
target.css('-ms-transform','rotate('+now+'deg)');
}
}
)
}


次のように作成したrotateを入れ子にして頑張ってアニメーションします。

var time =300
var target = $("hoge");
rotate(target,5,time*0.2,function(){
rotate(target,0,time*0.2,function(){
rotate(target,-5,time*0.3,function(){
rotate(target,0,time*0.3,function(){})
})
})
})


IEとかなくなったらいいのに。
posted by ねこまんま at 23:06 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryでJSONP

jQueryのajax()でJSONPを扱おうとしたらうまく行かなかったのでメモ。

JSONPのデータはこんな感じ

callback({
data:[
"hoge",
"fuga",
"bar"
]
})


試そうとしたのは次のような感じ

var def = $.ajax("hoge.json",{
"dataType":"jsonp"
});


これだと動かない。

jQueryでコールバック関数をcallbackと固定するには次のようにjsonpCallbackオプションを指定しないとダメ。


var def = $.ajax("hoge.json",{
dataType:"jsonp",
jsonpCallback:"callback"
});
タグ:AJAX jquery JSONP
posted by ねこまんま at 12:57 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年11月02日

jQueryつかってプログレスバーを表示する

次のURLが参考になった。

$.ajaxファイルアップロードでプログレスバーを表示する。 - ブックマクロ開発に

progressイベントで通信の状態を監視できるらしい。

ただ、jQueryの場合はdeferred.progress()を使ったほうがスマートじゃないかという噂も。
posted by ねこまんま at 20:03 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年07月14日

iPhoneでjQueryのliveイベントが発火しない件

iPhoneでjQueryのliveイベントが発火しない。

$("div").live("click",function(){
alert("ok")
});


delegateもdocumentやbodyにbindした際に発火しない。

$(document).delegate("h1","click",function(){
alert("ok")
})


$("body").delegate("h1","click",function(){
alert("ok")
})


解決策としては「cursor: pointer;」を要素に指定するというもの。

h1{
cursor: pointer;
}


はい、すごいですね。たまにあるclickイベントが発火しないときにも有効です。

posted by ねこまんま at 01:55 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年04月18日

jQuery を利用して1行の高さ(line-heigt)を取得する

jQueryでline-heigtで1行の高さを取得しようとした所、ブラウザにより返り値がちがったので対応しました。

if($.browser.msie && $.browser.version===9.0){
var lineHeight = $(this).css("line-height")*parseInt($(this).css("font-size"))
}else if($.browser.msie ){
var getStyle = $(this)[0].currentStyle || document.defaultView.getComputedStyle($(this)[0], '');
var lineHeight = getStyle.lineHeight*parseInt($(this).css("font-size"))
}else{
var lineHeight = parseInt($(this).css("line-height"));
}
alert(lineHeight)


こんな感じでした。
posted by ねこまんま at 15:58 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年11月25日

jQueryでブラウザがCSS3に対応しているか確認する方法

10 awesome jQuery snippets | CatsWhoCode.comよりブラウザがCSS3に対応しているか確認する方法

var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;

return function(prop) {
if ( prop in div.style ) return true;

prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});

while(len--) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
};
})();
if ( supports('textShadow') ) {
document.documentElement.className += ' textShadow';
}


なるほど
タグ:jquery
posted by ねこまんま at 19:15 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryでURLのパラメータを取得する

10 awesome jQuery snippets | CatsWhoCode.comよりURLのパラメータを取得する方法。

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return results[1] || 0;
}


なるほど
タグ:jquery
posted by ねこまんま at 19:07 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年10月14日

jQuery UIでsortable要素にinputやtextareaがある場合に選択できない

sortableを指定しドラッグアンドドロップを可能にした要素内にinput要素やtextarea要素があると選択されなくなってしまう。

#4429 (Can't select text in inputs within sortables) – jQuery UIによると以下のようにすると解決できそう。

$("#hoge").sortable().disableSelection().delegate('input,textarea','click',function(ev){
ev.target.focus();
});


若干ソースは変更してます(delegate使わない意味がわからない)。

posted by ねこまんま at 18:58 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQuery UIでドラッグアンドドロップを実装

jQuery UIを利用してドラッグアンドドロップを実装する方法

$(function(){
$("#hoge").sortable({cancel:"tr.field-Title"}).disableSelection();
});


sortable()で子要素をドラッグアンドドロップ可能になる。オプションには様々な項目が設定できcancelにはドラッグアンドドロップの対象にしない要素がセレクタで指定できる。

sortableはテキストが選択されてしまうのを防ぐメソッド。
posted by ねこまんま at 00:39 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年10月05日

jsonとjQueryの悩ましい関係

次のようなコードを書いたらエラーが出てしまって良くよく調べるとjsonの形式が間違っていたわけです。

var jXHR = $.ajax({
url:"ajax.json",
dataType : "josn"
});
jXHR.done(function(json){
console.log("ajax success");
}).fail(function(data,type){
console.log("ajax error");
});


jsonデータは次のような感じ。

{ Data {....} }


jQuery1.3までは動いたのですがjQuery1.4からはこのコードじゃ動かない。

{ "Data" {....} }


みたいにパラメーターをダブルクオーテーションで包まなくちゃいけない。

APIをいじれない場合は次のように書いて対応することも可能

var jXHR = $.ajax({
url:"ajax.json",
dataType : "text"
});
jXHR.done(function(json){
console.log("ajax success");
eval("var json="+json);
}).fail(function(data,type){
console.log("ajax error");
});


evalとか使いたくないしやっぱりAPIを正しいものに直すのがいいと思う
posted by ねこまんま at 20:32 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月28日

jQuery Deferredを利用したイケテルアニメーション制御

jQuery Deferredを利用したイケテルアニメーション制御、もっといい方法があるかもしれないので暫定版。

var que01 = $("#box1").animate({left:"100px"});
var que02 = $.when(que01).pipe(function(){
return $("#box2").animate({top:"100px"});
});
var que03 = $.when(que02).pipe(function(){
return $("#box1").animate({top:"100px"});
});
var que04 = $.when(que03).pipe(function(){
return $("#box2").animate({left:"100px"});
});
var que05_1 = $.when(que04).pipe(function(){
return $("#box1").animate({left:0,top:0});
});
var que05_2 = $.when(que04).pipe(function(){
return $("#box2").animate({left:"200px",top:"200px"});
})


サンプル

jQuery Deferredの遅延を利用して擬似的にキューを作成していくイメージ、入れ子祭りを防ぐだけでなく複数のアニメーションを同時に実行したり、複数のアニメーションが終った際に実行したい処理を制御できたりと結構便利。
posted by ねこまんま at 11:10 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

resolveとresolveWith(rejectとrejectWith)

jQuery Deferredでは遅延された処理の発火にresolveとresolveWith(失敗時はrejectとrejectWith)を利用します。これらの違いはresolveWithではコンテキストの設定が可能な点です。コールバック関数はコンテキストのメソッドとして実行されるのでthisでコンテキストで指定したオブジェクトにアクセスが可能です。

var obj = $.Deferred();
obj.then(function(arg1,arg2){
$("body").append("<hr>");
$("body").append(this.key);
$("body").append("<hr>");
$("body").append(arg1);
$("body").append("<hr>");
$("body").append(arg2);
});
hoge = {
key:"val"
}
$("#resolveWith").click(function(){
obj.resolveWith(hoge,["hoge1","hoge2"]);
});


サンプル

引数の扱いには注意が必要でresolveやrejectではオブジェクトがそのままコールバック関数の引数として渡されるのに対して、resolveWithやrejectWithは配列で渡した引数を展開して取得する必要があります。
posted by ねこまんま at 10:51 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月27日

jQuery Deferred2

jQuery Deferredの続き

deferred.isRejected()とdeferred.isResolved()

すでにrejectedかresolvedが行なわれているかチェックできるメソッド。

var obj = $.Deferred();
obj.then(function(){
if(obj.isResolved())alert('ok');//ok
});

setTimeout( function() {
if(obj.isResolved())alert('ng');
obj.resolve();
}, 2000 );


このコードではngはアラートされないがokはアラートが表示される。

サンプル

deferred.pipe()

pipe()はDeferredオブジェクトがresolveやrejectに設定された内容を実行する前に制御したい命令を入れることができる。

var defer = $.Deferred(),
filtered = defer.pipe(function( value ) {
return value * 2;
});
defer.resolve( 5 );
filtered.done(function( value ) {
alert( "Value is ( 2*5 = ) 10: " + value );
});


deferred.promise();

promise()はDeferredオブジェクトを返す。

var obj = $.Deferred();
var func = function(){
$("body").append("<p>run....</p>");
setTimeout(function(){
obj.resolve();
},2000);
return obj.promise();
}

$.when(func()).done(function(){
$("body").append("<p>finish!</p>");
});


このようにDeferredオブジェクトを返すことでwhenメソッドで遅延の制御が可能になる。

サンプル
posted by ねこまんま at 15:19 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月25日

jQuery Deferred

jQuery DeferredはjQuery1.5から追加された機能。名前の通りDeferred(繰延)についての制御が可能。

Deferredメソッド

単純にDeferredオブジェクトを生成するにはDeferredメソッドを実行する。

var obj = $.Deferred();


それ以外でもアニメーション系のメソッドやAjax系のメソッドがDeferredオブジェクトを返すようになっている。

var obj = $("#hoge").animated(....)


var obj = $.ajax(....)


thenメソッドとresolveメソッド

Deferredオブジェクトは遅延を制御します。Deferredオブジェクトにthenメソッドを利用して遅延して行いたい処理を実装します。設定しておいた処理はresolveメソッド実行時に処理されます。

var obj = $.Deferred();
obj.then(function(){
alert('ok1');
});

setTimeout( function() {
obj.resolve();
}, 2000 );


この場合2秒後にthenで設定していたalertが表示される。

サンプル

アニメーション系のメソッドはアニメーション終了時に、Ajax系のメソッドはAjax終了時にresolveメソッドが実行されます。

rejectメソッドとfailメソッド


失敗時の処理を制御できるのがfailメソッド、失敗時に実行したい命令をfailメソッドで指定しておきrejectメソッドで発火出来る

var obj = $.Deferred();
obj.then(function(){
alert('ok1');
}).fail(function(){
alert('ng!')
});

setTimeout( function() {
obj.reject();
}, 2000 );


サンプル

Ajax系のメソッドはAjax失敗時にrejectメソッドが実行されます。

alwaysメソッド

全てのケース、つまりreject()されようがresolve()されようが実行するのがalways

var obj = $.Deferred();
obj.always(function(){
alert("finish")
});

setTimeout( function() {
obj.reject();// or ojb resolve()
}, 2000 );


サンプル

whenメソッドとdoneメソッド

複数のDeferredオブジェクトの遅延を制御できるのがwhenメソッド。

var obj1 = $.Deferred();
var obj2 = $.Deferred();

$.when(obj1,obj2).done(function(){
$("body").append("<p>complete</p>")
})

setTimeout( function() {
$("body").append("<p>obj1 end</p>")

obj1.resolve();
}, 2000 );

setTimeout( function() {
$("body").append("<p>obj2 end</p>")
obj2.resolve();
}, 4000 );


whenメソッドで指定された複数のDeferredオブジェクトが実行された際にdoneメソッドで定義されている処理が実行されます。

サンプル
posted by ねこまんま at 09:00 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月24日

jQueryのdetachメソッド

ドキュメントを眺めているとdetachメソッドがjQuery1.4から追加されていました。基本的にはremoveメソッドと同じ動きをします。返り値として削除したjQueryオブジェクトを返すので保存しておいて後から追加する際に便利。

<input type="button" id="show" value="show">
<input type="button" id="hide" value="hide">
<p id="p">aaaa</p>


var p;
$("#show").click(function(){
$("body").append(p);
});
$("#hide").click(function(){
p = $("#p").detach();
});


サンプル
タグ:jquery Detach remove
posted by ねこまんま at 20:34 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryのpropメソッド

jQuery1.6で追加されたpropメソッド。<input id="hoge" checked="checked">なんかがあった場合、属性が存在する場合、trueを返す。

alert($("#hoge").attr("checked"));//checked
alert($("#hoge").prop("checked"));//true


サンプル(1.6.3)

これによりattrメソッドも若干挙動が変わっている。これまではattrがtrueを返していた。

alert($("#hoge").attr("checked"));//true


サンプル(1.5.2)
タグ:Prop jquery attr
posted by ねこまんま at 13:46 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryのholdReadyメソッド

jQuery1.6からholdReadyメソッドが追加されております。どういったものかというと

簡単に言うとreadyメソッドの実行タイミングを制御できるメソッドです。$.holdReady(true);を設定するとハンドリングされたreadyメソッドは$.holdReady(false);が実行されるまで発火しません

$.holdReady(true);

setTimeout( function() {
$("body").append("<h1>success1!!</h1>");
$.holdReady(false);
}, 2000 );

$(function() {
$("body").append("<h1>success2!!</h1>");
});


サンプル
タグ:holdReady jquery
posted by ねこまんま at 08:41 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月08日

画像の読み込みが終ったあとにスクリプトを実行する2

以前紹介した画像の読み込みが終ったあとにスクリプトを実行するに不具合があったので改訂版を紹介

$("#mainContent").html(mainContent);
var imgSize = $("img",mainContent).size();
$("img",mainContent).load(function(){
loadImages();
}).error(function(){
loadImages();
});
var loadImages = function(){
--imgSize;
if(imgSize==0){
//実行したい命令
}
}


画像の読み込みに失敗した際に命令を通過しなかったのでerrorメソッドを利用して、エラーがあってもちゃんと通過するようにしておきます。
タグ:jquery
posted by ねこまんま at 05:24 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryプラグイン「Isotope」でIEの不具合を修正する

jQueryプラグイン「Isotope」でIE6の不具合を修正する方法。

Isotopeではエフェクトを制御する為、要素にfilterが自動的に適応されます。その為、marginやpositionを指定した配置を行った場合、表示がおかしくなることがあります。

$('#unitItem').isotope({
filter: "" ,
animationOptions: {
duration: 250,
easing: 'linear',
queue: false ,
complete : function(){
if($.browser.ie){
$(this).attr("style",$(this).attr("style").replace("alpha(opacity=100)",""))
}
}
}
});


animataionOptionsではanimateメソッドのオプションが指定できるのcompleteでアニメーションが終った際にfilterの値を初期化しておきます。
posted by ねこまんま at 05:12 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年09月04日

豪華なエフェクトでソートや絞り込みを行うjQueryプラグイン「Isotope」

Isotopeは非常に美しいエフェクトで要素の絞り込みや並び替えを行えるjQueryプラグイン。プラグイン本体の読み込みとCSSに次の記述を追加しておきます。

.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}


次のように指定すると子要素の高さが揃えられ準備が完了です。

$('#unitItem').isotope({
layoutMode : 'fitRows'
})


次のようなメソッドを実行するとfilterで要素を絞り込みアニメーションして表示されるようになります。

$('#unitItem').isotope({ filter: ".hoge" });
posted by ねこまんま at 13:21 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

ハッシュチェンジイベントに対応する「jQuery hashchange event」

URLのハッシュチェンジ時にイベントを実行する実行するハッシュチェンジイベントがBen Alman » jQuery hashchange eventで公開されています。

$(window).hashchange(function() {
hoge(location.hash.replace('#', ''));
});
$(window).hashchange();


などとするとハッシュが変更された際にhoge()が実行されます。どういういいことがあるかというと通常イベントとして捉えることができないhistory.back()でハッシュが変わった際もイベントを捉えることができます。知っているとちょっと便利。
タグ:jquery hashchange
posted by ねこまんま at 13:12 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年08月22日

IEでXMLをjQueryオブジェクトに変換する方法

$(xmlデータ)といった感じでXMLデータを$メソッドに通したらjQueryオブジェクトに変換してくれると思ったらIEだけ変換してくれませんでした!

色々試したら次のように ActiveXObjectクラスを利用するとIEではjQueryオブジェクトに変換できます。

var parseXML = function(str){
if(!$.support.htmlSerialize){
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(str);
return $(xmlDoc);
}else{
return $(str);
}
}
タグ:IE xml jquery
posted by ねこまんま at 11:22 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年04月16日

jQueryのbrowserメソッドをiPhoneやAndroidでも利用

jQueryのbrowserメソッドをiPhoneやAndroidでも利用する方法

var ua = navigator.userAgent.toLowerCase();
$.browser.android = /android/.test(ua);
$.browser.iphone = /iphone/.test(ua);


こんな感じで$.browserに新しいプロパティを追加してあげればOK


デバイスごとにも定義可能です。xperia(無印)だと次のような感じ。

$.browser.xperia = /so\-01b/.test(ua);


AndroidはバージョンアップするとUAが変わることもあるので、変わりにくそうな所で判定するのがよいかと。
posted by ねこまんま at 03:09 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2011年01月30日

jQuery.cssHooksによるCSSプロパティの拡張

jquery cssプロパティ拡張を読んでてすごいなと思い試してみたところうまく動かない。jQuery1.4.4ではcurCSSを拡張してもちゃんとうごかないっぽい。変わりにソースコードを眺めているとcssHooksというプロパティがあってこれでいけるっぽい。


(function ($) {
jQuery.cssHooks.hoge = {
get: function( elem, computed ) {
return jQuery(elem).css("backgroundColor");
},
set: function( elem, value ) {
jQuery(elem).css("backgroundColor",value);
}
}
})(jQuery);
$(function(){
var hoge = $("body");
hoge.css("hoge","red")
alert(hoge.css("hoge"));
});


便利になってる!もうちょっと調べたら萌え萌えCSSに行き着いた。
タグ:cssHook
posted by ねこまんま at 06:48 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年10月18日

jQuery.extendとjQuery.fn.extendによるオブジェクトの拡張

jQuery.extendではjQueryオブジェクトそのものを拡張することができる。

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});


などとすると


console.log($.min(10,5));//5
console.log($.max(10,5));//10


などのメソッドが利用できるようになる。

一方jQuery.fn.extendではjQueryオブジェクトのプロトタイプを拡張できる。簡単に言うとメソッドチェーンが利用可能になるわけだ、

jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
タグ:extend jquery
posted by ねこまんま at 08:09 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年09月11日

ブックマークレットでjQueryを利用

いろいろと試したけど次のような感じにするとブックマークレットでjQueryを利用可能

javascript:(function(){
if(typeof jQuery=='undefined'){
var d=document,s=d.createElement('script');
s.type='text/javascript';
s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
d.getElementsByTagName('body')[0].appendChild(s);
function c(){
setTimeout(function(){
if(typeof jQuery=='undefined'){
c()
}else{
bookmarklet()
}
},500)
}
c()
}else{
bookmarklet()
}
function bookmarklet(){
/*ここに処理を記述*/
jQuery('a').css('color','red');
}
})()


圧縮しても結構な文字数になるのね・・・
posted by ねこまんま at 11:14 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年09月08日

jQueryのカスタムイベント 1

jQueryのカスタムイベント。独自の名前をbindしておきtriggerで実行できる。


$("p").bind("myCustomEvent", function(e, myName){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});


使いどころがよくわからんけど。(関数とほぼおなじ?)
posted by ねこまんま at 19:38 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年09月01日

jQueryのテストフレームワーク「QUnit」

jQueryのテストフレームワーク「QUnit」を使ってみました。

QUnitプロジェクト
QUnit ソースコード

まずはgithubよりソースコードをダウンロードします。

ダウンロードしたファイルで利用するのは「qunit.js」と「qunit.css」。
次のようにダウンロードせずに直接githubから参照することも出来る。

<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>


QUnitでは次のようにテストを行います。

test("a basic test example" , function(){
ok(true , "this test is fine");
var value = "hello";
equals(value , "helo", "We expect value to be hello");
same(value , "helo", "We expect value to be hello");
});


testメソッドの第1引数にテスト名、第2引数にテストケースを含めた関数を定義します。

テストの出力用に次のようなHTMLを追加しておきます。

<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>


テスト時は次の3つのアサーションが利用できます。

ok(true , "this test is fine");


okメソッドでは第1引数がtrueの場合にテストが通りfalseの場合テストに通りません。第2引数にメッセージが定義できます。

equals(value , "helo", "We expect value to be hello");


equalsメソッドでは第1引数と第2引数が等しい場合にテストに通ります。第2引数にメッセージが定義できます。


same(value , "helo", "We expect value to be hello");


sameメソッドはequalsメソッドより厳格には第1引数と第2引数が等しいかチェックします。(値だけではなく型まで同じかどうか確認)

アサーション以外にも次のようなメソッドでテストが制御できます。

expect( 数値) : 


expectはtestメソッド中で実行されているアサーションの数が指定できます。第2引数にメッセージが定義できません。


module("Module");


moduleメソッドでは続くテストの名前を付けることが出来ます。setupとteardownの関数をリセットしてくれる効果もあります


module("Module B",{
setup:function(){
hoge1=100
},
teardown:function(){
hoge1=0
}
});


setupとteardownの関数は次のように定義できます。(teardownが良くわかってない)

次のサイトが非常に詳しく解説されていてわかりやすかったです。

[JavaScript][jQuery][QUnit]QUnitの基本的な使い方

タグ:QUnit
posted by ねこまんま at 06:03 | Comment(1) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年08月20日

$.supportのサポート状態を確認するスクリプト

$.supportの対応状況を確認するスクリプトを作成しました。

$(function(){
var supports = ["boxModel","cssFloat","hrefNormalized","htmlSerialize","leadingWhitespace","noCloneEvent","opacity","scriptEval","style","tbody","checkOn","checkClone","deleteExpando"];
var table =$("<table></table>");
$.each(supports,function(){
$(table).append("<tr><td>"+this+"</td><td>"+$.support[this]+"</td></tr>");
})
$("body").html(table)
})


このスクリプトを確認したいブラウザで実行してください
タグ:jquery suppor
posted by ねこまんま at 22:03 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年07月12日

jQueryでイベントのbind時にデータを付加

知らなかったけどjQueryでbindする際に第2引数にデータを付加ことが出来る

$("#hoge").bind("click","aa",function(e){
console.log(e.data)//aa
})
タグ:bind
posted by ねこまんま at 05:36 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年05月29日

jQueryのNamespaced Events

jQueryではNamespaced Eventsが定義されています。

$('.class').bind('click.namespace', function(){}); 
$('.class').trigger('click.namespace');
$('.class').unbind('click.namespace');


イベントをbindする際にclick.namespaceのようにイベントに名前をつけます。

namespaceはtriggerとunbindで利用でき、特定のイベントの実行や特定のイベントの削除が可能になります。
posted by ねこまんま at 01:26 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年05月14日

jQueryでセレクタを自作する

jQueryでは次のようにセレクタを自作する

jQuery.extend(jQuery.expr[":"], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});


このようにすると高さが100px異常の要素のみを絞り込むセレクタを自作することが出来ます。

$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});
タグ:jquery
posted by ねこまんま at 02:42 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年05月12日

jQuery1.4で強化されたDOM操作系関数

jQuery1.4でDOM操作系関数に対して関数が設定できるようになりました。

$('#foo').append(function() {
return $(this).hasClass('hoge') ? 'hoge' : 'fuga';
});


以下のメソッドで利用できます。
attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), .toggleClass()

$('a').html(function(i,html){
return html.replace(/&/gi,'<span class="amp">&');
});


関数内では第一引数としてインデックス番号、第2引数として現在の値を引き渡すことができます。
posted by ねこまんま at 23:34 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年05月09日

jQuery1.4で強化されたCSS()

jQuery1.4ではCSSのプロパティに関数を設定できるようになった。

$('div').css("width",function(index, value){
return parseFloat(value)*2;
})


こうすることで現在の倍のサイズのwidthが設定できる。

$('div').css("width",function(index, value){
if(index==0)return parseFloat(value)*2;
})


このようにすると一番最初のdiv要素のサイズだけ変更できる。

$('div').css("width",function(index, value){
if($('div').size()==index+1)return parseFloat(value)*2;
})


このようにすると一番最後のdiv要素のサイズだけ変更できる。

関数を設定できることにより複雑な条件指定や、他の処理を組み込むことが可能になった。

オブジェクトでCSSを指定する際にも同様の指定が可能です。

$('div').css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
タグ:jquery CSS
posted by ねこまんま at 20:52 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQuery1.4のanimate()

jQuery1.4でanimate関数が大幅に強化された

$('#animate').animate({
width: 500,
height:500
},500,'swing');


基本はこのようにanimate(プロパティ[,スピード][,イージング][,コールバック関数])のように設定する。

$('#animate').animate({
width: '-=10',
height:'+=100'
}, 500,'swing');


CSSプロパティ値は上のように書くと徐々に増やすや減らすなんかが可能になる。(jQuery1.3からあるんですね)

$('#animate').animate({
width: '-=10',
height:'toggle'
}, 500,'swing');


heightプロパティに「toggle」を設定することで要素がある場合はheightを0にし消し、要素がない場合はheightを戻して表示するなんかできる。(これもjQuery1.3からあるんですね)

$('#animate').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'linear']
}, 500,'swing');


1.4からは各アニメーションに対してイージングを指定できるようになった。

$('#animate').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'swing'
},
complete: function() {
$(this).after('Animation complete.');
}
});


さらにduration(速度)specialEasing(イージング)complete(コースバック関数)をまとめてオブジェクトで指定できるようになった。
タグ:animate jquery
posted by ねこまんま at 01:34 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年05月08日

jQueryのbind()で複数イベントの指定

jQuery1.4からbind()で複数イベントの設定が可能になりました。

$('#bind').bind({
click: function() {
// click event
},
mouseover: function() {
// mouseover event
},
mouseout: function() {
// mouseout event
}
});


ちょっとだけオブジェクティブなプログラムを書けるようになったかな
タグ:jquery bind
posted by ねこまんま at 02:28 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年05月03日

jQueryでclickイベントに引数を渡す

クロージャーの箇所で気づいたんだけどclickイベントに引数を渡す場合は次のように書けばよい

$("#btn2").click(function(e){
return function() {
console.log(e.value)// Proxy
}
}({
value:"Proxy"
})
);


clickイベントの第一引数はfunctionなのでreturn functionを行うと引数が渡せる。
タグ:Click jquery
posted by ねこまんま at 08:35 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryでクロージャー

クロージャーネタ jQueyrバージョン

このままだとやはり4を返す。

$(function(){
var i=0;
$("li").each(function(){
i++;
$(this).click(function(){
console.log(i)
})
})
})


このように関数をすぐに返すことで0,1,2,3のようにクリックした要素の番号を返す。

$(function(){
var i=0;
$("li").each(function(){
i++;
$(this).click(function(n){
return function() {
console.log(n)
};
}(i))
})
})


posted by ねこまんま at 08:18 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年05月02日

オブジェクトの有無を判定する$.isEmptyObject()、$.isPlainObject()

jQuery1.4では新たに空のオブジェクトか判定するメソッド$.isEmptyObject()とオブジェクトかどうかを判定するメソッド$.isPlainObject()が追加されています。

$.isEmptyObject({});          //=> true
$.isEmptyObject([]); //=> true
$.isEmptyObject(''); //=> true
$.isEmptyObject(0); //=> true
$.isEmptyObject(null); //=> true
$.isEmptyObject(undefined); //=> true
$.isEmptyObject('foo'); //=> false
$.isEmptyObject({foo:'bar'}); //=> false
$.isEmptyObject(new Object); //=> true

$.isPlainObject({}); //=> true
$.isPlainObject([]); //=> false
$.isPlainObject(''); //=> false
$.isPlainObject(0); //=> false
$.isPlainObject(null); //=> false
$.isPlainObject(undefined); //=> false
$.isPlainObject('foo'); //=> false
$.isPlainObject({foo:'bar'}); //=> true
$.isPlainObject(new Object); //=> true

posted by ねこまんま at 23:33 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQuery.proxy()で複雑なイベント処理

jQuery1.4では複雑なオブジェクト指向なイベント設定がproxyメソッドを利用して可能になった。

jQuery.proxy( function, context )


次のようにcontextにオブジェクトを渡すことによりfunction内のthisの値が変更する

<input type="button" id="btn1" value="Normal1" />
<input type="button" id="btn2" value="Normal2" />

$("#btn1").click(function(){
alert(this.value)// Normal1
});
$("#btn2").click($.proxy( function(){
alert(this.value)// Proxy​
}, {
value:"Proxy"
}) );


元のthis利用したいなというケースが多そうですが、それの取得方法はなさそうです。ちょっと使いにくいかな。

jQuery.proxy( context, name )


もうひとつの使い方は

nameにコンストラクタを設定して実行

var obj = {
name: "John",
test: function() {
console.log(this.name);
$("#btn2").unbind("click", obj.test);
}
};
$("#btn2").click($.proxy(obj, "test"));


コンストラクタのunbindなども出来る。これは便利。

ただ、これもやっぱり元のthis利用したいな

タグ:jquery proxy
posted by ねこまんま at 18:10 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryの本当のfocusinとfocusoutの使い方

jQuery1.4で追加された新たなイベントfocusin()、focusout()では『ただ、フォーカスが発生した要素が取得できないので使い方がわからない。』と絞めくくっていたわけども冷静に考えると「e.target」で取得できるわけでフォーカスに対応したイベントデリゲート用の関数と考えれば合点がいく。

$(function(){
$('#foo').focusin(function(e) {
$(e.target).css("background","red")
}).focusout(function(e) {
$(e.target).css("background","white")
});
});


参考:イベントデリゲートで効率よくイベントを設定
posted by ねこまんま at 17:01 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryオブジェクトを配列に変換するtoArray()

jQuery1.4で追加されたtoArray()はjQueryオブジェクトを配列に変換する関数

$(function(){
console.log(IsArray( $('#foo li').toArray() ));//true
console.log(IsArray( $('#foo li') ));//false
function IsArray(array) {
return(array.constructor===Array);
}
});


配列かどうか調べる関数を利用して調べるとこんな感じになる。

配列でDOMオブジェクトを返すって事はget()とおんなじ?
タグ:toArray jquery GET
posted by ねこまんま at 00:04 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年05月01日

jQueryのfirst()、last()

jQuery1.4では新たなフィルタリングにfirst()、last()が追加されました。

これは、セレクタの指定で:first-child、:last-childとつけるのと同等と説明されることもありますが間違い。

<ul>
<li>a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
<li>a5</li>
<li>a6</li>
</ul>
<ul>
<li>b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
<li>b5</li>
<li>b6</li>
</ul>


このようなHTMLで

$("li").first().css("color","red")


の対称になるのはa1のみ

$("li:first-child").css("color","red")


だと、a1とb1が対象になる。

セレクターだと:fistと同じ意味のフィルターです。

$("li:first").css("color","red")


child(子要素)であるのが重要

<dl>
<dt>a1</dt>
<dd>a2</dd>
</dt>


このようなHTMLで

$("dd:first").css("color","red")


とした場合、dd要素が赤色になるが

$("dd:first-child").css("color","red")


とした場合、なにも赤色にならない。これは最初の子要素がdt要素の為。

last()もおんなじような感じです。
タグ:first last jquery
posted by ねこまんま at 02:18 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年04月30日

イベントデリゲートで効率よくイベントを設定

通常イベントを設定すると次のようになる。

$(function(){
$("li").click(function(e){
$(this).css("color","red")
})
});


これだとliの数が多くなるとすべてにイベントが設定されている状態になりブラウザのメモリに多大な負担がかかる。

$(function(){
$("ul").click(function(e){
$(e.target).css("color","red")
})
});


次のように記述すると設定するイベントはひとつでよい
タグ:jquery
posted by ねこまんま at 01:55 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQuery1.4で追加された新たなイベントfocusin()、focusout()

focusin()、focusout()はjQuery1.4で追加された新たなイベントです。

$('#foo').focusin(function() {
$("input",this).css("background","blue")
}).focusout(function() {
$("input",this).css("background","white")
});


指定した要素の子要素のフォーカスイベントを検出できる。

ただ、フォーカスが発生した要素が取得できないので使い方がわからない。

参考:.focusin() – jQuery API
参考:.focusout() – jQuery API
posted by ねこまんま at 00:48 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年04月29日

jQueryでイベントやデータを残したまま要素を削除できるdetach

jQuery1.4で追加されたdetach()はイベントやdataを残したまま削除できるメソッド

これだとイベントが残るが

$(function(){
var detach = $("#detach").click(function(){
alert($(this).data("foo"))
}).data("foo","var").deach()
$('body').append(detach);
});


これだと残らない

$(function(){
var detach = $("#detach").click(function(){
alert($(this).data("foo"))
}).data("foo","var").remove()
$('body').append(detach);
});
タグ:jquery Detach
posted by ねこまんま at 16:20 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryで親要素を削除するunwrap()

jQuery1.4で追加されたunwrap()は親要素を削除することが出来るメソッドです。

$('#unwrap').unwrap();


とすると

<h1><p id="unwrap">unwrap</p></h1>




<p id="unwrap">unwrap</p>


になります。wrap()の反対ですね。

参考:.unwrap() – jQuery API
タグ:jquery Unwrap
posted by ねこまんま at 09:19 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2010年04月28日

jQueryでセレクターがある場合に実行するhas()

jQuery1.4で新たに追加されたhas()はセレクターで指定した要素が存在する場合に命令を実行するメソッドです。

<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>


$('li').has('ul').css('background-color', 'red');


この場合、item2の背景のみが赤色に変わる。

これは、

$('li:has(ul)').css('background-color', 'red');


というセレクターと同じ意味です。

参考:.has() – jQuery API
タグ:jquery HAS
posted by ねこまんま at 15:29 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryでアニメーションを遅らせて実行するdelay()

jQuery1.4で新たに追加されたdelayはアニメーションを遅らせて実行することが出来ます。

$('#foo').slideUp(300).delay(1000).fadeIn(400);


この場合slideUpの1000ミリ秒後にfadeInが実行されます。

参考:.delay() – jQuery API
タグ:Delay jquery
posted by ねこまんま at 01:57 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする