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を捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
alert()のダイアログのスタイルを変更するスクリプト・SweetAlert
alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。 alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。 確かに普通にアラート出すよりいいかもしれません。 <script src="jquery.js"></script> <script src="sweet-alert.min.js"></script>コアとSweetAlertを読み込みます。 $('.foo').click(function(){ swal({ title: "アラートです！", text: "メッセージがココに入ります", imageUrl: 'http://placehold.it/500x500', confirmButtonText: '了解！', confirmButtonColo
SweetAlert2
Sweet Alert 2 A beautiful and customizable replacement for Javascript's "Alert" Supported fork of t4t5/sweetalert Download CDN So... What does it do? Here’s a comparison of a standard error message. The first one uses the built-in alert -function, while the second is using SweetAlert2 . Normal alert Show error message Code: alert ( 'Oops... Something went wrong!' ) Sweet Alert 2 Show error message
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
Webllica
Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 スクリプト全体はあまりシンプルと言える構成ではありませんが、少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。 設置の際の簡単な注意点としては、HTML構成上このコンテンツスライダー要素全体を囲うブロック要素があった場合は、 その要素の幅は100%になっている必要があります。 併せて、この形状のコンテンツスライダーを１ページ内に複数設置することはあまりないかと思いますが、複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。 ※2016/01/09 改定 カスタマイズに関しては、jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり、CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。 ページネーショ
Lightbox2.5～2.7 | Webサイト制作支援 | ShanaBrian Website
Lightbox2.5～2.7の使用方法をご紹介しています。 Lightbox2.5～2.7は別ウィンドウ（ポップアップ）ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。 Lightbox2ではprototypeを利用していましたが、lightbox2.5以降ではjQueryを利用するようになりました。 公式サイト ※ このライブラリは、jQueryが別途必要です。 ※ ボタンなど透明pngを使用しているためIE6では一部表示が異なる場合や動作しない場合があります。 ※ Lightbox2.6以降ではjQueryが1.10.2未満のバージョンだと正常に動作しない場合があります。 目次 ダウンロードと設置 JavaScriptおよびCSSの読み込み 適用方法 グループ化 キャプション 設置時に異なる階層への対応方法 ダウンロードと設
1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法
$.ajaxによるJSON読み込み方法 例えば以下のようなJSONの場合 [ { "version": "1.5", "codename": "Cupcake" }, { "version": "1.6", "codename": "Donut" }, { "version": "4.4", "codename": "KitKat" } ] $.ajaxでの読み込みは下記のようになる $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json', dataType: 'json', success: function(json){ var len = json.length; for(var i=0; i < len; i++){ $("#a").append(json[i].version + ' ' + json[i].coden
jQuery入門道場 - 【jQueryとは？】
1章 jQueryとは？ この章で見る主な内容です。 jQueryとは？ jQueryの基本 $ 又はjQueryの基本的な使い方 jQueryオブジェクトとは DOM要素の生成 jQueryとは？ jQueryとは、John Resig（ジョン・レッシグ）氏によって開発／公開されたJavaScript用のライブラリです。2006年8月に最初のバージョンをリリースして以来、着実にバージョンアップを重ね、2013年11月時点での最新版は、1系はVer.1.10.2、2系は、Ver.2.0.3です。 ライセンスは、MIT Licenseとなっており、ライブラリの著作権表示を消さなければ、商用・非商用を問わず、誰でも自由に利用することができます。 jQueryは、比較的に後発に登場したJavaScript用ライブラリですが、今では断トツの人気を博しています。 他に名が知れているライブラリでは、p
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
js STUDIO | JavaScript、jQuery日本語リファレンス
AngularJS 1.2 ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス このサイトについて リファレンスの翻訳を中心に、JavaScriptに関する情報を取り扱うサイトです。 現在、公開しているJavaScript関連の情報です。 JavaScript Mozilla Developer Networkの内容を翻訳して公開しています。 jQuery jQuery
.animate() | jQuery 1.9 日本語リファレンス | js STUDIO
各オプション値を設定します。詳細は下記の通りです。 duration 型:Number or String 初期値:400 アニメーションする時間を指定します。 easing 型:String 初期値:swing イージングの種類を指定します。 queue 型:Boolean 初期値:true falseを指定すると、キューに追加されずに即座にアニメーションを実行します。 1.7からは、文字列を指定することで追加するキューを指定できるようになりました。 specialEasing 1.4追加 型:PlainObject 1.4から追加された機能です。 CSSプロパティのマップ値を指定することで、その効果がイージングに反映されます(?) step 型:Function( Number now, Tween tween ) 各アニメーション要素の各アニメーションプロパティから呼び出される関数で
[jQuery][HTML5]タグに独自属性を追加した場合の扱い方 | 大発見 | 大発見
jQueryでいろんな処理を行うにあたって、HTMLにデータを埋め込んで使いたいことがあります。 そのようなデータは画面上に表示したくないために、タグ属性にデータをセットしたいけど、適切な属性がない場合、独自属性を追加することがあります。 独自属性といっても適当に名前をつけるのは間違いです。アクセシビリティが低下してしまいます。 独自属性の書き方 アクセシビリティについては今度書こうと思います。 HTML5では独自属性の命名規則が決まっており、DOM操作方法としてもちゃんと決まっているようです。 独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP 独自データ属性の詳しい仕様 例えば、「data-user-name」や「data-url」といった「data-」をつけた名前をつけることができます。(もう少し細かい制約がありますが) ただ命名規則だけでな
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit
jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオン などの良く使われるものから、簡易的 なパララックスやバリデーション、ズ ーマーなどなど多機能なUIキットとな っています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。 さて、今日はUIキットのご紹介。jQueryベースとなっています。 jQuery UIでいいじゃんと思う方も多そうですけど、選択肢があるに越した事はありません。 ずらっと並んでいます。機能は42種とかなりの数です。 使い方は基本的には他のプラグインと変わりありません。コアとjKitを読み込んでセッティングします。 DOM要素にrel属性を与える形で実装します。 <div id="foo" rel="jKit[accordion]">例えばアコーディオンなら上
美しいプログラムを書く(業務用Webアプリケーション保守編) | Webシステム開発／教育ソリューションのタイムインターメディア
あらすじ あなたはとある業務用 Web アプリケーションの開発・保守を任されています。 このアプリケーションは ASP.NET を用いて作成されており、 クライアントサイドは一部 jQuery を利用してナウなヤングにバカウケの UI を実装しています。 さて、今回は 商品情報の変更履歴を一覧表示する。一覧から2つのバージョンを選んで差分を表示できるようにする。 という機能を実装することになりました。 これ自体はちゃちゃっと実装し、以下のようなHTMLが生成されるようにしました: ... <table> <tr> <th>A</th> <th>B</th> <th>変更日時</th> <th>変更者</th> </tr> <tr> <td><input type="radio" name="new_version" value="9"/></td> <td></td> <td>2012-0
jQuery
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use
初心者のためのjQueryプログラミング入門 - libro
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
漢は黙ってjQuery
Skitter • Slideshow for anytime