Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Photo by Flickr: J. A. Alcaide's Photostream jQueryを使うことでブラウザ間の違いを吸収しながらも、簡易にDOM操作のJavaScriptコードを記載することができます。 よく使われるjQueryのDOM操作のメソッドをまとめました。 また、jQuery1.x系とjQuery 2.x系の選択基準として、 1.x系は IE8 以前をサポートするレガシーブラウザ向けのバージョン 2.x系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン ですので、適切なjQueryのバージョンを選んでください。 目次 jQueryの初期化処理の記述場所 子要素の追加(append, appendTo, prepend, prependTo) 要素の挿入(after, insertAfter, before, insertBefo
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読
概要 ▶ .onのイベントを指定する引数部分に「hover」と書いても意図した動作にはなりません。それはhover自体が複数のイベントをまとめて書いた省略形(エイリアス)だからです。本ページはプロモーションが含まれている場合があります 画像出典:.hover()(jQuery API Documentation) ●jQuery 1.7以降の.onを使っていますか?jQueryの1.7以降では、.onという要素にイベントを追加する命令(メソッド)が使えるようになっています。今まで.bindで書いていたものから置き換えて使えるようです。 といっても私は.bindすら使っていませんでしたが…(.hover()や.click()だけで事足りていたので…)。 The .on() method attaches event handlers to the currently selected set
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト(画像)を横にピコッとずらすアニメーション 画像をボワ~と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
jQueryのダウンロード方法突出した人気を誇るJavaScriptライブラリ、jQueryを入手する方法です。 jQueryのダウンロード jQueryは公式サイトで入手することができますが、それ以外にも次の場所で入手できます。 ・Downloading jQuery http://docs.jquery.com/Downloading_jQuery jQueryサイトのダウンロード専用ページです。各バージョンのリリースノートと共に入手することができます。また、NIGHTLY BUILDSと呼ばれるテスト中のバージョンやCDN、GITなどについてのアナウンスも得られます。 ・github.com http://github.com/jquery/jquery jQueryのすべてのソースコードはGitのリビジョン管理の下で、いつでもオンラインで閲覧することができます。 ・CDN インター
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは? そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目:導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
デモページ jQuery.fracsの実装 分けるエレメントの定義 エレメントはjQueryのセレクタを利用して定義できます。 var fracs = $( selector ).fracs(); 全体マップ 全体マップは空のcanvas要素を使用します。 <canvas id="outline" width="200" height="400"></canvas> 全体マップはJavaScriptで設定します。 $( "#outline" ).fracs( "outline", { crop: true, styles: [ { selector: 'header,footer,section,article', fillStyle: 'rgb(230,230,230)' }, { selector: 'h1', fillStyle: 'rgb(240,140,060)' } ] } )
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く