カテゴリーアーカイブ jQuery

takahashi 著者:takahashi

jQueryのいろいろな指定

jQueryを使用するいい点として、DOM(HTML)の操作が簡単になるという利点があります。

jQueryで各要素に対して処理を書く際、どの要素に対して操作を有効にするのか、という指定は”セレクタ”を用いて行います。

//DOMのidで指定
$("#id").処理;

とか、

//DOMのクラスで指定
$(".class").処理;

のようにクラス、idで指定する方法や

$('table').処理;

のようにHTMLの要素で指定したりできます。
さて、次のようなHTMLがあるとします。

<html>
  <head><!-- hogehoge... --></head>
  <body>
    <table>
      <tr>
        <th>hoge1</th>
        <th>hoge2</th>
      </tr>
      <tr>
        <td id="test1">fuga1</td>
        <td id="test2">fuga2</td>
      </tr>
      <tr>
        <td id="test3"><a href="#">fuga3</a></td>
        <td id="test4">fuga4</td>
      </tr>   
    </table>
  </body>
</html>

少々雑な例ですが、こういったHTMLのページがあるとして、例えばtdのidがtest1、test2のものが入っているtrに対してのみ何か処理をしたい、という場合は、trにはidやclassが降られていないので、これらでは指定できませんし、tr要素を指定してしまうと無関係のidがtest3、test4であるtdが格納されているtrまで影響してしまいます。

生のHTMLであれば単純にtrにidやclassを指定すれば済むのですが、例えばこれがプログラムで生成しているDOM、特にライブラリやデザインフレームワークなどが生成しているような場合はそういった変更ができない場合があります。

こういった時に、jQueryでは”~の要素の親”や”~の要素の子”、”~の要素の次の要素”のような指定ができるセレクタが用意されています。

例えば今回の場合であれは、

$("#test1").parent().処理;

とすることで、idが”test1″の要素の親の要素、つまり目的のtr要素を指定することができます。
逆に子要素を指定する場合

$("#test3").children().処理;

などとすると指定できます。

他にもjQueryにはいろいろな要素の指定ができます。
こちらのサイトに詳しく書いている方がいましたので是非参考にしてみてください。

jQueryのセレクタメモ – Qiita

  • この記事いいね! (0)
著者:杉浦

多くのcdnリンクを持つcdnjsの紹介

 cdn(contents download link)はjs,cssのライブラリを簡単に読み込む手法です。オープンソース配信サービス、Google Hosted Librariesの紹介で紹介したGoogle Hosted Librariesの様にcdnは多くの場所で配信されています。cdnjsはそのようなcdnの配信リンクをまとめて検索できるサイトです。
 下の画像の様に検索してリンクをコピーするだけでとりあえず使えます。特定のフォーマットで単一のデータを返してくれるAPIも備わっています。
 

 また、cdnjs上でリンクがコピーされた回数をランキングしています。人気が高く、汎用性の高いライブラリが上位に連なっています。jqueryは格別ですね。

  • この記事いいね! (0)
著者:杉浦

マテリアルデザインのさわり

Design – Material Design
マテリアル・デザインって何? Androidデザイン責任者にインタヴュー | ギズモード・ジャパン
 マテリアルデザインの思想が理想とするデザインは脳にスッと入ってくるデザインです。
マテリアルデザインは一貫性のある法則を持つ世界の上でデザインを行うことで、脳にスッと入ってくるデザインを実現しようとします。一貫性のある法則には実世界の一部を再現するような法則が用いられています。ここで一部、とあるのはマテリアルデザインの目的がユーザの理解の促進にあるからです。理解を妨げて、処理を重くするだけの余分な法則を再現する理由はありません。主な法則は、実世界において紙を重ねた時に起きる現象を再現する直感的な法則です。例えば、ページはhogehogeとかかれたカードの集まり(並べてもいいし、重ねてもいい)で構成される。これは実世界の紙を重ねた時の状態を再現する法則です。他には、カード内から画像や文字ははみ出さない、下の要素には上の要素の影が落ちる。これはそれぞれ、紙面からはみ出して宙に浮く画像や文字はない、下の物体には上のカードの影が落ちる、という実世界上の法則の再現です。
 マテリアルデザインの効果の一例が次です。
ヘッダに影がない

ヘッダに影がある

 影がついた場合ヘッダが下の記事欄から独立していることがわかるため、スクロールをしてもヘッダが固定されると連想しやすくなります。

  • この記事いいね! (1)
著者:aoki

