JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
ラジオボタンをjQueryで解除する方法を紹介します。 １．問題点 次のようなラジオボタンがあるとします。 <input type="radio" name="foo" value="1">1 <input type="radio" name="foo" value="2">2 <input type="radio" name="foo" value="3">3 このラジオボタンのいずれかを選択したあと、通常は選択を解除することができません。 が、選択したラジオボタンを解除できるようにしたいのですが方法が分かりません。 ２．ラジオボタンを解除する（checked属性がない場合） ラジオボタンを解除するには、次のようなjQueryを追加します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
WebPro KUSANAGI Security Editionが進化！ 新機能「SafeUpgrade」でダウンタイムゼロのnginxアップデートを実現 KUSANAGI Security Editionが新機能「KUSANAGI SafeUpgrade」を導入し、nginxのメジャーバージョンアップを無停⽌で実施可能にする。 0 0 WebPro 高速CMS基盤「KUSANAGI Security Edition」がMicrosoft Azureに登場｜自動アップデートで安全性を確保 プライム・ストラテジーが、新しいセキュリティ基盤「KUSANAGI Security Edition」をMicrosoft Azureで提供開始。セキュリティ向上と運用効率... 0 0 WebPro KUSANAGI 9、新たにOracle CloudにAlmaLinux OS 9を採用し、2032年ま
npmにjQueryプラグインを登録する 本エントリーは「to-R JavaScript Advent Calendar 2015」20日目のエントリー、今回はnpmにjQueryプラグインを登録する方法について解説をします。 「npmとBrowserifyでjQueryプラグインを管理する」で解説したとおり、npmに登録しておけばユーザーがコマンドラインからインストールができるようになり使いやすくなります。 (同様のパッケージ管理としてbowerがありますが) jquery.heightLine.jsをnpm登録したのでその内容をご紹介します。 プラグインのCommonJS化 jQueryプラグインの場合は以下の雛形の中でjQueryプラグインを定義します。 function (factory) { if(typeof module === "object" && typeof modu
2月18日にnpmのブログに「The npm Blog — Welcome, jQuery developers!」という記事が投稿されました。 The jQuery Plugin Registryはすでに読み取り専用と化しているので、npmはjQueryコミュニティのサポートを開始するという内容でした。つまりnpmはjQueryプラグインの公開にも力を入れていくということです。 この記事に続いてjQueryプラグインの公開方法、使用方法、開発方法などの記事も続々と投稿されました。jQueryプラグインもまだまだ見捨てられていないということを信じて、今回はnpmで公開されているjQueryプラグインの使い方について紹介します。 さらにnpmのブログで2月25日に投稿された「The npm Blog — Using jQuery plugins with npm」という記事では、「npmでj
要素に紐付くイベントハンドラを全て取得する方法はあるでしょうか。 たとえば、 <body> <button id="button1" onclick="alert('test1');">test</button> <script> $("#button1").click(function () { alert("test2"); }); $("#button1").click(function () { alert("test3"); }); $(document).on("click", "#button1", function () { alert("test4"); }); </script> </body> のようなページの場合、#button1のボタンをクリックすると test1 test2 test3 test4 の４つのalertが表示されますが、この４つの関数を全て取得した
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
query_plugin_authoring_ja.md 元文書: Plugins/Authoring - jQuery Wiki(t) プラグイン/作成 jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です！プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3. データ 概要とベストプラクティス 翻訳 さあはじめよう jQueryプラグインを書
jQuery で iframe 内の要素にアクセス (iframe 内を書き換え) ※ このページでの jQuery は、Google AJAX Libraries API から Ver.1.4.* 系をロードしています。 iframe 内の要素を書き換える (iframe 内は同一サーバー) 例 ： iframe 内、class 名が classC の全要素に、任意の文字を追加 $('#iframe00').contents().find('.classC').append('<em>★デュフフ<\/em>'); 実行 ソース表示 iframe 内の要素を書き換える (iframe 内は別サーバー) 例 ： iframe 内、div タグの全要素に、任意の文字を追加 $('#iframe01').contents().find('div').append('<em>★デュフフ<\/e
javascriptで非同期処理がからむと、コールバックが乱立してしまい、エラーに対する例外処理を正確に書くことが難しくなった経験はないだろうか。今回は、JavaScriptで複数の連続する非同期処理を上手く扱うためのjQueryの標準モジュールであるjQuery.Deferredについて、その概念や使い方を解説していく。 目次1. jQuery.Deferredとは 2. .then()メソッドと.when()メソッド 3. 連続する非同期処理の関数化 4. jQuery.Deferredを使う場面 1. jQuery.DeferredとはjQuery.Deferredは、複数の連続する非同期処理を単純で分かり易く記述できるようにすると述べたが、それはどのようにして行われるのか。それは、複数の非同期処理ひとつひとつにPromiseオブジェクトを割り当て、それを伝播させていくことで実現され
jQuery 4.0 is coming soon! Prepare by upgrading to the latest jQuery 3.x release. Learn more about our version support. jQuery API 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 API that works across a multitude of browsers. If you're new to jQuery, we
jQuery animiteを無駄に繰り返させない方法です。 animateは結構便利なので使いがちですが 落とし穴もあります。。。 ホバーやクリックを繰り返したら繰り返した分だけアニメーションが実行されたり またscrolltoであっちに行ったりこっちに行ったり…挙動がおかしかったり。 そんな時に役に立つのが animate停止中の要素のみ取り出す$(this).not(“:animated”)の記述です。 例 <script type="text/javascript"> $(document).ready(function(){ $("ul.example li a").hover( function () { $(this).not(":animated").animate({"opacity":"1"},"slow"); }, function () { $(this).anim
Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/1/ukgadokikaku/web/adokikaku.com/dev.adokikaku.com/wp-includes/formatting.php on line 4382 Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/1/ukgadokikaku/web/adokikaku.com/dev.adokikaku.com/wp-includes/formatting.php on line 4382 Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users
最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くあり その都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですが jQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ 自分でもいろいろと試してみたので実験内容と併せて紹介してみます。 今回のjQueryを使ってのマウスホイールのイベント処理は 「Web制作 W3G」さんの記事を参考にさせていただいてます。 【参考記事】ホイール系イベント2014年版クロスブラウザ｜Web制作 W3G jQueryだけでなくネイティブJavaScriptでの取得方法や ホイール関連の処理について詳しく紹介されています。 記事によるとjQueryを使ってのマウスホイール処理方法は 以下のようなスクリプト記述で取得可能となります。 ◆SCRIPT <scri
レストランで例えた説明の詳細1 コックのスタンス コックはウエイターがどういう方法で注文を受け付けたのかは気にしない。 お店にお客さん来て注文、電話注文、FAX注文、ネット注文何でも良い。とにかく伝票クレというスタンス。 ブラウジングでいうと、サーバはクライアントが何かは気にしない。PCのブラウザでもスマホアプリでも何でも良い。 レストランで例えた説明の詳細2 ウエイターのスタンス ウエイターはコックがどう料理するかは気にしない。コックが1人で作ってる。コックが1000人で作ってる。スイーツは隣のお店から買っている、とか別に興味が無い。とにかく伝票と料理をクレというスタンス。 ブラウジングでいうと、クライアントはサーバがどういう処理しているかは気にしない。DBがMysqlでもOracleでもよいし、ハードウェア的に1台のコンピュータでも複数台のコンピュータでもよいし、サーバから別なサーバを
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
