jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
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で解除する方法
ラジオボタンを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の要素の表示・非表示を判定する方法を紹介します。 １．基本 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 { // 非表示
もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
npmにjQueryプラグインを登録する
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
npmで公開されているjQueryプラグインを使う with Browserify & parcelify | maesblog
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が表示されますが、この４つの関数を全て取得した
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】プラグインの様々な作り方(定義パターン)
「プラグインの作り方」と調べて出てくるのが大抵 $.fn.プラグイン名 = function(){全ての処理} この形でした。 ですが、配布されているプラグインのソースコードを確認すると上の形と違うことが多いです。 なので今回はよく見る定義パターンとそれぞれのメリット、デメリットをまとめてみます。 （間違っているところがあったらご指摘していただけると有難いです。） jQuery プラグインの定義パターンについて調べてみた （主にこの記事の内容、その他の記事、書籍を自分なりに整理したもの。） 1.いつもの定義 基本的なjQueryのプラグインの作り方。 (function($){ $.fn.myPlugin = function( option ) { var elements = this; return this.each(function() { }); var func = func
プラグイン作成
query_plugin_authoring_ja.md 元文書: Plugins/Authoring - jQuery Wiki(t) プラグイン/作成 jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です！プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3. データ 概要とベストプラクティス 翻訳 さあはじめよう jQueryプラグインを書
jQuery で iframe 内の要素にアクセス ： iframe 内を書き換え - 実験室 - ぐたり
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
jQueryのPromiseとDeferredとは - ハッカーを目指す白Tのブログ
javascriptで非同期処理がからむと、コールバックが乱立してしまい、エラーに対する例外処理を正確に書くことが難しくなった経験はないだろうか。今回は、JavaScriptで複数の連続する非同期処理を上手く扱うためのjQueryの標準モジュールであるjQuery.Deferredについて、その概念や使い方を解説していく。 目次1. jQuery.Deferredとは 2. .then()メソッドと.when()メソッド 3. 連続する非同期処理の関数化 4. jQuery.Deferredを使う場面 1. jQuery.DeferredとはjQuery.Deferredは、複数の連続する非同期処理を単純で分かり易く記述できるようにすると述べたが、それはどのようにして行われるのか。それは、複数の非同期処理ひとつひとつにPromiseオブジェクトを割り当て、それを伝播させていくことで実現され
jQuery Documents Main Page - jQuery
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 recommend that you check out the jQuery Learning Center. If you're updating to a newer version of jQuery, be sure to rea
jQuery animiteを無駄に繰り返させない方法。animate停止中の要素のみ実行。 | Stronghold Archive
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
jQueryで処理されるタイミング 【div箱の高さが取得できない！の原因１】
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
jQueryでマウスホイールの上下イベントを取得 ＋ 余韻をつけたイージングスクロールを実装する実験｜BLACKFLAG
最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くあり その都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですが jQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ 自分でもいろいろと試してみたので実験内容と併せて紹介してみます。 今回のjQueryを使ってのマウスホイールのイベント処理は 「Web制作 W3G」さんの記事を参考にさせていただいてます。 【参考記事】ホイール系イベント2014年版クロスブラウザ｜Web制作 W3G jQueryだけでなくネイティブJavaScriptでの取得方法や ホイール関連の処理について詳しく紹介されています。 記事によるとjQueryを使ってのマウスホイール処理方法は 以下のようなスクリプト記述で取得可能となります。 ◆SCRIPT <scri
WebAPIについての説明 - Qiita
はじめに 新人への説明の為に書きました。 元々は社内勉強会用のスライドのメモだったものを、いい感じに直して公開する事にしました。 「勉強は真面目にするものだ」と考えている人には向きません。 「技術的な事は正確でなければいけない」と考えている人には向きません。 基本的な事から馬鹿丁寧に書いてあるので長いです。時間ある時用の記事です。 誤解を生じるぐらい噛み砕いて簡単に説明してあります。 教科書的に通して読むことでWebAPIが理解出来るように書いてあります。 対象者 htmlとcssは書ける phpとjsを主にコピペでしか書けない IT関連の基本的な用語も知らない、理解してない WebAPI？何それおいしいの？っていう人 どちらかと言うと営業寄りの部署に所属 アジェンダ 第1部 知識編 WebAPIの 仕組みを理解する 用語を理解する 第2部 実践編 WebAPIを作る WebAPIを利用す
jQueryでスクロールすると上部に固定されるナビゲーション
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ページを開く
Nodejs jQuery needs jsdom
Public functions from within a jQuery plugin