prop メソッドと attr メソッドの違い

Posted by muchag | jQuery | 2015-02-11 (水) 18:10:45

わかりやすい解説を見つけた。

attrは、HTML属性を取得する、propはjavascriptでの属性を取得する。

true か falseはjavascriptでの属性。

Qiita:jqueryでチェックボックスにチェックを入れるにはpropを使え。

参考サイト

BuildINSIDER:要素のプロパティを取得/設定するには?(prop)

jQuery | 2015-02-11 (水) 18:10:45 |

要素の指定記法

Posted by muchag | jQuery | 2015-02-11 (水) 18:07:29

参考サイトのコードを、理解の浅いまま使い回してはまった。

文字列 -> 検索(部分一致
こちらの記事を書いているときに、問題が起きた
 

現象
  1. <div id="test">
  2.     <button id="hoge_1"></button>
  3.     <button id="hoge_2"></button>
  4. </div>
  1. // 反応しない
  2. $("button [id *= 'hoge_']").hide();
  3.  
  4. // 反応する
  5. $("#test [id *= 'hoge_']").hide();

 

解決

よく見てみれば当たり前のことで
CSS と同じだから、スペースがあると 別の DOM 要素 と判定される。

  1. $("button[id *= 'hoge_']").hide();

これで想定通りに動作した。

jQuery | 2015-02-11 (水) 18:07:29 |

ページの読込

Posted by muchag | jQuery | 2015-02-11 (水) 16:34:22

参考サイトをメモ。

書式

Ajax(Low-Level Interface)
1.8 からこの書式。

  1. $.ajax({
  2.  
  3.     url: 'test.php'
  4. })
  5. .done(function(data, status, xhr) {
  6.  
  7.     // 通信成功時の処理
  8. })
  9. .fail(function(xhr, status, error) {
  10.  
  11.     // 通信失敗時の処理
  12. }).always(function(arg1, status, arg2) {
  13.  
  14.     // 通信完了時の処理
  15. });
  1. $.ajax({
  2.  
  3.     url: 'test.php',
  4.     type: 'POST',
  5.     timeout: 10000
  6. })
  7. .done(function(data, status, xhr) {
  8.  
  9.     $('#result').html(data);
  10. })
  11. .fail(function(xhr, status, error) {
  12.  
  13.     $('#log').append('xhr.status = ' + xhr.status + '<br />');          // 例: 404
  14.     $('#log').append('xhr.statusText = ' + xhr.statusText + '<br />');  // 例: Not Found
  15.     $('#log').append('status = ' + status + '<br />');                  // 例: error
  16.     $('#log').append('error = ' + error + '<br />');                    // 例: Not Found
  17. });
返却値の利用
  1. $.ajax({
  2.  
  3.     url: 'test.php'
  4. })
  5. .done(function(data, status, xhr) {
  6.  
  7.     // これで JSON Object として扱える
  8.     var response = $.parseJSON(data);
  9. })
  10. .fail(function(xhr, status, error) {
  11.  
  12.     // 通信失敗時の処理
  13. })
  14. .always(function(arg1, status, arg2) {
  15.  
  16.     // 通信完了時の処理
  17. });
参考サイト

とほほのWWW入門:jQuery入門 Ajax
→いつもいつもお世話になっております!

Crunchtimer:[jQuery] Ajaxの.loadと.post(.get)の違いについて

Designup:jQueryでAjax 画面遷移なしでデータを読み込む方法
→現在のページの指定箇所へ読み込む方法が載っている

jQuery | 2015-02-11 (水) 16:34:22 |

フォームデータの送信

Posted by muchag | jQuery | 2015-02-11 (水) 16:31:51

参考サイトだけ残しておく。

参考サイト

小粋空間:jQueryでフォームデータを送信する方法のまとめ
小粋空間:jQueryでajax()の重複実行を回避する方法

jQuery | 2015-02-11 (水) 16:31:51 |

jquery.pjax.js (defunkt 版)

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-02-11 (水) 15:20:23

AjaxpushState を組み合わせた技術らしい。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
概要
差し替え機能

とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
 

URL 変更機能

別ページの URL へ切り替える。
 

効能

ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
 

インストール

GitHub:defunkt/jquery-pjax から DL して配置。

falsandtru 版 と呼ばれる別バージョンもあるそうなので

jquery.pjax.defunkt.js

とリネームして配置。
 

使い方
ライブラリの読込
  1. <script src="jquery.min.js"></script>
  2. <script src="jquery.pjax.defunkt.js"></script>

 

ファイルの配置
index.html
  1. <body>
  2.     <div>pjax before.</div>
  3.  
  4.     <div id="container">
  5.         <div><button>pjax before.</button></div>
  6.     </div>
  7.  
  8.     <script type="text/javascript">
  9.     $( document ).ready( function() {
  10.  
  11.         $( 'button' ).click( function() {
  12.  
  13.             $.pjax({
  14.                 url: 'pjax_test.php';
  15.                 container: '#container',
  16.                 fragment:  '#container_new'
  17.             });
  18.         });
  19.     });
  20.     </script>
  21. </body>

 

pjax_test.html
  1. <body>
  2.     <div>pjax after.</div>
  3.  
  4.     <div id="container_new">
  5.  
  6.         <div>pjax after. Good Job!</div>
  7.  
  8.     </div>
  9. </body>

 

結果

これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
 

連続

ところが、1度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
 
そこで1枚のページで差し替えるタイプにしたら、連続して動作した。

index.php
  1. <body>
  2.     <div id="container">
  3.         <div id="test">
  4.             <button id="hoge_1">pjax</button>
  5.             <button id="hoge_2"><?php echo ( empty( $_GET&#91;'value'&#93; ) ) ? 1 : $_GET&#91;'value'&#93; + 1; ?></button>
  6.         </div>
  7.     </div>
  8.  
  9.     <script type="text/javascript">
  10.     $( document ).ready( function() {
  11.         $( 'button' ).click( function() {
  12.             $.pjax({
  13.                 url: 'index.php?value=' + $( '#hoge_2' ).text(),
  14.                 container: '#container',
  15.                 fragment:  '#container_new'
  16.             });
  17.         });
  18.     });
  19.     </script>
  20. </body>

ただし、

  1. container: '#container',
  2. fragment: '#container'

ここを同じ名前にすると1回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな~。。。
 
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯

解決?

やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。

  1. container: '#container',

これでちゃんと動く。
 

オプション、イベント

オプションイベント を見てやってみましょう。
 

開始時処理
  1.  
  2. $(document).on('pjax:send', function(e) {
  3.     $('body').append("<div id='loading'>処理中</div>");
  4. });

 

終了時処理
  1. $(document).on('pjax:complete', function(e,data) {
  2.     $("#loading").remove();
  3. });

これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に!
 

フォームの値の受け渡し

フォームの値の受け渡し 参照。
 

注意

ブラウザバックとかの挙動への対処が必要ね~。
 

参考サイト

RakSul:はじめての「pjax」
Qiita:pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix:defunkt版pjaxの説明

jQuery,Library & PlugIn & AddIn | 2015-02-11 (水) 15:20:23 |

書式

Posted by muchag | jQuery | 2015-02-10 (火) 11:14:07

色々なサイトを見て勉強させていただいているが、書式がバラバラで混乱してきたので、メモ。

jQuery フレームワークの利用

下記、どちらでも同じこと。

  1. jQuery()
  2.  
  3. $()

 
なので

  1. $.isNumeric( arg );
  2.  
  3. jQuery.isNumeric( arg );

これも同じこと。
jQuery 本体のメソッドを使ってるということ。
 

jQuery オブジェクト

下記の3タイプがある。

  1. $( selector [, context ] )
  2.  
  3. $( html [, ownerDocument ] )
  4.  
  5. $( callback )

 

$( selector [, context ] )

いっぱいあるけど、代表は CSS セレクタ(とその属性)。
Category: Selectors

わかりやすくいえば、タグ、id、class など、CSS で直接指定できるもの。

  1. $( 'body' ) // タグ <body>~</body>
  2.  
  3. $( '#hoge' ) // id <div id="hoge">~</div>
  4.  
  5. $( '.moge' ) // class <a class="moge">~</a>
  6.  
  7. $( '*' ) // ユニバーサルセレクタ(全称セレクタ)

これで、それぞれに 該当する DOM 要素を捕まえる ことができる。
 

属性まで含める場合
  1. // id が hoge で、name 属性が・・・
  2.  
  3. $( '#hoge[name="sun"]' ) // sun のもの
  4.  
  5. $( '#hoge[name!="sun"]' ) // sun でないもの
  6.  
  7. $( '#hoge[name^="sun"]' ) // sun で始まるもの
  8.  
  9. $( '#hoge[name$="sun"]' ) // sun で終わるもの
  10.  
  11. $( '#hoge[name*="sun"]' ) // sun を含むもの
  12.  
  13. $( '#hoge[name~="sun"]' ) // sun という「単語」が入っているもの
  1. // name 属性を持っているもの
  2. $( '#hoge[name]' )
  3.  
  4. // hreflang 属性が en であるもの
  5. $( '#hoge[hreflang|="en"]' )
  6.  
  7. // name 属性を持っていて、value 属性が man で終わるもの
  8. $( '#hoge[name][value$="man"]' )

 

$( html [, ownerDocument ] )

DOM 要素そのもの。
DOM 要素 生成中 に割り込む。

  1. $( '<p>jQuery の可能性はすごいね~</p>' )

 

$( callback )

特別なお方。(要は私にはよくわからない) 🙄
DOM 要素を 読み込み終えたとき に発動。

  1. $( document )

特別なので、クォーテーションで括らない
 

メソッド or イベント

オブジェクトを捕まえたら、後はそのメソッドやらイベントやらを繋げていくだけ。

  1. // id が hoge のオブジェクトの text の
  2.  
  3. $( '#hoge' ).text() // getter
  4.  
  5. $( '#hoge' ).text( arg ) // setter
  6.  
  7. $( '#hoge' ).click() // イベントリスナー

 

イベント
  1. .click( handler )
  2.  
  3. .on( "click", handler )

どちらも同意。
と思ったけど、違うらしい。
前者は、読込時に定義してしまうので、動的に変化をさせたものには対応できない。
後者は、イベント発生時に都度調査をするので、動的な変化に耐えられる。
 

onメソッドはイベントが発生するごとにhtmlの構成をチェックします。

jQuery 入門:イベント(2)

マニュアルの上っ面だけを読んでいると危ないにゃ。。。 🙄
 

.trigger
  1. .trigger( "click" )

これは、イベントを発動させる。
 

事前定義

どれも同意。

  1. $( document ).ready( handler )
  2.  
  3. $().ready( handler ) ←非推奨
  4.  
  5. $( handler )
  6.  
  7. $(document).on( "ready", handler ) ←これもあるけど、1.8で廃止予定? てか、上の3つの後になるのでダメ?

 
確かによく見るのは下記2種。
DOM 要素の読み込みを完了したら呼ばれる。

  1. $( document ).ready(function() {
  2. // Handler for .ready() called.
  3. });
  4.  
  5. $(function() {
  6. // Handler for .ready() called.
  7. });

 

this
  1. $( this )
  2.  
  3. this

これも何気に困ってた。
 

$( this ):jQuery オブジェクト
this:DOM 要素(jQuery とは関係ない)

と書いてもすぐにはピンとこないよね~。

例えば、id を取得したかったら、下記のような表記の差が出る。

  1. $( this ).attr( 'id' )
  2.  
  3. this.id
jQuery | 2015-02-10 (火) 11:14:07 |

文字列 -> 検索(部分一致)

Posted by muchag | jQuery | 2015-02-08 (日) 20:12:02

部分的に一致する名前を持つ要素を一括で操作する方法。

jQuery の場合、ページ内の要素をいっぺんに操作することがあるけど、id などを利用して名前をつけている場合、微妙に名前が違うことがある。
これを一括で操作する方法を見つけた。

Qiita:jQueryで指定した文字列を含むidの要素を非表示にする

  1. <tr id="row_1"></tr>
  2. <tr id="row_2"></tr>
  3. <tr id="row_3"></tr>
  1. $( '#row_1' ).hide();
  2. $( '#row_2' ).hide();
  3. $( '#row_3' ).hide();
  4. $( '[id *= "row_"]' ).hide();

1行毎に隠したいときは上を。
全て隠したいときは下を。
便利~♪

jQuery | 2015-02-08 (日) 20:12:02 |

jquery.shapeshift.js (要素を DnD で並べ替える)

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 19:18:53

前回の jquery.tile.js (タイル状に配置)で並べたタイル状要素を DnD で自由に並べ替えられるプラグイン。
jquery.shapeshift.js

またもや、下記サイトにお導きをいただきました。
啓文社:[jQuery] タイルをドラッグ&ドロップで並べ替え

【環境】
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
JS

GitHub:jquery.shapeshift
ここから DL して、入手。

すごい数のオプションw

  1. <script type="text/javascript">
  2. defaults = {
  3.     selector: "*",
  4.     enableDrag: true,
  5.     enableCrossDrop: true,
  6.     enableResize: true,
  7.     enableTrash: false,
  8.     align: "center",
  9.     colWidth: null,
  10.     columns: null,
  11.     minColumns: 1,
  12.     autoHeight: true,
  13.     maxHeight: null,
  14.     minHeight: 100,
  15.     gutterX: 10,
  16.     gutterY: 10,
  17.     paddingX: 10,
  18.     paddingY: 10,
  19.     animated: true,
  20.     animateOnInit: false,
  21.     animationSpeed: 225,
  22.     animationThreshold: 100,
  23.     dragClone: false,
  24.     deleteClone: true,
  25.     dragRate: 100,
  26.     dragWhitelist: "*",
  27.     crossDropWhitelist: "*",
  28.     cutoffStart: null,
  29.     cutoffEnd: null,
  30.     handle: false,
  31.     cloneClass: "ss-cloned-child",
  32.     activeClass: "ss-active-child",
  33.     draggedClass: "ss-dragged-child",
  34.     placeholderClass: "ss-placeholder-child",
  35.     originalContainerClass: "ss-original-container",
  36.     currentContainerClass: "ss-current-container",
  37.     previousContainerClass: "ss-previous-container"
  38. };
  39. </script>

 

HTML
JavaScript 部分

上記オプションの必要部分を、下記で上書きする。

  1. <script type="text/javascript">
  2. $(".container").shapeshift({
  3.     minColumns: 3
  4. });
  5. </script>

 

フック

参考サイト には、下記のような記述があった。
こうすることで、フックを作れるのね~。

  1. <script type="text/javascript">
  2. $(".container").on('ss-drop-complete', function(e){
  3.     $('.tile').tile(4);
  4. });
  5. </script>

 

要素部分
  1. <div class="container">
  2.     <div class="tile">要素</div>
  3.     <div class="tile">要素</div>
  4.     <div data-ss-colspan='2'>要素</div>
  5.     <div class="tile">要素</div>
  6. </div>

 

CSS
  1. .container {
  2.     border: 1px dashed #ccc;
  3.     position: relative;
  4. }
  5.  
  6. .container > div {
  7.     background: #CCC;
  8.     height: 100px;
  9.     position: absolute;
  10.     width: 80px;
  11. }
  12.  
  13. .container > div[data-ss-colspan='2'] { width: 170px; }
  14.  
  15. .container .ss-placeholder-child {
  16.     background: transparent;
  17.     border: 1px dashed red;
  18. }

 

タイルが全て重なってしまう現象

2度起きた。
 
1度目の原因と解決法は忘れてしまった。。。残念。
 

原因

JavaScript のシンタックスエラーだった。
Firefox の開発ツールを起動し忘れていた。 😯

  1. $('[id = "hoge"') // 誤
  2.  
  3. $('[id = "hoge"]') // 誤

閉じカッコ(])が抜けていた。
 
タイル要素内のテキストボックスの値チェックを入れたときに起きた。

jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 19:18:53 |

jquery.tile.js (タイル状に配置)

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 17:12:49

jquery.tile.js
要素をタイル状に並べてくれるプラグイン。

説明サイト
URIN HACK:要素の高さを揃える超軽量なjQueryプラグイン jquery.tile.js

【環境】
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
JS

jquery.tile.js
こちらからソースをコピペして

jquery.tile.js

を作成して配置。
 

HTML
JavaScript 部分
  1. <script src="jquery.tile.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4.   $('.tile').tile();
  5. });
  6. </script>

