jQuery(182)

180follower
ysugiyama12 さんのアバター 8views

jQueryで複数の要素を取得してforeachを用いる

jQueryでクラスなどを指定して複数の要素が取得できる場合、それらをforeachでひとつずつ処理する。 $('#my_data').each(function(i,elem){ console.log(i); console.... 2017年7月5日
harada さんのアバター 13views

ブラウザのリサイズ時に特定の幅以下になったらリロードする

以下の記述でリサイズ時800px以下の場合にリロードされるようになります。 $(window).on("resize", function() { var w = $(window).width(); if(w <... 2017年6月29日
harada さんのアバター 337views

Animate.cssとinview.jsを利用して要素が表示されたタイミングでアニメーションさせる

以前はWOW.jsを利用して簡単にアニメーションを導入するという記事のように、WOW.jsとAnimate.cssでアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。 そのためjQue... 2017年5月1日
ysugiyama12 さんのアバター 51views

jQuery UI のautocomplete機能

入力リストの候補を表示する時、通常のdatalistだとスマホなどでうまく表示できない場合があるので、かわりにjQuery UI のautocomplete機能を導入した。 下に一例を示す。 var list = []; list.pus... 2017年2月6日
huruhurupyotr さんのアバター 19views

return false、preventDefault()、stopPropagation()

おおまかに書くとこんな感じだそうです。 preventDefault():リンクの遷移などのイベントを無効にできる。 HTMLでリンクの形式になっていても、これが書いてあると踏んでも遷移しないということですね。 stopPro... 2017年2月2日
nissy さんのアバター 72views

bootstrap-slider スライドさせた後イベントを発火させる

タイトルの通りbootstrap-sliderで作られたスライダーにイベントを付加させるときの書き方です $(selector).slider().on(evnet,function () { //処理 }); ... 2017年1月26日
usanoko さんのアバター 54views

サイドメニューをスライドイン

$(function () { var $nav = $(".sidemenu"); $(".JS-navHoverBox").on({ "mouseenter": function(){ ... 2017年1月23日
usanoko さんのアバター 102views

アンカーリンクをスムーススクロール

$(function () { $('a[href^=#]').click(function() { var speed = 400; var href= $(this).attr("href... 2017年1月23日
usanoko さんのアバター 106views

ページトップへ戻るボタン

デモ https://usanoko.github.io/pagetopbtn/ HTML <!-- jQuery本体を読み込む --> <script type="text/javascript" src="http... 2017年1月23日
huruhurupyotr さんのアバター 74views

jQuery.post()とjQuery.ajax()

jQueryの日本語版リファレンスには、「$.postは$.ajaxの略記です」とあります。パッと見では理解できなかったのですが、それほどややこしい話でもありませんでした。 jQuery.post()は以下のように使います。   jQ... 2017年1月19日
harada さんのアバター 45views

AjaxでもURLを変更したい

pushStateという関数で、履歴やURLを操作することができるようです。 たとえばWordPressの検索画面をAjaxで動かしていたら、以下のようにすることで、 AjaxでもURLを変更することができます。 jQuery(docum... 2017年1月6日
nissy さんのアバター 141views

要素に雪を降らせる

LINEをいじっていたら雪が降っていたので、もしかしたらjQueryでできるのではと思ってCodepenを利用してやってみました! See the Pen vywdxd by Nissy (@nissy-02110114) on Code... 2016年12月25日
nissy さんのアバター 54views

jsとjQueryでforeachを行う

phpでよく使うforeachですが、jsとjQueryでもやっぱりできる!!とのことなのでハックに残しておきます。 【javascript】 //forEachメソッドを使う var a=[1,2,3,4,5] a.forEach(f... 2016年12月23日
harada さんのアバター 51views

シンプルなグラフを簡単に組み込める「jQuery Sparklines」

「jQuery Sparklines」を利用することで、シンプルがグラフを簡単に組み込むことができます。 利用方法 jQueryとjQuery Sparklinesを読み込みます。 jquery.min.js jquery.spark... 2016年12月19日
harada さんのアバター 294views

Slider for Bootstrapを利用して値をスライダーで絞り込む

Slider for Bootstrapを利用することで簡単に、値をスライダーで絞り込むことが出来ます。 利用方法 ファイルをダウンロードして、基本ファイルを読み込みます。 bootstrap-slider.css bootstrap... 2016年12月19日
nissy さんのアバター 248views

clickイベントに引数を渡す方法

初歩的内容ですが、よくやりたくなる操作なのでハックに残しておきます。 //以下のような要素を考える <p id='hoge'>click</p> //受け取った引数はevent.dataで引用する functio... 2016年12月15日
harada さんのアバター 896views

複数設置のslickでオリジナルの矢印アイコンを設置する

複数設置のslickでオリジナルのナビゲーションを設置し、それぞれ別に動かす方法です。 JavaScript var $sliders = $(".slide_list"); var $arrows = $('.arrows... 2016年12月12日
harada さんのアバター 706views

slickで最初の画像以外を遅延読み込みにする

slickではlazyLoadオプションが標準で用意されています。 slickのスライドですべての画像を一度に読み込むとページ表示完了までに時間がかかってしまいます。 そんなときこのlazyLoadオプションを利用することで、表示されていな... 2016年12月6日
harada さんのアバター 80views

jQueryで指定したclassが存在したら実行する分岐の書き方

以下のように記述することでclass="home"があるときだけ実行できます。 if($('.home').length) { //classが存在したら実行する } 参考:jQueryで特定の要素が存在するかどうかを判別する処理 c... 2016年12月1日
hirokas さんのアバター 220views

jQueryを使ったクロスドメインAjax通信

Cross Domain Ajax プラグインを用いると、クロスドメイン制約が解除される。 https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-aj... 2016年11月29日