jQuery+masonry+autopager で躓く。isAnimated が false にならない!?

久々に頭が痛くなるほど躓きました。
とあるサイトで jQuery + masonry + autopager を使い、pinterest風のタイル表示且つページ遷移のしない読み込み+レスポンシブ対応を行っていました。
コードはこんな感じ


$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function() {
      $container.masonry({
          isAnimated : false,
          columnWidth: '.thumb',
          itemSelector: '.thumb'
      });
    });

    var maxpage = 10;
    $('#loading').css('display', 'none');
    $.autopager({
        content: '.grid',
        link: '#next a',
        autoLoad: false,
    
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#next a').css('display', 'none');
        },

        load: function(current, next){
            $container.imagesLoaded(function() {
                $container.masonry('reloadItems');
                $container.masonry('layout');
            
                $('#loading').css('display', 'none');
                $('#next a').css('display', 'block');
                if( current.page >= maxpage ){
                    $('#next a').hide();す
                }
            });
        }
    });
    $('#next a').click(function(){
        $.autopager('load');
        return false;
    });
});

これで動いてはいたのですが、autopagerで読み込んだ時に読み込んだ要素をレイアウトしなおす関係で上からレイアウトが降ってくるような動きになってしまっていました。
何とかこれを直したいと試行錯誤をしたのですがうまくいかず・・・
そもそも isAnimated が false と指定しているのにアニメーションされてしまうのはなぜ?という事で調べたところ重大なことが分かりました。
isAnimated オプションは昔のバージョンのオプションで最新の物では既に廃止されているオプションという事でした。
それは動かないわ。

という事で対応できるオプションを探したところ、transitionDuration を設定することでアニメーションも解除されうまく表示されるようになりました。


$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function() {
      $container.masonry({
          transitionDuration: 0,
          columnWidth: '.thumb',
          itemSelector: '.thumb'
      });
    });

    var maxpage = 10;
    $('#loading').css('display', 'none');
    $.autopager({
        content: '.grid',
        link: '#next a',
        autoLoad: false,
    
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#next a').css('display', 'none');
        },

        load: function(current, next){
            $container.imagesLoaded(function() {
                $container.masonry('reloadItems');
                $container.masonry('layout');
            
                $('#loading').css('display', 'none');
                $('#next a').css('display', 'block');
                if( current.page >= maxpage ){
                    $('#next a').hide();す
                }
            });
        }
    });
    $('#next a').click(function(){
        $.autopager('load');
        return false;
    });
});

そもそも古い masonry のページをずっと見ていたことが一番の原因ですね。

現在のバージョン(v3)のページはこちらです。
https://masonry.desandro.com/

古いバージョン(v2)はこちら
https://masonry.desandro.com/v2/

  • この記事いいね! (0)
村上 著者:村上

【jQuery】FastClickライブラリを特定の要素のみ無効にする方法【iOS】

Cordova開発をしているとお世話になるライブラリが、この「FastClick」だと思います。
これを使うことで、モバイルでアプリを実行したときのクリックの反応速度がかなり改善されます。
が、ものによっては、この FastClick ライブラリと競合を起こすライブラリもあるようで、今日、まさにその現象に遭遇しました。

 

競合を起こしたライブラリは、OpenstreetMap を使用した地図を表示できる「MapBox」です。
地図の表示の全てに影響するわけではなく、地図に表示したマップピンをクリックして、吹き出しを表示するロジックに影響が出ており、iOS でのみ吹き出しが表示できない状態でした。
クリックの動作をする箇所でのエラーだったので、最初は Click イベントを取得できていないことを疑いましたが、エラーログを見たところ、FastClick との競合が原因でした。

 

解決方法ですが、こちらのサイトを参考にしました。

JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす|ITハット
http://ithat.me/2016/11/06/js-jquery-smartphone-click-event-300ms-delay-fastclick

サンプルに書くほどでもないのですが…対策方法は、FastClick を無効化したい aタグなどの要素に、needsclick というクラスを追加するだけです。

<a class="needsclick">FastClickを無効にしたい要素</a>

特定の要素のみに FastClick を適用する方法もありますが、現在開発中のシステムでは、無効化したい要素がここのみだったので、この方法を採用しました。
ちなみに、特定の要素のみに適用する方法は下記の通りです。

<div>
    <div class="fastclick">
        <!-- FastClickを適用する要素 -->
    </div>
    <div>
        <!-- FastClickを適用しない要素 -->
    </div>
</div>
$(function(){
    FastClick.attach($('.fastclick')[0]);
});

