jQuery入門道場
Kindle版の購入（￥450円） 本書のメニュー 「jQuery入門道場」と「よく分かる jQuery Deferred」の2冊をAmazon Kindleの電子書籍として販売しております。本サイトでは「jQuery入門道場」の5章までの内容をカット無しでWEB版で公開しております。 始めに jQueryとは？ セレクター 属性、CSS操作 HTML、テキスト、フォーム値の取得＆設定 横断（Traversing） jQueryオブジェクト操作 イベント処理 AJAX エフェクト・アニメーション プロパティ .data() ユーティリィ（関数） プラグイン その他 その他、目次など詳しくは、jQuery入門道場紹介ページをご覧ください。 電子書籍の形式と購入先 Amazon Kindle版では、PDFのような固定レイアウトではなく、リフロー型になります。リフロー型とは、見る端末により表示さ
jQuery入門道場 ～ jQueryの使い方～ 【エフェクト・アニメーション（Effects）】
jQueryの基本的な使い方を学べるサイトです。エフェクトとは、アニメーションの効果のことを指します。何かの状態が変化した時に、いきなり表示が変わるのは、ユーザーにとっては何が起きたのか分かりにくいものです。一定のアニメーションを付けることで、ユーザーに変化が起きている事を伝えられます。適切な箇所で、適切なアニメーションを使っていきましょう。 .show()、.hide() .toggle() .show()、.hide() .show()、.hide()は、お互い反対のメソッドのため、一緒に見て行きましょう。 .show()は、選択している要素を表示する場合、.hide()は、選択しているを非表示にする場合に使用します。 .show() .hide() 引数無しでこれらを呼び出した場合、瞬間的に選択されている要素を表示・非表示にします。 サンプルを見てみましょう。 .hide()は、C
jQuery超初心者にありがちな6つの間違い - あじゃぱー
顔に見える？最近「送水口」が気になるという話 「送水口」が気になる今日この頃 最近街中で気になる存在、それがこの「送水口」です。地上のフロアが7階以上あるビルなど、一定の条件を満たした建築物には設置が義務付けられているもので、火事が発生したフロアにただちに水を送るために使われるものです。ポンプ車…
ウィンドウ、モーダル｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3〔CSS3を使用した角丸レイアウトのダイアログボックス〕 jGrowl〔Mac OS XのGrowl風にメッセージ表示〕 jQDialog plugin for jQuery〔軽量のダイアログプラグイン〕 jqModal〔通知ウィンドウ、ダイアログ、モーダルウィンドウを表示〕 jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) 〔アラート、確認ダイアログ、入力プロンプトの作成〕 jQuery BlockUI Plugin〔ページや要素のブロック、モーダルダイアログ表示〕 jQuery Tools〔HTMLをオーバーレイ〕 LeaveNotice jQuery Plugin〔リンク先遷移時に通知
【jQuery】グレーアウトさせてポップアップを出す方法！
インジケータを回して何かを作業中に画面操作を防止する時や、 ポップアップを表示させる時などに使用するグレーアウト方法と、 グレーアウト上に表示するポップアップやインジケーター。 その他、作業領域等を表示させる方法をサンプルコードと共に解説します。 主に、JavaScript部分ではjQueryを使用し、HTMLとCSSを操作して実現させます。 それでは早速、次章より具体的な実装方法について解説します。 グレーアウト用の半透明パネルを予め用意しておこう グレーアウトを表示させよう グレーアウトを終了させよう グレーアウト用の半透明パネルを予め用意しておこう まずはグレーアウト用の半透明パネルの作成です。 グレーアウト時に毎回作成しても良いのですが、 結局同じものを使用するので、今回は予め非表示でHTML上に存在させてしまいます。 HTMLに書くとしたら下記の様な単純なDIVにIDとスタイル適
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE
最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。 どうだい？スムースだろ？ デモページ 個人的にこの動きが大好きです。 1時間くらいならずっとスクロールを見ていられます。 鬱の時なら半日はいけます！ HTML <a href="#bottom">下へスムース！</a> なにも工夫しなくて良いです。 ただ＃をつけてアンカーポイントへリンクを貼るだけです。 jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その後に以下のスクリプトを書きます。 <script type="text/java
チェックボックスにチェックしたらコンテンツを表示させる - かちびと.net
Result jQuery $('#check').click(function() { //クリックイベントで要素をトグルさせる $("#box").slideToggle(this.checked); }); css input{margin:80px 0 0 80px;} div{ display:none; margin:25px; padding:25px; background:#eee; width:200px; height:150px; } html <label><input type="checkbox" id="check">Check This!</label> <div id="box">content is here</div>
【jQuery】チェックされているチェックボックスを取得したい at softelメモ
:checkbox セレクタ jQueryの :checkbox セレクタは、CSSにはないjQuery独特のセレクタで、パフォーマンス面ではよくはありません。使用する場合は、具体的な要素名と共に使用することが推奨されています。 × $(":checkbox") × $("*:checkbox") ○ $("input:checkbox") さらに、よいのはCSSの疑似セレクタ風の記述ではなく、下のようにtype属性で判定する方法です。 ◎ $("input[type='checkbox']") :checked セレクタ :checked セレクタはチェックされているチェックボックスとラジオボタンにマッチします。 :checked セレクタはjQuery独特のもので、CSSにはありません。性能面で特によいわけではありません。 よりよいパフォーマンスを得るには、要素を取得した後で、.fil
jQueryのセレクタ解説 - jQuery入門 - [SMART]
jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img") 例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 $("img").css("border","3px solid red"); セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。 セレクタは要素名以外にも、ID名やCLASS名を指定することができます。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img.photo") IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。 $("img#photo01")
![jQueryのセレクタ解説 - jQuery入門 - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
Selectors - jQuery 1.3.2 日本語リファレンス
Selectors/API/jQuery 基本 #id 指定されたidを持つ要素を選択する。 element 指定されたタグ名の要素を選択する。 .class 指定されたクラスを持つ要素を選択する。 * 全ての要素を選択する。 selector1, selector2, ..., selectorN 複数のセレクターを指定して集合要素を選択する。 階層 ancestor descendant ancestorを先祖に持つdescendantを選択する。 parent > child 親子関係を指定して要素を選択する。 prev + next 前後関係を指定して要素を選択する。 prev ~ siblings prev以降の兄弟関係にある要素を選択する。 基本フィルタ :first 先頭の要素を選択する。 :last 末尾の要素を選択する。 :not(selector) 指定したセレクターを
jQuery.post() のシンプルな例
ざっと検索しても気に入ったコードの例がなかったので掲載。こちらのコードに少し手を入れた。この例は入力フォームに何らかの入力を行うと、入力した文字がリアルタイムで表示される。 keyup メソッドに渡すコールバックはフォームに入力した後に実行される。入力された値は $(this).val() で取得する。post メソッドの第1引数は投稿先の URL、第2引数は投稿するデータ、第3引数は POST リクエストが成功したときに実行されるコールバックで引数の data は投稿先の URL から返された値をあらわす。第4引数は投稿先から返される値のフォーマットで今回は JSON とした。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <label for="txtValue">値を入力してください : <
[作って学ぶ！jQuery] 第3回 画像ロールオーバーを作って学ぶ | バシャログ。
Webサイト制作において、クリックできる部品にマウスポインタを乗せたときなどに、表示を切り替えるエフェクトを「ロールオーバー」と呼びます。バシャログの左サイドバーの「ホーム」「はじめての方へ」にマウスをのせるとハイライトしますが、これもロールオーバーです。今回はjQueryを使ったロールオーバーの実装を解説いたします。 デモ 今回作成したロールオーバーは次のようなものです。 ロールオーバー サンプル HTMLソース <ul id="first" class="nav clearfix"> <li><a href="/"><img src="img/btn_home.gif" alt="HOME" width="160" height="40" /></a></li> <li><a href="#"><img src="img/btn_news.gif" alt="HOME" width="
![[作って学ぶ！jQuery] 第3回 画像ロールオーバーを作って学ぶ | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
「...続きを読む」で文章を省略させるプラグイン[ jTruncSubstr ]
スマートフォンサイトなどを作る上でも役に立つのではないかなと思います。 「…続きを読む」で文章を省略させるプラグイン [ jTruncSubstr ] 文章を省略させるプラグインはいくつかあるようですが、そのなかでも使いやすかったjTruncSubstrを紹介します。 「jTruncSubstr」 jTruncateがベースのプラグインのようです。 jTruncate：http://plugins.jquery.com/project/jTruncate なにが使いやすいかというと、 jTruncateは日本語のテキストにはあまり向かない作りだったのですが、日本語向けに使うことができるよう、改良されたものになっているようです。 また、オプションもカスタマイズすることができ、その時にあった表示や動きを指定できます。 また、このプラグインはjGlycyというjQueryのプラグインのようなもの
![「...続きを読む」で文章を省略させるプラグイン[ jTruncSubstr ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
jQueryサンプル集
サイト制作時によく使うjQueryのコードをまとめました。 このマニュアルで使用しているバージョンは、1.7.1です。利用する際は、本家サイトで最新版をダウンロードしてください。 目次 スムーススクロール マウスオーバー時の画像切替 マウスオーバー時の画像の透明度変更 アコーディオンメニュー スライドパネル タブパネル 画像切り替え lightbox カルーセル おまけ：ある程度スクロールしたら、ページの先頭へ戻るボタンを表示させる方法 コードとサンプル 先にjQueryを記述してから、コードを書いてください。（コードは選択してコピーできます。） <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> CDNを利用する場合は、以下をコピペしてください。 <script type="text/javascri
jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu
デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jQuery.circl
jQueryでサムネイル付きスライドショーをシンプルに作成する方法｜BLACKFLAG
以前にここで「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」と題して、 jQueryでの画像切替ビューアーを紹介しましたが、 これを応用して、自動で画像エリアが切り替わる シンプルな画像スライドショーを作ってみたのでご紹介。 まずは動作のサンプルから。 ※全体構成は以前の記事の物と同じにしてあります。 jQuery SIMPLE SLIDESHOW【SAMPLE1】 4枚の画像が自動でクロスフェードしてスライドショーとして切り替わり、 下部に並べてあるサムネイルをクリックすることで 特定のビジュアルに切り替えることも出来ます。 全体構成についてHTMLから。 ◆HTML <div id="slideshow"> <div> <div><a href="#1"><img src="img/photo01.jpg" width="400" height="300" alt
jqueryのpreventDefault - zerozerofourの日記
Javascript, jQueryブラウザのアクションを中断させる。 $("a").click(function(e) { e.preventDefault(); }); preventDefault()を使うことで、下記のようなaタグをクリックしてもページ遷移しないようになる。 a href="http://d.hatena.ne.jp/redsphinx/">zerozerofourの日記a>
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.techboon.info/archives/278