コピペでOK！デザイナーのための、jQueryでよく使う記述集

HTMLとCSSを覚えたての頃は
jQueryなんて敷居が高くてとても使えない…！と思ってましたが、
制作を続けていると、使う必要に迫られる場面が多々あり、
いつの間にやら普通に使うようになってしまいました。

今回は、その中でも使う頻度が高いものを備忘録として書き留めます。

デバイスによって振り分け
デバイス幅で振り分け
ページ内スムーススクロール（タブレット以下がヘッダー固定の場合、その分のズレを解消）
クリックした時に開閉するメニュー
$(function() は何度も書く必要ない！
擬似要素に対してjQueryは使えない
参考

デバイスによって振り分け


$(function() {
    if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
        //iPhoneもしくはiPadもしくはiPodもしくはAndroidの時の用件をここに書く
    } else {
        //それ以外の時の用件をここに書く
    }
});

$(function() {

if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){

//iPhoneもしくはiPadもしくはiPodもしくはAndroidの時の用件をここに書く

} else {

//それ以外の時の用件をここに書く

}

});

デバイス幅で振り分け


$(function() {
    if(window.matchMedia('(max-width:768px)').matches){
        //デバイス幅768pxまでの時の用件をここに書く
    } else {
        //それ以外の時の用件をここに書く
    }
});

$(function() {

if(window.matchMedia('(max-width:768px)').matches){

//デバイス幅768pxまでの時の用件をここに書く

} else {

//それ以外の時の用件をここに書く

}

});

ページ内スムーススクロール（タブレット以下がヘッダー固定の場合、その分のズレを解消）


$(function() {
    var w = $(window).width();
    var x = 1024; //ブレイクポイント
    if (w <= x){
        //x以下で有効になる処理
        var headerHight = 90; //headerの高さを指定
        jQuery('a[href^=#]').click(function() {
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top-headerHight;
            jQuery('body,html').animate({scrollTop:position}, 800, 'swing');
            return false;
        });
    } else {
        //x以上で無効になる処理
        jQuery('a[href^=#]').click(function() {
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            jQuery('body,html').animate({scrollTop:position}, 800, 'swing');
            return false;
        });
    }
});

$(function() {

var w = $(window).width();

var x = 1024; //ブレイクポイント

if (w <= x){

//x以下で有効になる処理

var headerHight = 90; //headerの高さを指定

jQuery('a[href^=#]').click(function() {

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top-headerHight;

jQuery('body,html').animate({scrollTop:position}, 800, 'swing');

return false;

});

} else {

//x以上で無効になる処理

jQuery('a[href^=#]').click(function() {

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top;

jQuery('body,html').animate({scrollTop:position}, 800, 'swing');

return false;

});

}

});

クリックした時に開閉するメニュー


$(function() {
    $(".button").on("click", function() {
        $(this).next().slideToggle();
        $(this).toggleClass("open");
    });
});

$(function() {

$(".button").on("click", function() {

$(this).next().slideToggle();

$(this).toggleClass("open");

});

$(function() は何度も書く必要ない！

例えば上記の、デバイス幅で振り分けとスムーススクロールを同じページに設定するとします。
そのとき、


$(function() {
    if(window.matchMedia('(max-width:768px)').matches){
        //デバイス幅768pxまでの時の用件をここに書く
    } else {
        //それ以外の時の用件をここに書く
    }
});

$(function() {
    var w = $(window).width();
    var x = 1024; //ブレイクポイント
    if (w <= x){
        //x以下で有効になる処理
        var headerHight = 90; //headerの高さを指定
        jQuery('a[href^=#]').click(function() {
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top-headerHight;
            jQuery('body,html').animate({scrollTop:position}, 800, 'swing');
            return false;
        });
    } else {
        //x以上で無効になる処理
        jQuery('a[href^=#]').click(function() {
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            jQuery('body,html').animate({scrollTop:position}, 800, 'swing');
            return false;
        });
    }
});

$(function() {

if(window.matchMedia('(max-width:768px)').matches){

//デバイス幅768pxまでの時の用件をここに書く

} else {

//それ以外の時の用件をここに書く

}

});

$(function() {

var w = $(window).width();

var x = 1024; //ブレイクポイント

if (w <= x){

//x以下で有効になる処理

var headerHight = 90; //headerの高さを指定

jQuery('a[href^=#]').click(function() {

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top-headerHight;

jQuery('body,html').animate({scrollTop:position}, 800, 'swing');

return false;

});

} else {

//x以上で無効になる処理

jQuery('a[href^=#]').click(function() {

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top;

jQuery('body,html').animate({scrollTop:position}, 800, 'swing');

return false;

});

}

});

とする必要はありません。
$(function()はjQueryを開始する記述なので一度だけ書き、
その中に用件を書いていけば事足ります。

先ほどのコードは、このように修正できます。


$(function() {
   //デバイス幅で振り分け
    if(window.matchMedia('(max-width:768px)').matches){
        //デバイス幅768pxまでの時の用件をここに書く
    } else {
        //それ以外の時の用件をここに書く
    }

    //スムーススクロール
    var w = $(window).width();
    var x = 1024; //ブレイクポイント
    if (w <= x){
        //x以下で有効になる処理
        var headerHight = 90; //headerの高さを指定
        jQuery('a[href^=#]').click(function() {
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top-headerHight;
            jQuery('body,html').animate({scrollTop:position}, 800, 'swing');
            return false;
        });
    } else {
        //x以上で無効になる処理
        jQuery('a[href^=#]').click(function() {
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            jQuery('body,html').animate({scrollTop:position}, 800, 'swing');
            return false;
        });
    }
});

$(function() {

//デバイス幅で振り分け

if(window.matchMedia('(max-width:768px)').matches){

//デバイス幅768pxまでの時の用件をここに書く

} else {

//それ以外の時の用件をここに書く

}

//スムーススクロール

var w = $(window).width();

var x = 1024; //ブレイクポイント

if (w <= x){

//x以下で有効になる処理

var headerHight = 90; //headerの高さを指定

jQuery('a[href^=#]').click(function() {

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top-headerHight;

jQuery('body,html').animate({scrollTop:position}, 800, 'swing');

return false;

});

} else {

//x以上で無効になる処理

jQuery('a[href^=#]').click(function() {

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top;

jQuery('body,html').animate({scrollTop:position}, 800, 'swing');

return false;

});

}

});

擬似要素に対してjQueryは使えない

忘れがちなのですが、擬似要素に対してjQueryは使えないので、
その点考慮してマークアップする必要があります。

参考

jsを組むときに、あんまり得意じゃないなりにどういう考え方で進めているかについて書きました。
非エンジニアだけどjsをさわらねば、、という人などに読んでいただけたらうれしいです。
jsに苦手意識を持つコーダーが、サイトに動きをつけるときにやること｜nico MEMO