全てに FastClick を適用するときには、下記のように記述します。

$(function(){
    FastClick.attach(document.body);
});

対策としては以上です。

 

ということで、FastClick を一部無効化する方法でした。
ライブラリの競合はやはり厄介ですね。
最悪、FastClick を無効化しなければいけないのでは…と思ったので、解決策があって良かったです。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】jQueryなしでappend()と同じことを実行する

DOM操作をするときに jQuery の append() を使うことが多いのですが、場合によっては jQuery が使用できないことがあるかと思います。
なので、今回はタイトル通り、jQueryなしで append() と同じことを行う方法についてです。

参考にさせていただいた記事はこちら。

innerHTML より insertAdjacentHTML を使う – Qiita
https://qiita.com/amamamaou/items/624c22adec32515e863b

 

実際のコードはこちら。
今回使うメソッドは、insertAdjacentHTML() というものです。

<div id="parent">
    <p>p要素 その1</p>
</div>
// id=parendの子要素の最下部に要素を追加 append()
var element = document.getElementById("parent");
element.insertAdjacentHTML("beforeend", "<p>p要素 その2</p>");

上記のコードを実行すると、ID が parent の要素の子要素の一番下に、指定したp要素が追加されます。
動作としては、jQuery の append() と全く一緒です。
ちなみに、insertAdjacentHTML() メソッドの第一引数を変更することで、append() 以外の動作を行わせることができます。

簡単に表でまとめてみました。

jQuery insertAdjacentHTML()
append() “beforeend”
prepend() “afterbegin”
before() “beforebegin”
after() “afterend”

jQuery で行えるDOM要素の挿入は、こちらの方法でも問題なくできるようです。

なお、もしHTML文字列ではなく、HTML要素を指定したい場合には、insertAdjacentElement() が利用できます。
第一引数は、insertAdjacentHTML() と全く同じで、追加したい要素を指定する第二引数のみが違います。
こちらは、実装しているコードで使い分けてください。

 

ということで、jQueryなしで append() などと同じことを実行する方法でした。
システムによっては、jQueryを使えないこともあるかと思うので、この方法は覚えておきたいと思います。

  • この記事いいね! (0)
著者:杉浦

jQueryのajax通信の処理状態に関するイベント

javasriptのライブラリjQueryにおいて非同期通信であるajax処理を行う際、通信の処理状態に関するイベントの備忘録です。非同期処理は隙あらば他の仕事をやりだしたりなんだりで滅茶苦茶になりやすいためタイミングの監視が重要になります。いずれも

$(document).ajaxHogehoge(function() {
    //処理内容
});

で処理を記述できます。この様に記述された処理はajaxによる通信が起きた場合、どのajax通信でも呼び出されます。また、これとは別にDeferredとして.done(),.complete()などをajax()につなげることで、特定の通信に限った処理ができます。いつでも呼び出される.ajaxHogehoge()は以下の通りです。

.ajaxStart() 他のajax通信が行われていない状態でajax通信が呼び出された時、つまりajax通信の一番最初に実行されます。
.ajaxSend() ajax通信が送信される前に実行されます。通信のたびに実行されます。
.ajaxSuccess() ajax通信が成功するたびに実行されます。
.ajaxError() ajax通信が失敗するたびに実行されます。
.ajaxComplete() 成功失敗関わらず、ajax通信が完了するたびに実行されます。
.ajaxStop() 他のajax通信が行われていない状態でajax通信が完了した時、つまりajax通信の一番最後に実行されます。
  • この記事いいね! (0)
村上 著者:村上

【jQuery】指定した要素に class を追加・削除する方法

今日、後輩くんに質問されたので、自分の覚書としてもまとめ。
要素に指定したクラスを削除する方法です。
もちろん、削除だけでなく、追加もできます。

参考にしたサイトはこちら。

jQuery classの追加・削除 – Qiita
https://qiita.com/NobuyaIshikawa/items/300739f6da6a95e58306

 

使うメソッドは、addClass()removeClass() です。

・addClass()

使い方は下記の通り。

<div id="content">クラスを追加する要素</div>
$("#content").addClass("add");

上記の jQuery を実行すると、id=”content” を指定したDIV要素に対して、class=”add” が追加されます。
 

・removeClass()

removeClass() の使い方は下記の通り。

<div id="content" class="remove">クラスを削除する要素</div>
$("#content").removeClass("remove");

こちらを実行すると、class=”remove” が DIV要素から削除されます。
 

