jQuery
// = 600){ $("#p-top-x").fadeIn("slow"); } else if(sc ↑ ページの先頭に戻るボタンを作る 今回は jQuery を使用して長いページをスクロールした時に右下に表示されるページの先頭に戻るためのボタンを作ります。 ※こちらがボタンのイメージです。 ↑ < お…
jQuery と CSS でハンバーガーメニューを作る 今回は jQury と CSS でスマートフォンサイトに欠かせないハンバーガーメニューを作ります。 ~ 主な仕様 ~ ・テキストで作ったメニューアイコンを配置する。・メニューアイコンをタップすると、画面の左に隠れ…
要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスドラッグできるようにするサンプルを作ってみましたので、ぜひ参考にしてください。 では、下のサンプルを試してみて下さい。 ※この記事では、画面上にある任意の…
要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスで移動できるようにするサンプルスクリプトを作ってみましたので、マウスで要素を移動する方法が今ひとつわからない場合は今回のサンプルを参考にしてください。 …
jQueryで要素にダブルクリックイベントを設定する jQueryを使って要素にダブルクリックイベントを設定するには、セレクトした要素に「dblclick()」を接続し、( )内に実行したいスクリプトを記述します。 セレクトした要素.dblclick(); 例)$("#btn").dblclic…
jQuery で要素にクリックイベントを設定する jQuery を使って要素にクリックイベントを設定するには、セレクトした要素に「click()」を接続し、( )内に実行したいスクリプトを記述します。 セレクトした要素.click(); 例)$("#btn").click(); // id="btn"の…
jQueryで要素をフェードインさせる jQuery で要素をフェードインさせるには「fadeIn()」に時間、または、既定値(slow=ゆっくり、normal=ふつう、fast=速い)を設定して使用します。 要素.fadeIn(時間); 時間:ミリ秒,"slow","normal","fast" 例)$("#tes…
jQueryで要素のCSSを変更するには「css」にプロパティ名と値を設定します。 要素.css(プロパティ名,値); 例)$("p").css("background","red"); jQuery + JavaScript ソース 「test-botan3」というIDが付いた要素をクリックすると「sample27」というIDが付い…
// JavaScript + jQuery でストップウォッチを作る 今回は JavaScript と jQuery を使ってストップウォッチ(1/10秒タイプ)を作ります。このサンプルのポイントは、表示部分をテーブルではなく「span」タグと「CSS」で作っているところです。 動作サンプル …
// マウスポインタの座標を取得する マウスポインターの移動を検出するのは jQuery の「mousemove」を、座標を取得するのは JavaScript の「clientX」「clientY」を利用します。
// HTML要素をグルグル回転させる 今回は jQuery と CSS を使ってHTML要素をグルグル・・・と回転させます。 要素を時計回りで45度回転させる場合:transform:rotate(45deg); 動作サンプル ページが読み込まれると、ピンク色のボックスとその中の文字「要素…
// クリックでセルの背景色が変わる 今回は、jQuery を利用してテーブルセルをクリックすると、そのテーブルセルの背景の色が変わるスクリプトを作成します。 動作サンプル 無色のセルをクリックすると背景色が赤色になり、赤色のセルをクリックすると無色に…
// jQuery でトグルメニューを作る メニュー項目をクリックすると一階層下にあるサブメニューが上下にスライドするトグルメニューを jQuery で作ります。 <サンプル> まずはサンプルを見てください。青色文字の項目をクリックするとその項目の下の階層にあ…
animate() で素早く上下に動くボックスを作る 今回は animate() 関数を使ってクリックすると素早く上下に動くピンク色のボックスを作ります。 <サンプル> 下のピンク色のボックスをクリックすると素早く上下に動きます。 // <Htmlソース> <div> 要素だけのシ</div>…
jQuery の「animate」で伸びるバーを作ってみよう 今回は jQuery の「.animate()」APIを使って横に伸びるバーを作成します。 <サンプル> 横に伸びるバーは div 要素の横幅を .animate() で拡大して実現しています。下のピンク色のボックス(idは"nobi-box"…
ボタンクリックで緑色のボックスを右端に移動する 今回は jQuery を使って、ボタンをクリックすると緑色のボックスが枠の右端まで移動するスクリプトを作ってみよう! 実行結果サンプル ボタン「BUTTON」を押すとボタンの下にある緑色のボックスが枠の右端の…
HTMLソースが変更されるスクリプト 今回は、jQuery を使用してボタンが押されると HTML ソースコードが変更されるスクリプトを作ってみます。 実行結果 サンプル BUTTON フォルクスワーゲン jQuery + JavaScript jQuery を使って「botan1」という id をもっ…
ボタンが押されると文字列が変更されるスクリプト 今回は jQuery を使って、ボタンをクリックすると文字列が変更されるスクリプトを作ってみます。 サンプル結果 サンプル結果にあるボタンをクリックすると「アメリカの大統領は誰?」という文字列が変更され…
今回は jQuery を使ってマウスポインタの座標を表示する仕組みを作ります。 ~ サンプル ~ マウスポインターを動かすとマウスポインターの現在座標をピクセル単位でリアルタイムに表示します。 結果 jQuery コード jQuery の「mousemove」関数で、ブラウザ…
jQuery と CSS で要素を移動させる 今回は jQuery を利用して <span> 要素を移動させる方法を説明します。 今回のサンプル ピンク色のボックスの下にあるグレーのボタン領域をクリックすると、ピンク色のボックスが5秒かけてゆっくりと右方向に80ピクセル動きます</span>…
本家の jQuery ファイルにリンクする 以前の記事で、jQuery ファイルを一旦ローカルにダウンロードしてからリンクして使用する方法を説明しましたが、他にも、jQuery ファイルをダウロードすることなく、jQuery 本家サイトが公開している jQuery ファイルに…
jQuery の公式ダウンロードサイトと日本語リファレンス jQuery とは JavaScript のライブラリのひとつで、Ajax通信やHtml要素の操作など、さまざまな機能をサポートしています。 また、jQuery を利用すると JavaScript のコードを簡略化できるので、コーディ…
jQuery ってなんだろう? jQuery とは JavaScript の関数を簡略化して利用しやすくしたものです。jQuery の中身(ソースコード)をのぞいてみるとわかりますが jQyery は JavaScript で書かれた関数の塊だと言えるでしょう。 1.jQueryをダウンロードする …