「jQuery」の編集履歴（バックアップ）一覧はこちら

「jQuery」(2017/05/10 (水) 13:08:54) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

*◆&this_page()

#contents()
----

** 重なっているエリアマップは手前に表示されているものが優先
エリアタグで当たり判定を設定して、
当たり判定が重なってなくても、
画像が重なっている部分は手前に表示された画像のマップが優先される。

 <img src="sample1.gif" map="#sampleMap1" border="0">
 <img src="sample2.gif" map="#sampleMap2" border="0">
 
 <map name="sampleMap1">
     <area id="sampleArea1" shape="poly"
     coords="0,0,100,0,100,50,0,50">
 </map>
 <map name="sampleMap2">
     <area id="sampleArea2" shape="poly"
     coords="0,50,100,50,100,100,0,100">
 </map>

↑のようにして、画像はabsoluteで重ねたとしよう。
sample1.gifもsample2.gifもサイズは100x100。
sample1のエリアマップで0, 0から100x50のマップが割り当てられてて、
sample2のエリアマップで0,50から100x50のマップが割り当てられている。
二つは重なっていません。
すると、sample1.gifのエリアは全く反応しなくなる。
これは画像が重なっている為。
手前に表示されているsample2.gifのエリアしか反応しないのだ。
sample1.gifも反応させようとしたら、
sampleMap2にsample1のマップを記述し、
onclickやmouseoverなどの関数内で処理を分岐しなければならない。