・toggleClass()

こちらは今回調べて初めて知ったメソッドですが、要素に指定したクラスがあったらクラスを削除し、クラスがなかったらクラスを追加する、というものでした。
これなら、要素があるかどうかを調べる hasClass() を使って検索し、その結果で条件分岐…という処理を書かずにすみますね。
具体的には下記のとおりです。

if($("#content").hasClass("add")){  // add という class があるかを調べる
    $("#content").removeClass("add");  // あったら削除
} else {
    $("#content").addClass("add");  // なかったら追加
}

上記の処理が、下記の一行で済みます。

$("#content").toggleClass("add");

これは楽ですね!
見慣れないと、逆に何をしている処理なのかがわかりにくいので、コメントが必須かもしれませんが…コードの行数が少なくてすむ&簡略できるのは嬉しいです。

 

ということで、jQuery で class の追加・削除を行う方法でした。

  • この記事いいね! (0)
村上 著者:村上

【jQuery】要素直下の子要素を取得する方法

これまた業務中に方法を調べたものについてまとめ。
今回は、指定した要素の直下の子要素を取得する方法です。

参考にさせていただいたサイトはこちら。

jQueryで子要素を取得する方法:children(), find()
http://uxmilk.jp/10873

子要素を取得する方法には、children() メソッドと、find() メソッドを使う、二通りの方法があります。
なお、私は children() メソッドを使いました。

 

使い方はこんな感じ。

var children = $("#parent").children("span");
<div id="parent">
    <span>子要素です</span>
</div>

上記のようにすると、idparent が指定された要素の直下にある子要素の span を取得できます。
要素名を指定すればOKなので、id名 や class名 がわからなくても使うことができます。

 

取得したい子要素の class名 や id名 が分かっている場合は、find() メソッドを使用します。
サンプルコードはこちら。

var children = $("#parent").find(".children");
<div id="parent">
    <div class="children">子要素1です</div>
    <div class="children">子要素2です</div>
</div>

こちらを実行すると、id 名が parent 要素の子要素である class 名が children が指定された要素を取得することができます。
なお、この find() メソッドは、子要素だけでなく、孫要素も対象となっているので、子要素の中にさらに class=children が指定された要素があれば、その孫要素も取得できます。
一括でごっそりと要素を取得したいときに便利そうですね。

 

ということで、以上、要素直下の子要素を取得する方法でした。
また、昨日の記事で紹介した、クラス名を取得する attr() メソッドをあわせて使えば、親要素が parent である span 要素のクラス名を取得する、ということも出来ちゃいます。
単体では使い道があまりないかもしれませんが…こういった合わせ技をしたいときにすごく便利なメソッドですね。

なお、昨日の記事はこちらから。

【jQuery】要素に指定したclass名などの属性の値を取得する方法

こちらも参考になれば幸いです。

  • この記事いいね! (0)
村上 著者:村上

【jQuery】要素に指定したclass名などの属性の値を取得する方法

HTML要素に指定された class 名や id 名などを取得する方法です。
私は今回、class名を取得するのに使いました。

 

使用するメソッドは「attr()」です。
サンプルコードはこちら。

// div要素のclass名を取得
var className = $("div").attr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、変数 className には div要素のクラス名である「sample」が代入されます。

属性の取得についてはこんな感じです。
とても簡単でした!

 

また attr メソッドは、属性を取得するだけではなく、追加することもできます。
サンプルコードはこちら。

// div要素のid名にsampleと指定
$("div").attr("id", "sample");

<div>DIV要素です</div>

こちらを実行すると、div要素に id=”sample” が追加されます。

classの追加なら .addClass() メソッドもありますが、こちらの attr() メソッドは、属性名と値を指定できるので、class以外にも、id、href、type、value なんかも追加できます。
また、下記のように属性を一度に複数追加することもできるので、コードがすっきりして分かりやすいです。

$("div").attr({id : "sample",
               class : "text"});

 

追加があるなら削除もできる、ということで、属性の削除には removeAttr() メソッドを使います。

// div要素のclass名を削除
$("div").removeAttr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、class属性が削除されます。

このあたりはセットで覚えておくと良さそうですね。

 

ということて、要素に指定された属性の値を取得する方法でした!
class名に○○が指定された要素を取得、というのは使用したことがあるのですが、divに設定されたクラス名自体を取得する、というのはやったことがなかったので、今回調べてまとめてみました。
似たような箇所で悩んでいる方は、是非ご参考にしてください。

  • この記事いいね! (0)