jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
配列の重複をはじく、もしくは重複を取り出す - Qiita
var a = [1,2,3,3,2,2,5]; // 重複を削除したリスト var b = a.filter(function (x, i, self) { return self.indexOf(x) === i; }); // 重複のみをリスト var c = a.filter(function (x, i, self) { return self.indexOf(x) !== self.lastIndexOf(x); }); // 重複を検出したものを重複しないでリスト var d = a.filter(function (x, i, self) { return self.indexOf(x) === i && i !== self.lastIndexOf(x); }); console.log(a); // [ 1, 2, 3, 3, 2, 2, 5 ] console.log
jQuery高速化！処理速度を10倍上げるテクニック20選
Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
カルーセルの決定版！スマホにも対応した「OWL Carousel」 - Tecuration .com
「OWL Carousel」はスマホからのタッチ操作や、レスポンシブデザイン、クロスブラウザ対応がされたカルーセルスライダーを実装するjQueryプラグインです。 OWL Carousel 最近は多くのプラグインがスマホからのタッチ操作に対応しつつあります。時代の流れですね。このプラグインにおいても例外ではなく、しっかりタッチ操作に対応しております。PCではドラッグが相当します。 レスポンシブデザインが取り込まれており、画面幅をかえるとページネーションも作り替えられます。例えばこの状態から画面幅を狭めると。 この通り、ページネーションの個数が2個から4個に変わっています。 そしてクロスブラウザ対応により「IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, Dolphin, iPhone, iPad, Google Nexus」に対応して
郵便番号から住所を補完するjQueryプラグインを作ってみた · けんごのお屋敷
郵便番号から住所を自動的に補完してくれる JavaScript のライブラリに AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版) がありますが、それを jQuery のプラグインとして実装したものを作ってみました。 jquery.ajaxzip2 通常版と、スペースや改行などが圧縮された minify 版があります。使い方はリンク先の github に書いてあるので参考にしてください。 また jquery.ajaxzip2 を実装するにあたって、さらに使いやすくするために従来の AjaxZip2 を少し拡張しました。 拡張機能 次のような機能を新たに追加しています。 住所補完後の動作をコールバック関数で指定可能 郵便番号から住所を補完する際に JSON 形式の住所データを非同期に取得しにいきますが、それが完了した後に呼び出されるコールバック関数を指定できる
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
jPages
What does it do? jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load. Apart from all its features, the main diference for the other pagination plugins
jQueryでマウス座標を取得 | Typhooon
jQueryのイベントハンドラはコールバック関数の最初の引数にイベントオブジェクトを渡します。イベントオブジェクトの clientX プロパティと clientY プロパティによってマウスカーソルの位置を取得することができます。 イベントオブジェクトを操作するために関数にイベントオブジェクトを渡すためには、次のように引数にイベントを指定します。 [javascript] function(e){ // } [/javascript] 例えば、イベントオブジェクトの target プロパティはイベントを発行した DOM 要素への参照を返します。 次のコードは、イベントが発生しているオブジェクトを取得して DOM 要素のID 名（ #contents ）を表示させます。 [javascript] $(document).click(function(e) { var ele = $(e.tar
[CSS] Memo, iOS長押しで表示されるポップアップがじゃまな時
あたふたしたのでメモっとく。 iOSでリンクを長押しすると下からにょろっと出てくるポップアップ（正式名称はなんだろう）がじゃまでした。 出現する時のイベントを取得できないかとJavaScriptでごにょごにょしましたが解決できず。 時間も限られていたので出てこないようにしてしまいました。 < p class=”clear”>
![[CSS] Memo, iOS長押しで表示されるポップアップがじゃまな時](https://cdn-ak-scissors.b.st-hatena.com/image/square/00c57c21ab579e3c2f1e40cf3f57603d04c1629e/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2Fcontents%2Fwp-content%2Fuploads%2F2013%2F01%2FIMG_2075-169x300.png)
NoCode jQuery Slider : jQuery Slideshow : 2024 WOW!
An image slider is an image slider, and they're all roughly the same, correct? Not so quickly. What are the primary criteria for selecting any kind of web component? Compatibility, simplicity of setup, great performance, and an attractive design and feel. With our Slider we've tried to create the perfect html slider that covers all these needs and even more: Compatibility with the widest feasible
jQuery Zoom
A plugin to enlarge images on touch, click, or mouseover. Demo Hover Grab Released under the MIT License, source on Github (changelog) Download Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+. Install via NPM npm install jquery-zoom Instructions Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <spa
CYOKOLOG — jQueryプラグイン実装時の独自データ属性によるパラメータ指定方法について考えてみた
ホッテントリ入りしてた以下のエントリを読んだ。 HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく - クラスメソッド開発ブログこの類のエントリは散々見てきたんで、特に得るものは無いかなと軽く流し読みしてたら以外な発見があった。 HTML5の独自データ属性（data-hoge形式）でパラメータを渡す設計は時折見かけるが、ここではプラグイン側の実装で、パラメータ名を明示することなくその値を取得する方法が紹介されていた。 どうやら引数なしで data() メソッドを実行すると JSON 形式で data属性の一覧が取得できるらしい！ $('<a data-hoge="HOGE" data-fuga="FUGA"/>').data(); とすると {hoge:'HOGE',fuga:'FUGA'} となる。 上記のエントリではパラメー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Buy Instagram Likes - 100% Real & Instant | Only $1.49
jQueryプラグイン - サイトに紙を折ったような効果を付加 - oriDomi
はてなブログ | 無料ブログを作成しよう
[ jquery-instagram ] Instagram API を簡単に利用できる jQuery プラグインを試してみました![[ jquery-instagram ] Instagram API を簡単に利用できる jQuery プラグインを試してみました](https://cdn-ak-scissors.b.st-hatena.com/image/square/63ac844f6a542281ad7784857228ffbfa0990400/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2013%2F05%2Fjquery-instagram-01.jpg)
jQueryを使ってHTMLのhead内にアクセス：実験メモ
kyrielles.net
SSSSLIDE