**jQueryで多角形のオブジェクトのクリックの仕方
[[タウンワーク>>http://townwork.net/]]のトップページの地図でやってました。
[[areaタグ>>http://w-d-l.net/html__tags__body__map__area/]]を使っているそうです。

**eachについて
 $("div").each(function...
はできるけど、
 $("#name").each(function..
 <div id="name"></div>
はできない。
やるとしたら、
 $("div").each(function() {
     if ($(this).is("#name")) {
         // ここに処理
多分こうやる。
でも試してないので、責任持ちません。

**Strutsのstruts-htmlなどを使用する場合の指定の仕方
 <html:text styleId="aaa"></html:text>
は
 $("#aaa")
で指定できる

** bind と trigger
obj.bind("code", function() { /* 処理 */} );
obj.trigger("code"); ←これで↑ここでbindした処理を呼び出せる。
obj.unbind("code"); ←これでbind解除

**オブジェクトを呼び出し
$('#name') id名を指定
$('.name') class名を指定
$(this).children("#name") 子オブジェクト呼び出し
$(this).children() もOK
$(this).parent("#name") 親オブジェクト呼び出し
$(this).parent() もOK
$("#parent #brother .sister div") とかスペースで繋いで呼び出しもできる
この時、("#parent").children().children("#brother").children().children(".sister")
という状態でも↑のスペース繋ぎで呼び出せる

**関数
オブジェクト.remove()は
関連付けられたプラグインを解除

オブジェクト.empty()は
中身を削除
(divなどを指定すれば、<div>で囲まれたオブジェクトを削除)

**function($)
$をカッコ内に入れることで、
$(this)などしなくても、$だけで自身を取得できる

**中身を取得
 var hoge = $("a", b)
bの中のaを取得

**ジャンププラグイン
&ref(jquery.center.js)
&ref(jquery.jump.js)
[[jquery.timer.js>>http://phpspot.org/blog/archives/2011/06/jqueryjquery_ti.html]]
[[参考URL>>http://himaxoff.blog111.fc2.com/blog-entry-92.html]]

**callback関数の中でthisを使ってはいけない
callback関数ではcallback関数を渡された相手(？)がthisに
なってしまう為、
 var Class = function() {
     this.name = "あああ";
     $.timer(view, 10, true);
     function view() {
         console.log(name);
     }
 }
timerで0.01秒後に呼ばれるviewではあああは表示されない

**datepicker

[[datepicker>>http://alphasis.info/jquery-ui/datepicker/]]
カレンダーを表示するプラグインです。
注意すべき点が２点あります。

(1) ダウンロードすると祝日表示できない
まず、カレンダーに祝日を表示するのに
gcalendar-holidays.jsをダウンロードして
表示しようとしてもできません。
恐らくこのjsとcssの他にも参照しているファイルがいくつかあり、
それが入っていない為だと思います。

https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css
https://0-oo.googlecode.com/svn/jquery.ui.datepicker-ja.min.js
https://0-oo.googlecode.com/svn/gcalendar-holidays.js

↑このようにgoogleサーバにあるjsとcssを参照するようにすれば、
そのファイルの周辺にあるファイルを参照してくれるので
祝日が表示できるようになります。
また毎年変わる祝日などもgoogleさんが対応してくれるので
保守の必要がありません。

(2) UTF-8じゃないページで日本語表示すると文字化け

datepickerはUTF-8で出来ています。
Shift_JISで日本語表示でカレンダー使おうとすると
文字化けします。
(1)の問題から祝日表示する為にはgoogleサーバのファイルを
参照しなければいけません。
でもShift_JISありません。
そんな時はjquery.ui.datepicker-ja.min.jsだけ
ローカルに落としてしまえば正常に動きます。
日本語表示しているのはjquery.ui.datepicker-ja.min.jsで
尚且つ外部ファイルは参照してないっぽいので、
問題なくいけました。

**Ajaxなどでソースが煩雑になる場合のお勧めプラグイン

[[Template plugin>>http://javascript.webcreativepark.net/library/jquery_templates]]

*◆&this_page()

#contents()
----

** 重なっているエリアマップは手前に表示されているものが優先
エリアタグで当たり判定を設定して、
当たり判定が重なってなくても、
画像が重なっている部分は手前に表示された画像のマップが優先される。

 <img src="sample1.gif" map="#sampleMap1" border="0">
 <img src="sample2.gif" map="#sampleMap2" border="0">
 
 <map name="sampleMap1">
     <area id="sampleArea1" shape="poly"
     coords="0,0,100,0,100,50,0,50">
 </map>
 <map name="sampleMap2">
     <area id="sampleArea2" shape="poly"
     coords="0,50,100,50,100,100,0,100">
 </map>

↑のようにして、画像はabsoluteで重ねたとしよう。
sample1.gifもsample2.gifもサイズは100x100。
sample1のエリアマップで0, 0から100x50のマップが割り当てられてて、
sample2のエリアマップで0,50から100x50のマップが割り当てられている。
二つは重なっていません。
すると、sample1.gifのエリアは全く反応しなくなる。
これは画像が重なっている為。
手前に表示されているsample2.gifのエリアしか反応しないのだ。
sample1.gifも反応させようとしたら、
sampleMap2にsample1のマップを記述し、
onclickやmouseoverなどの関数内で処理を分岐しなければならない。


**jQueryで多角形のオブジェクトのクリックの仕方
[[タウンワーク>>http://townwork.net/]]のトップページの地図でやってました。
[[areaタグ>>http://w-d-l.net/html__tags__body__map__area/]]を使っているそうです。

**eachについて
 $("div").each(function...
はできるけど、
 $("#name").each(function..
 <div id="name"></div>
はできない。
やるとしたら、
 $("div").each(function() {
     if ($(this).is("#name")) {
         // ここに処理
多分こうやる。
でも試してないので、責任持ちません。

**Strutsのstruts-htmlなどを使用する場合の指定の仕方
 <html:text styleId="aaa"></html:text>
は
 $("#aaa")
で指定できる

** bind と trigger
obj.bind("code", function() { /* 処理 */} );
obj.trigger("code"); ←これで↑ここでbindした処理を呼び出せる。
obj.unbind("code"); ←これでbind解除

**オブジェクトを呼び出し
$('#name') id名を指定
$('.name') class名を指定
$(this).children("#name") 子オブジェクト呼び出し
$(this).children() もOK
$(this).parent("#name") 親オブジェクト呼び出し
$(this).parent() もOK
$("#parent #brother .sister div") とかスペースで繋いで呼び出しもできる
この時、("#parent").children().children("#brother").children().children(".sister")
という状態でも↑のスペース繋ぎで呼び出せる

**関数
オブジェクト.remove()は
関連付けられたプラグインを解除

オブジェクト.empty()は
中身を削除
(divなどを指定すれば、<div>で囲まれたオブジェクトを削除)

**function($)
$をカッコ内に入れることで、
$(this)などしなくても、$だけで自身を取得できる

**中身を取得
 var hoge = $("a", b)
bの中のaを取得

**ジャンププラグイン
&ref(jquery.center.js)
&ref(jquery.jump.js)
[[jquery.timer.js>>http://phpspot.org/blog/archives/2011/06/jqueryjquery_ti.html]]
[[参考URL>>http://himaxoff.blog111.fc2.com/blog-entry-92.html]]

**callback関数の中でthisを使ってはいけない
callback関数ではcallback関数を渡された相手(？)がthisに
なってしまう為、
 var Class = function() {
     this.name = "あああ";
     $.timer(view, 10, true);
     function view() {
         console.log(name);
     }
 }
timerで0.01秒後に呼ばれるviewではあああは表示されない

**datepicker

[[datepicker>>http://alphasis.info/jquery-ui/datepicker/]]
カレンダーを表示するプラグインです。
注意すべき点が２点あります。

(1) ダウンロードすると祝日表示できない
まず、カレンダーに祝日を表示するのに
gcalendar-holidays.jsをダウンロードして
表示しようとしてもできません。
恐らくこのjsとcssの他にも参照しているファイルがいくつかあり、
それが入っていない為だと思います。

https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css
https://0-oo.googlecode.com/svn/jquery.ui.datepicker-ja.min.js
https://0-oo.googlecode.com/svn/gcalendar-holidays.js

↑このようにgoogleサーバにあるjsとcssを参照するようにすれば、
そのファイルの周辺にあるファイルを参照してくれるので
祝日が表示できるようになります。
また毎年変わる祝日などもgoogleさんが対応してくれるので
保守の必要がありません。

(2) UTF-8じゃないページで日本語表示すると文字化け

datepickerはUTF-8で出来ています。
Shift_JISで日本語表示でカレンダー使おうとすると
文字化けします。
(1)の問題から祝日表示する為にはgoogleサーバのファイルを
参照しなければいけません。
でもShift_JISありません。
そんな時はjquery.ui.datepicker-ja.min.jsだけ
ローカルに落としてしまえば正常に動きます。
日本語表示しているのはjquery.ui.datepicker-ja.min.jsで
尚且つ外部ファイルは参照してないっぽいので、
問題なくいけました。

**Ajaxなどでソースが煩雑になる場合のお勧めプラグイン

[[Template plugin>>http://javascript.webcreativepark.net/library/jquery_templates]]

**Ajaxでローカルファイルを読み込もうとしたけど失敗した

ブラウザでローカルファイルを開こうとするとセキュリティにひっかかって開けないらしい。
おそらく悪意のあるサイトを開いて、ローカルファイルをいじられる危険性を回避する為だと思う。

[[ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法>>http://qiita.com/nissuk/items/1ede2953a8661dc59214]]