4行目、titl メソッドの引数に数値を入れると、列数を指定できる。

というわけではなく、x列毎に同じ高さに揃える という指定らしく

  1. $('.tile').tile(4);

このように設定して、表示エリアを5列分取ったら、高さがずれたw

つまり、列数を指定するときは、表示幅もそれに合わせて指定する必要がある
 

要素部分
  1. <div class="tile">1</div>
  2. <div class="tile">2</div>
  3. <div class="tile">3</div>
  4. <div class="tile">4</div>
  5. <div class="tile">5</div>

綺麗に並んだ~♪
 

CSS

お好みに応じて設定。

  1. .tile {
  2.     border:1px solid #999;
  3.     background:#f0f0f0;
  4.     float:left;
  5.     width:130px;
  6.     margin:0 10px 10px 0;
  7. }

啓文社:[jQuery] タイル表示
CSS は、こちらのサイトの例をいただいてきた。
こちらのサイトのおかげで、このプラグインに出会うことができました~

jQuery,Library & PlugIn & AddIn | 2015-02-08 (日) 17:12:49 |

Don’t Use jquery-latest.js

Posted by muchag | jQuery | 2015-02-08 (日) 12:57:12

jquery-latest.js へのリンクは止めましょ~、とのこと。

ちゃんとバージョンが記載されている .js ファイルにリンクしてね。

  1. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- だめよ~!だめだめ! -->
  2.  
  3. <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> <!-- こうしましょ! -->

jQuery:Don’t Use jquery-latest.js

jQuery | 2015-02-08 (日) 12:57:12 |
« 前ページへ次ページへ »