2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
プログラマだけど異世界の開発会社に転生した - megamouthの葬列
最適化（オプティマイゼイション） ジャムス「どうもページの表示が遅いんだ。多分Javascriptが重すぎるんだよ。どうしたらいいんだろう？」 エイダ「しょうがないわね。ふーん。まずJqueryのappendが多いわ。DocumentFragmentやinnerHTMLをもっと効果的に使わないと」 ジャムス「ふーむ」 と言ってジャムスはTeraPadを開くとjsファイルを編集しはじめた。エイダがすかさず口は挟む。 エイダ「待って。前のファイルをちゃんと残しておかないと。」 ジャムスはうっかりしていたとばかりにエクスプローラーで、main.jsをクリック。CTRL+Cでコピーすると、流れるような動きでCTRL+Vを押す。すぐさま「main.js のコピー」ができあがる。 エイダが呆れて言った。 エイダ「それじゃ、いつの履歴かわからないじゃない！。今日の日付main.1281落葉の月21の日.
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 一部破壊的な変更があり 既に非推奨と公表していたAPIを削除 ドキュメントにない隠しAPIの削除 特定の入力値に対する
[WIP]これからの生JS & jQueryとの付き合い方 // Speaker Deck
All slide content and descriptions are owned by their creators.
![[WIP]これからの生JS & jQueryとの付き合い方 // Speaker Deck](https://cdn-ak-scissors.b.st-hatena.com/image/square/186eb2a82940b59c5c92c3099669ab595a939682/height=288;version=1;width=512/https%3A%2F%2Fspeakerd.s3.amazonaws.com%2Fpresentations%2Fe8eb376a63b64293987c99a6574d8363%2Fslide_0.jpg)
jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」:phpspot開発日誌
Naver/Formstone/Ben Plum レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」。 ありきたりな次のようなメニュー。 ブラウザの幅を小さくすると次のようにデザインが変更されます。 クリックで開閉。 フラットデザインがなかなか良い感じですね アニメーション設定やイベントハンドラのカスタマイズも可能。 関連エントリ クールな円形ナビゲーションを作るチュートリアル レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブなナビゲーションの見本やチュートリアル ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」
マイクロテンプレートエンジン jQuery Tempura | それなりブログ
jQuery Tempura は jQuery 依存の簡単な Templating Engine です。 この記事のものや jQeury Plugin Registry などを調べたのですが、 自分の要望を満たすものが無いので、オレオレにしちゃいました。 普通のHTMLファイルの上から、正しいHTMLを維持したまま使える {{foo}} や <%= foo %> といったテンプレ変数を埋め込まなくて良い。AngularJS のようにHTML属性値でテンプレ変数とリンクする。 これは一言で言えば「HTMLがまんま残るのは良いことだ」という利点であるが、「別のテンプレートエンジンと併用が可能」という側面もある。 必要な部分だけを更新する 更新の度に、テンプレ全体を再生成しない。 テンプレ変数が足りなくても空白になったりしない、前の状態が残る。 なので、イベントハンドラを生かし易い。大体のケース
WebKit系ブラウザ（Chrome／Safari）で両端揃えはできないの？jQueryで検証してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。カートン買いでライターが溜まっているライターの内藤です。 先日、とある案件で「pタグの部分、両端揃えした方がきれいに見えない？」という話が出て、FirefoxとIE10は問題なかったのですが、WebKit系（ChromeとSafari）が対応していないことに今更気づき、何とかできないものかと思ったのがこの記事の経緯です。 具体的には、 text-align: justify; text-justify: inter-ideograph;（IE用） がWebKit系だと綺麗に見えないぜ！ということです。 目次 ブラウザによる両端揃えの見え方の違い 参考になったjQueryコード slabTextとFitText WP slabText 試してみた 研究してみた 自作の幅調整jQueryとその解説 プロトタイプ1 プロトタイプ2 この問題の最新事情 まとめ ブラウザによる両端揃えの
jQuery：よく使用される機能をまとめて実装できるプラグイン - NxWorld
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示（thickbox.jsを使用） スムーススクロール タブ機能 CSS3の擬似クラスをクラ
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月
紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。
pickadate.js
There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker. Some examples are displayed on Codepen. When using the “classic” theme, it is important to have a wrapper div with position: relative around the source input to ensure the picker is sized according to the input elem
画像も動画もGoogle Mapsもあらゆるコンテンツを拡大表示するスクリプト -iLightBox | コリス
画像をはじめ、画像ギャラリー、そして動画、HTMLコンテンツ、外部サイトなど、あらゆるコンテンツを拡大表示するjQueryのプラグインを紹介します。 あらゆるコンテンツをサポートします。 画像、画像ギャラリー、動画（HTML5, YouTube, Vimeoなど）、Flash/swf, Google Maps, iFrame, AJAX, Alert/Confirm/Promptなど 主要なブラウザ全てをサポートします。 IE7/8/9/10, Firefox, Chrome, Safari, Opera iOS4+, Android 主要なデバイスを全てサポートします。 デスクトップ・タブレット・スマートフォン スワイプ操作やRetinaディスプレイもサポートしています。 iLightBoxのデモ デモではあらゆるコンテンツをiLightBoxで拡大表示します。 まずは、画像一枚を拡大表
ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」:phpspot開発日誌
ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 2013年02月12日- Overview - jQuery Rondell ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」。 次のように、カルーセルやスライダー等、様々な画像ギャラリーのUIを実現することができます。 多機能だけじゃなくて、カッコいいところもいいです。サンプルサイトがBootstrapベースですが、Bootstrapベースのサイトに入れても違和感なく埋め込めるでしょう。 カルーセル スライダー スクローラー サムネイル付きギャラリー。動きもいい感じ 関連エントリ ブラウザ上でまるで美術館。3Dイメージギャラリーデモ 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン サムネイルがシャッフルされてク
タッチデバイスにも対応したシンプルなLightboxを実装するjQueryプラグイン・Swipebox - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox(); 使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a> マー
jQueryの可能性は無限大！？プラグインまとめ番外編 - Webデザイン初心者向けのあれこれ
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
ガントチャートとタスクツリーが作れるjQueryコンポーネント「Teamwork Gantt」:phpspot開発日誌
Teamwork Gantt ガントチャートとタスクツリーが作れるjQueryコンポーネント「Teamwork Gantt」。 次のようなガントチャートを作成できる無料サービスに加えて、実装コンポーネントをダウンロードすることができます。 開始日、終了日の指定がカレンダーで指定できたり、入力も楽々。 この手の使いやすいUIを自分で作るとなると骨が折れそうですが、これをカスタマイズ等して便利に使うことが出来そうです 関連エントリ コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookのようなサイトツアーを実装できるjQueryプラグイン5選
