jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script> <!-- <script type="text/javascript" src="https://raw.githubusercontent.com/padolsey-archive/jquery.fn/master/cross-domain-ajax/jquery.xdomainajax.js"></script> --> <script type="text/javascript" src="https://rawgit.com/padolsey-archive/jquery.fn/master/cross-domain-aja
2016年6月、jQuery 3.0が正式リリースされた。今後は、従来バージョンのjQueryを使った既存のサイト/ページを、最新のバージョン3に徐々に移行していこう。移行ライブラリ「jQuery Migration」を使った方法を解説する。 ← 前回 連載 INDEX 次回 → 2006年8月に1.0がリリースされてから10年となる2016年6月、メジャーバージョンアップとなるjQuery 3.0がリリースされました。従来、jQueryでは以下のバージョンが並行して開発されていました。 1.x: 互換性重視(Internet Explorer 8以前もサポート) 2.x: 軽量化優先(モダンブラウザーのみをサポート) しかし、マイクロソフトがInternet Explorer 8以前のサポートを終了したことで、新しいjQuery 3では以下のモダンブラウザーのみをサポートすることになりま
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
はじめに 今回は、Ajax、Deferred機能などを中心に紹介しましょう。 また、先日7月7日に、jQuery 3.1.0がリリースされましたので、そちらの変更点も併せてお伝えします。 対象読者 Webアプリケーション開発に興味があり、jQueryを知っている方 Deferred機能 $.Deferredは、jQuery 1.5から導入された非同期処理のための標準モジュールです。ここでは、少し$.Deferredの基本的なところをおさらいしてから、jQuery 3での変更点を解説することにしましょう。 なお、jQuery 3での$.Deferredでは、破壊的な変更が3つあり、そのうち2つには新機能が含まれています。 $.Deferredとは Deferredとは、英語で、遅延、据え置きされた、などの意味 で、$.Deferredは、Promisesという概念を元に設計されたオブジェクト
どうも、ほそだです。ゴールデンウィークも終わり、暖かい空気を感じる季節になりました。 さてちょっと前に、こんな記事が話題になっていました。 You Don’t Need jQuery – Qiita (旧題:もうjQueryは必要ない) 元々は海外の方が書かれたものを日本語訳してくださったものですが、あらかた網羅されていて感服しました。実は今回、これと全く同じようなことをこのブログのネタにしようと考えていたのですが(jQueryでやってたことをjQueryを使わずにやってみた的な)、締切間近になってさあ書くぞってタイミングでここまで完璧なものを先に出されちゃったので、こりゃ勝てねえと泣く泣く断念したのですよね。。 それで急遽新たにネタを考えなきゃいけなくなったのですが、これに対するネット上での反応がけっこう興味深いなと思って見ていました。 「もうjQueryは必要ない」に関するみんなの反応
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
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
注意 この文章は、ここの文章をそのままコピペしたものです。 プラグイン作成に非常に有効なのでメモしました。 最新版はオリジナルの文章を読むことをお勧めします。 元文書: Plugins/Authoring - jQuery Wiki(t) jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です!プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3.
こんにちは!プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。(jQuery Mobile は不要です) iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この3点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
はじめに テキストボックスの変更を検知したくてイベントの挙動を調べたりしたのでメモ。 change, keypress, keyupの挙動まとめ キー操作したときにどんなイベントが発生するのかは日本語入力時に発生するキーイベントのテストを使って確認させていただきました。 ポイント changeはフォーカスが外れたときに発生する keypressは全角やdelete,backspaceを入力しても発生しない keyupはカーソル移動や全角・半角の切り替えなどすべてのキー操作を拾ってしまう change changeイベントを使うと変更を検知できます。
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
$.fn.extendと$.extendの違いメモ。 $.fn.extendと$.extendの違い タイトルの通り、$.fn.extendはインスタンスメソッドの追加、$.extendはクラスメソッドの追加を行う点が違う。 # インスタンスメソッドの追加 $.fn.extend({ instance_method: function(){ console.log('hey') } }); $('div').instance_method();
WEBサイトでalert(アラート)を出力する場合、通常は下記のような警告メッセージが出力されます。 「SweetAlert」を使用するとオシャレな警告メッセージを出力することができます。 テキストやデザインを自由に変更することができ、オプションで様々なダイアログメッセージを設定することが可能です。 今回はjQueryのスクリプト「SweetAlert」の使用方法をご紹介します。 「SweetAlert」の使用方法 下記のページから「SweetAlert」をダウンロードします。 SweetAlert ファイル読込 jQuery、ダウンロードした「SweetAlert」を読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
jQueryを使った複雑なアニメーションを実装しようとすると CSSのプロパティ値を細かく操作して設定することが必要になりますが 複雑なアニメーションからシンプルなものまで、 簡単かつ軽量なかたちで実装することができるプラグイン 「jQueryTween」がとても便利そうだったので紹介してみます。 jQueryTween – Lightest Tweening Engine for jQuery jQueryTween – Lightest Tweening Engine for jQuery 「jQueryTween」は「tween.js」と併せて使用し ハードウェアアクセラレーションを行って軽量かつ高機能なアニメーションを実現しています。 プラグインページのアニメーションデモでは ・Animating Object Size ・Animating Colors ・Transform T
ページの更新性を高めたり、 ページの読み込みを早くしたり、ページ操作のストレスを軽減したりする目的で、 Ajaxが使われる機会はとても増えてきています。 jQueryはこのAjaxの機能を、とても使いやすくしてくれます。 ただ、その記述方法は目的によっていくつかあり、 その記述方法は昔のjQueryのバージョンとは変化してます。 そこで、今のjQuery(1.8以降)でのAjaxの基本的な使い方をまとめてみました。 「$.ajax()」: Ajax全般を扱う 通信を行うファイルの形式を選ばない、汎用的な方法です。 $(function(){ /*---------------- Ajax全般 ----------------*/ //最小限 $.ajax({ url: "module.html" }).done(function(data){ //ajaxの通信に成功した場合 alert(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く