いよいよ正式版が登場！ jQuery 3での変更点と前バージョンからの移行のポイント
何が変わったか（概要） jQuery 3.0では、非推奨としていたAPIやドキュメントになかったAPIを削除したり、全体的にAPIを整理してバグを修正しています。また一部のAPIでは、大きな仕様変更があります。既存のコードを動作させる場合には注意が必要ですので、まず移行プラグインをバージョンアップ対応ツールとして使って、影響具合を確認することをお勧めします。 なお、jQuery 3.0での特に大きな変更点は、次のとおりです。 バージョンの1本化 Deferred機能が「Promises/A+」仕様に準拠 非推奨のload、unload、errorを削除して、onメソッドに統一 カスタムセレクタの高速化 既存コードからの移行 既存のコードを移行できるように、Ver3用移行プラグインがリリースされています。このプラグインでは、影響のあるコードに対して警告がブラウザのコンソールに表示されますので
jQuery · JavaScript Plugin Architecture
jQuery この文章はjQuery 2.1.4を元に書かれています。 jQueryでは$.fnを拡張することで、$()の返り値となるjQueryオブジェクトにメソッドを追加できます。 次のgreenifyプラグインでは、$(document.body).greenify();というメソッド呼び出しが可能になります。 "use strict"; (function ($) { $.fn.greenify = function () { this.css("color", "green"); return this; }; })(jQuery); 実際に利用するため際は、jquery.jsを読み込んだ後にgreenify.jsを読み込ませる必要があります。 <script src="jquery.js"></script> <script src="greenify.js"></script
簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル - NxWorld
スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。 もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルをいくつか紹介しようと思います。 bxSliderについて 今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。 また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対
jQuery Google Map
Introduction jQuery Google Map is a jQuery Plugin allows you to easely manipulate the Google Map API. You are now able to create maps, add some markers et create routes. Installation For using the plugin, you need to call jQuery, the Google API and the plugin file : <script src="javascripts/jquery.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-AP
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
jQuery の animate で、透明⇔不透明のアニメーション動作
透明から不透明、もしくは、不透明から透明のアニメーション動作は、jQuery の animate の 1つ目の引数内で、opacity に toggle、show、hide、0～1 の数字（0.5など）を指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の opacity: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、透明になり、最終的には見えなくなる。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、不透明になり、出現。 animate( { opacity: 'to
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
[jQuery] $(‘form').change()でフォーム全体の変更を監視する | きほんのき
トップページ jQuery [jQuery] $(‘form’).change()でフォーム全体の変更を監視する [jQuery] $(‘form’).change()でフォーム全体の変更を監視する 公開 2012年8月8日（水） jQueryのchange()メソッドは、フォーム要素の値に変更があった時、それを察知して反応します。inputやtextarea、selectにバインドして使うことがほとんどだと思います。 <form action='#' method='post'> フルネーム<input type='text' name='fullname'> パスワード<input type='password' name='pass'> <input type='submit'> </form> <script> $("input[name=fullname]").change(fu
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll
コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。 スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。 eco Scroll eco Scroll -GitHub eco Scrollのデモ eco Scrollの使い方 eco Scrollのデモ デモではWebページやアプリで見かけるさまざまなスクロールするUIエレメントを無限スクロール対応にしています。 操作はデスクトップのドラッグ、スマホのスワイプやフリックでもOKです。
![[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll](https://cdn-ak-scissors.b.st-hatena.com/image/square/a56e31e3e2effd7ccab786bc05874d94bd57bdec/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015032605.png)
Vue.jsとjQueryを使った時の違いについて考えてみる。 - 日頃の行い
この記事は Vue.js Advent Calendar 2014 - Qiita の21日分として書かれています。 めっちゃ遅れました。すみません(´・ω・｀) 今、管理画面にVue.jsを使うか、React.jsを使うか、その他を使うか悩んでるので、この機能が便利かどうかを確認してみようかと思います。 最近ほんとにHTMLを書きたくないです。 最低限のテンプレートを定義して、データのモデルを渡したら描画してくれるような感じがいいです。 なので、フロントサイドのjsフレームワークを何か試したいと思いました。 データを表示するくらいならjQueryでもよくね。って思いが拭えないので、ちょっと考えてみようかと思います。 テーマはよくあるTODO一覧を表示するアプリです。 こんなアプリを書く時に楽かどうか考えてみたいです。 jQuery まずは、jQueryで書いてみようかとともいます。 Vi
jQueryのdata-*属性キャッシュ仕様と対策
Updated 2014.02.16 / Published 2014.02.16 jQueryでdata-*属性を扱う際にjQuery.data()メソッドもしくはjQuery.attr()メソッドを使うことになるでしょうが、jQueryで扱えるdata-*属性のオブジェクトは前提としてキャッシュ仕様であることを理解しておかないと嵌ることが多々あります。 取得だけなら問題は起こらない <div id="user1" data-id="1" data-user="Jack" data-date-of-birth="2000-10-01">Jack</div> これらのdata-*属性を取得したい場合、jQueryであれば次のように記述します。 //data()の場合 jQuery("#user1").data("id"); // => 1 (数字扱い) jQuery("#user1").d
jQueryでページ最下部のスクロール時のイベントをキャッチする - Hack Your Design!
ユースケースとしては、Twitterのタイムライン表示ページのように最下部までスクロールしたら、そのイベントをキャッチして次ページのツイートをAutoloadして表示させたい！みたいなとき。 $(window).on("scroll", function() { var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { // when scroll to bottom of the page } }); 上コードでは、ウインドウのスクロール時にスクロール位置が今どれだけなのかを差分を見て計算してる。それが0以下になったら
Autosize
Usage The autosize function accepts a single textarea element, or an array or array-like object (such as a NodeList or jQuery collection) of textarea elements. // from a NodeList autosize(document.querySelectorAll('textarea')); // from a single Node autosize(document.querySelector('textarea')); // from a jQuery collection autosize($('textarea')); Methods Triggers the height adjustment for an assig
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
jQuery versus React.js thinking
jQuery versus React.js thinking Jan 11, 2015 I don’t like versus debates per se. I think each reasonably successful library or framework had good reasons (at the time being) to become so in the first place. We will compare conceptual differences behind jQuery and React. Problem List of items. Each item has details which are hidden by default. Whenever user clicks on an item, item will expand and s
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使った100のテクニックとサンプルコードを一括配布している・「jQuery Trickshots」
https://remotestance.com/blog/1447/
