prop メソッドと attr メソッドの違い
わかりやすい解説を見つけた。
attrは、HTML属性を取得する、propはjavascriptでの属性を取得する。
true か falseはjavascriptでの属性。
参考サイト
BuildINSIDER：要素のプロパティを取得／設定するには？（prop）
要素の指定記法
参考サイトのコードを、理解の浅いまま使い回してはまった。
文字列 -> 検索（部分一致
こちらの記事を書いているときに、問題が起きた
現象
- <div id="test">
- <button id="hoge_1"></button>
- <button id="hoge_2"></button>
- </div>
- // 反応しない
- $("button [id *= 'hoge_']").hide();
- // 反応する
- $("#test [id *= 'hoge_']").hide();
解決
よく見てみれば当たり前のことで
CSS と同じだから、スペースがあると 別の DOM 要素 と判定される。
- $("button[id *= 'hoge_']").hide();
これで想定通りに動作した。
ページの読込
参考サイトをメモ。
書式
Ajax(Low-Level Interface)
1.8 からこの書式。
- $.ajax({
- url: 'test.php'
- })
- .done(function(data, status, xhr) {
- // 通信成功時の処理
- })
- .fail(function(xhr, status, error) {
- // 通信失敗時の処理
- }).always(function(arg1, status, arg2) {
- // 通信完了時の処理
- });
例
- $.ajax({
- url: 'test.php',
- type: 'POST',
- timeout: 10000
- })
- .done(function(data, status, xhr) {
- $('#result').html(data);
- })
- .fail(function(xhr, status, error) {
- $('#log').append('xhr.status = ' + xhr.status + '<br />'); // 例: 404
- $('#log').append('xhr.statusText = ' + xhr.statusText + '<br />'); // 例: Not Found
- $('#log').append('status = ' + status + '<br />'); // 例: error
- $('#log').append('error = ' + error + '<br />'); // 例: Not Found
- });
返却値の利用
- $.ajax({
- url: 'test.php'
- })
- .done(function(data, status, xhr) {
- // これで JSON Object として扱える
- var response = $.parseJSON(data);
- })
- .fail(function(xhr, status, error) {
- // 通信失敗時の処理
- })
- .always(function(arg1, status, arg2) {
- // 通信完了時の処理
- });
参考サイト
とほほのWWW入門：jQuery入門 Ajax
→いつもいつもお世話になっております！
Crunchtimer：[jQuery] Ajaxの.loadと.post(.get)の違いについて
Designup：jQueryでAjax 画面遷移なしでデータを読み込む方法
→現在のページの指定箇所へ読み込む方法が載っている
jquery.pjax.js （defunkt 版）
Ajax と pushState を組み合わせた技術らしい。
【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
jQuery:2.1.3
pjax(defunkt):1.9.4
概要
差し替え機能
とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
URL 変更機能
別ページの URL へ切り替える。
効能
ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
インストール
GitHub：defunkt/jquery-pjax から DL して配置。
falsandtru 版 と呼ばれる別バージョンもあるそうなので
jquery.pjax.defunkt.js
とリネームして配置。
使い方
ライブラリの読込
- <script src="jquery.min.js"></script>
- <script src="jquery.pjax.defunkt.js"></script>
ファイルの配置
index.html
- <body>
- <div>pjax before.</div>
- <div id="container">
- <div><button>pjax before.</button></div>
- </div>
- <script type="text/javascript">
- $( document ).ready( function() {
- $( 'button' ).click( function() {
- $.pjax({
- url: 'pjax_test.php';
- container: '#container',
- fragment: '#container_new'
- });
- });
- });
- </script>
- </body>
pjax_test.html
- <body>
- <div>pjax after.</div>
- <div id="container_new">
- <div>pjax after. Good Job!</div>
- </div>
- </body>
結果
これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
連続
ところが、１度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
そこで１枚のページで差し替えるタイプにしたら、連続して動作した。
index.php
- <body>
- <div id="container">
- <div id="test">
- <button id="hoge_1">pjax</button>
- <button id="hoge_2"><?php echo ( empty( $_GET['value'] ) ) ? 1 : $_GET['value'] + 1; ?></button>
- </div>
- </div>
- <script type="text/javascript">
- $( document ).ready( function() {
- $( 'button' ).click( function() {
- $.pjax({
- url: 'index.php?value=' + $( '#hoge_2' ).text(),
- container: '#container',
- fragment: '#container_new'
- });
- });
- });
- </script>
- </body>
ただし、
- container: '#container',
- fragment: '#container'
ここを同じ名前にすると１回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな～。。。
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯
解決？
やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。
- container: '#container',
これでちゃんと動く。
オプション、イベント
開始時処理
- $(document).on('pjax:send', function(e) {
- $('body').append("<div id='loading'>処理中</div>");
- });
終了時処理
- $(document).on('pjax:complete', function(e,data) {
- $("#loading").remove();
- });
これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に！
フォームの値の受け渡し
フォームの値の受け渡し 参照。
注意
ブラウザバックとかの挙動への対処が必要ね～。
参考サイト
RakSul：はじめての「pjax」
Qiita：pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix：defunkt版pjaxの説明
書式
色々なサイトを見て勉強させていただいているが、書式がバラバラで混乱してきたので、メモ。
jQuery フレームワークの利用
下記、どちらでも同じこと。
- jQuery()
- $()
なので
- $.isNumeric( arg );
- jQuery.isNumeric( arg );
これも同じこと。
jQuery 本体のメソッドを使ってるということ。
jQuery オブジェクト
下記の３タイプがある。
- $( selector [, context ] )
- $( html [, ownerDocument ] )
- $( callback )
$( selector [, context ] )
いっぱいあるけど、代表は CSS セレクタ（とその属性）。
Category: Selectors
わかりやすくいえば、タグ、id、class など、CSS で直接指定できるもの。
- $( 'body' ) // タグ <body>～</body>
- $( '#hoge' ) // id <div id="hoge">～</div>
- $( '.moge' ) // class <a class="moge">～</a>
- $( '*' ) // ユニバーサルセレクタ（全称セレクタ）
これで、それぞれに 該当する DOM 要素を捕まえる ことができる。
属性まで含める場合
- // id が hoge で、name 属性が・・・
- $( '#hoge[name="sun"]' ) // sun のもの
- $( '#hoge[name!="sun"]' ) // sun でないもの
- $( '#hoge[name^="sun"]' ) // sun で始まるもの
- $( '#hoge[name$="sun"]' ) // sun で終わるもの
- $( '#hoge[name*="sun"]' ) // sun を含むもの
- $( '#hoge[name~="sun"]' ) // sun という「単語」が入っているもの
- // name 属性を持っているもの
- $( '#hoge[name]' )
- // hreflang 属性が en であるもの
- $( '#hoge[hreflang|="en"]' )
- // name 属性を持っていて、value 属性が man で終わるもの
- $( '#hoge[name][value$="man"]' )
$( html [, ownerDocument ] )
DOM 要素そのもの。
DOM 要素 生成中 に割り込む。
- $( '<p>jQuery の可能性はすごいね～</p>' )
$( callback )
特別なお方。（要は私にはよくわからない） 🙄
DOM 要素を 読み込み終えたとき に発動。
- $( document )
特別なので、クォーテーションで括らない。
メソッド or イベント
オブジェクトを捕まえたら、後はそのメソッドやらイベントやらを繋げていくだけ。
- // id が hoge のオブジェクトの text の
- $( '#hoge' ).text() // getter
- $( '#hoge' ).text( arg ) // setter
- $( '#hoge' ).click() // イベントリスナー
イベント
- .click( handler )
- .on( "click", handler )
どちらも同意。
と思ったけど、違うらしい。
前者は、読込時に定義してしまうので、動的に変化をさせたものには対応できない。
後者は、イベント発生時に都度調査をするので、動的な変化に耐えられる。
onメソッドはイベントが発生するごとにhtmlの構成をチェックします。
jQuery 入門：イベント(2)
マニュアルの上っ面だけを読んでいると危ないにゃ。。。 🙄
.trigger
- .trigger( "click" )
これは、イベントを発動させる。
事前定義
どれも同意。
- $( document ).ready( handler )
- $().ready( handler ) ←非推奨
- $( handler )
- $(document).on( "ready", handler ) ←これもあるけど、1.8で廃止予定？ てか、上の３つの後になるのでダメ？
確かによく見るのは下記２種。
DOM 要素の読み込みを完了したら呼ばれる。
- $( document ).ready(function() {
- // Handler for .ready() called.
- });
- $(function() {
- // Handler for .ready() called.
- });
this
- $( this )
- this
これも何気に困ってた。
$( this )：jQuery オブジェクト
this：DOM 要素（jQuery とは関係ない）
と書いてもすぐにはピンとこないよね～。
例えば、id を取得したかったら、下記のような表記の差が出る。
- $( this ).attr( 'id' )
- this.id
文字列 -> 検索（部分一致）
部分的に一致する名前を持つ要素を一括で操作する方法。
jQuery の場合、ページ内の要素をいっぺんに操作することがあるけど、id などを利用して名前をつけている場合、微妙に名前が違うことがある。
これを一括で操作する方法を見つけた。
Qiita：jQueryで指定した文字列を含むidの要素を非表示にする
- <tr id="row_1"></tr>
- <tr id="row_2"></tr>
- <tr id="row_3"></tr>
- $( '#row_1' ).hide();
- $( '#row_2' ).hide();
- $( '#row_3' ).hide();
- ↓
- $( '[id *= "row_"]' ).hide();
１行毎に隠したいときは上を。
全て隠したいときは下を。
便利～♪
jquery.shapeshift.js （要素を DnD で並べ替える）
前回の jquery.tile.js （タイル状に配置）で並べたタイル状要素を DnD で自由に並べ替えられるプラグイン。
jquery.shapeshift.js
またもや、下記サイトにお導きをいただきました。
啓文社：[jQuery] タイルをドラッグ＆ドロップで並べ替え
【環境】
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
JS
GitHub：jquery.shapeshift
ここから DL して、入手。
すごい数のオプションｗ
- <script type="text/javascript">
- defaults = {
- selector: "*",
- enableDrag: true,
- enableCrossDrop: true,
- enableResize: true,
- enableTrash: false,
- align: "center",
- colWidth: null,
- columns: null,
- minColumns: 1,
- autoHeight: true,
- maxHeight: null,
- minHeight: 100,
- gutterX: 10,
- gutterY: 10,
- paddingX: 10,
- paddingY: 10,
- animated: true,
- animateOnInit: false,
- animationSpeed: 225,
- animationThreshold: 100,
- dragClone: false,
- deleteClone: true,
- dragRate: 100,
- dragWhitelist: "*",
- crossDropWhitelist: "*",
- cutoffStart: null,
- cutoffEnd: null,
- handle: false,
- cloneClass: "ss-cloned-child",
- activeClass: "ss-active-child",
- draggedClass: "ss-dragged-child",
- placeholderClass: "ss-placeholder-child",
- originalContainerClass: "ss-original-container",
- currentContainerClass: "ss-current-container",
- previousContainerClass: "ss-previous-container"
- };
- </script>
HTML
JavaScript 部分
上記オプションの必要部分を、下記で上書きする。
- <script type="text/javascript">
- $(".container").shapeshift({
- minColumns: 3
- });
- </script>
フック
参考サイト には、下記のような記述があった。
こうすることで、フックを作れるのね～。
- <script type="text/javascript">
- $(".container").on('ss-drop-complete', function(e){
- $('.tile').tile(4);
- });
- </script>
要素部分
- <div class="container">
- <div class="tile">要素</div>
- <div class="tile">要素</div>
- <div data-ss-colspan='2'>要素</div>
- <div class="tile">要素</div>
- </div>
CSS
- .container {
- border: 1px dashed #ccc;
- position: relative;
- }
- .container > div {
- background: #CCC;
- height: 100px;
- position: absolute;
- width: 80px;
- }
- .container > div[data-ss-colspan='2'] { width: 170px; }
- .container .ss-placeholder-child {
- background: transparent;
- border: 1px dashed red;
- }
タイルが全て重なってしまう現象
２度起きた。
１度目の原因と解決法は忘れてしまった。。。残念。
原因
JavaScript のシンタックスエラーだった。
Firefox の開発ツールを起動し忘れていた。 😯
- $('[id = "hoge"') // 誤
- $('[id = "hoge"]') // 誤
閉じカッコ（]）が抜けていた。
タイル要素内のテキストボックスの値チェックを入れたときに起きた。
jquery.tile.js （タイル状に配置）
jquery.tile.js
要素をタイル状に並べてくれるプラグイン。
説明サイト
URIN HACK：要素の高さを揃える超軽量なjQueryプラグイン jquery.tile.js
【環境】
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
JS
jquery.tile.js
こちらからソースをコピペして
jquery.tile.js
を作成して配置。
HTML
JavaScript 部分
- <script src="jquery.tile.js"></script>
- <script type="text/javascript">
- $(function(){
- $('.tile').tile();
- });
- </script>
４行目、titl メソッドの引数に数値を入れると、列数を指定できる。
というわけではなく、x列毎に同じ高さに揃える という指定らしく
- $('.tile').tile(4);
このように設定して、表示エリアを５列分取ったら、高さがずれたｗ
つまり、列数を指定するときは、表示幅もそれに合わせて指定する必要がある。
要素部分
- <div class="tile">1</div>
- <div class="tile">2</div>
- <div class="tile">3</div>
- <div class="tile">4</div>
- <div class="tile">5</div>
綺麗に並んだ～♪
CSS
お好みに応じて設定。
- .tile {
- border:1px solid #999;
- background:#f0f0f0;
- float:left;
- width:130px;
- margin:0 10px 10px 0;
- }
啓文社：[jQuery] タイル表示
CSS は、こちらのサイトの例をいただいてきた。
こちらのサイトのおかげで、このプラグインに出会うことができました～
Don’t Use jquery-latest.js
jquery-latest.js へのリンクは止めましょ～、とのこと。
ちゃんとバージョンが記載されている .js ファイルにリンクしてね。
- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- だめよ～！だめだめ！ -->
- <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> <!-- こうしましょ！ -->
jQuery：Don’t Use jquery-latest.js