JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTML の使い方を解説しているブログ

jQuery

 jQuery 版「要素をマウスで移動できるようにする方法」② ドラッグ移動版

要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスドラッグできるようにするサンプルを作ってみましたので、ぜひ参考にしてください。 では、下のサンプルを試してみてください。 <サンプル> 下の要素(青いボッ…

 jQuery 版「要素をマウスで移動できるようにする方法」① クリック移動版

要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスで移動できるようにするサンプルスクリプトを作ってみましたので、マウスで要素を移動する方法が今ひとつわからない場合は今回のサンプルを参考にしてください。 …

jQuery で要素にダブルクリックイベントを設定する方法

jQueryで要素にダブルクリックイベントを設定する jQueryを使って要素にダブルクリックイベントを設定するには「.dblclick()」を使用します。()内には実行したいスクリプトを記述します。 要素.dblclick(); 例)$("#btn").dblclick(); // id="btn"の要素にダ…

jQuery で要素にクリックイベントを設定する方法

jQueryで要素にクリックイベントを設定する jQueryを使って要素にクリックイベントを設定するには「.click()」を使用します。()内には実行したいスクリプトを記述します。 要素.click(); 例)$("#btn").click(); // id="btn"の要素にクリックイベントを設定 …

jQuery で要素をフェードインさせる方法

jQueryで要素をフェードインさせる jQueryで要素をフェードインさせるには「fadeIn」にスピードを設定して使用します。 要素.fadeIn(スピード値); スピード値:ミリ秒,"slow","normal","fast" 例)$("#test").fadeIn(5000); // 5000msでフェードイン jQuery …

jQuery で要素のCSSを変更する方法

jQueryで要素のCSSを変更するには「css」にプロパティ名と値を設定します。 要素.css(プロパティ名,値); 例)$("p").css("background","red"); jQuery + JavaScript ソース 「test-botan3」というIDが付いた要素をクリックすると「sample27」というIDが付い…

JavaScript + jQuery でストップウォッチを作る方法

// JavaScript + jQuery でストップウォッチを作る 今回は JavaScript と jQuery を使ってストップウォッチ(1/10秒タイプ)を作ります。このサンプルのポイントは、表示部分をテーブルではなく「span」タグと「CSS」で作っているところ。CSSの「Float」と「…

JavaScript + jQuery でドキュメント上のマウスポインタの座標を取得する方法

// マウスポインタの座標を取得する マウスポインタの座標を取得するには、JavaScript の「clientX」「clientY」を利用する。 X座標の取得:clientXY座標の取得:clientY 動作サンプル ドキュメント(ページ)の左上がXとYの0座標となる。 X座標:0 Y座標:…

jQuery と CSS でHTML要素を回転させる方法

// HTML要素をグルグル回転させる 今回は jQuery と CSS を使ってHTML要素をグルグル・・・と回転させてみます。 要素を右回転で45度回転させるCSS:transform:rotate(45deg); 動作サンプル ページが読み込まれると同時にピンク色のボックスとその中の文字「…

クリックでテーブルセルの背景色を変更する方法(jQuery版)

// クリックでセルの背景色が変わる 今回は jQuery と使ってクリックするとテーブルセルの背景の色が変わるスクリプトを作ります。 動作サンプル 無色のセルをクリックすると背景色が赤色になり、赤色のセルをクリックすると無色になります。 jQuery コード …

jQuery でシンプルなトグルメニューを作る方法

// jQuery でトグルメニューを作る メニュー項目をクリックすると一階層下にあるサブメニューが上下にスライドするトグルメニューを jQuery で作ってみます。 <サンプル> まずはサンプルを見てください。青色文字の項目をクリックするとその項目の下の階層…

jQuery で素早く上下に動くボックスを作ってみよう

下にあるピンク色のボックスをクリックすると素早く上下に動きます。このボックスを動かしているのは、jQueryの「animate関数」です。 今回のサンプル結果 // Html <div id="test-box"></div> jQueryコード <script type="text/javascript"> $(function(){ $("#test-box").click(function(){ //クリックを検出するリス…

jQuery の「animate」を利用して横に伸びるバーを作ってみよう

jQuery の animate を使って伸びるバーを作ってみよう 下の div タグで作ったピンク色のボックス(id="nobi-box")をクリックしてみてください。ピンク色のバーが5秒間で領域の横幅いっぱいまで伸びます。 // <jQuery ソースコード> $(function(){ $("#no…

jQueryでボタンが押されると緑色のボックスが枠の右端まで移動するスクリプトを簡単に作る

jQueryでボタンが押されると緑色のボックスが枠の右端まで移動するスクリプトを簡単に作ってみよう! 今回のサンプル ボタン「BUTTON」を押すとボタンの下にある緑色のボックスが枠の右端の位置に移動する。 結果 BUTTON jQuery + JavaScript animate で緑色…

jQueryでボタンが押されるとHTMLソースコードが変更されるスクリプトを作ってみよう

jQueryでボタンが押されるとHTMLソースコードが変更されるスクリプトを作ってみよう。 結果 サンプル BUTTON フォルクスワーゲン jQuery + JavaScript jQuery を使って「botan1」という id をもった <div> 要素がクリックされると、「moji」という id をもった要</div>…

jQuery でボタンが押されると文字が変更されるスクリプトを作ってみよう

jQuery でボタンが押されると文字が変更されるスクリプトを作ってみよう。 結果 BUTTON アメリカの大統領は? jQuery + JavaScript jQuery で「botan2」という id をもった要素がクリックされると、「moji2」という id をもった要素の中身(<div id="moji">変更される部分</div>)…

 jQueryでマウスポインタの座標をリアルタイムで表示する

jQueryでマウスポインタの座標を表示するスクリプトを作ってみよう。 結果サンプル マウスポインターを動かすとマウスポインターの現在座標をリアルタイムで表示。 結果 JavaScript + jQuery jQueryの「mousemove」関数を使って「window」(ブラウザの表示領…

<span>タグとCSSでボックスを動かすボタンを作る

<span>タグを使ってピンクのボックスを動かすボタンを作ってみよう! 今回のサンプル ピンク色のボックスの下にあるグレーのボックスをクリックするとピンク色のボックスが5秒かけて右に80ピクセル動く。ピンク色のボックスを動かしているのは「jQuery」の「animat</span>…

jQueryを使えるようにする方法(外部 jQuery配信サイトと連携)

はじめに 以前の記事で、一度ローカルにダウンロードしてから「jQuery」とリンクさせて使用するという方法を説明しましたが、その他にも、ダウロードをせずに外部で公開している jQueryファイルと連携させる方法というのもありますので、今回はその方法を説…

jQueryのダウンロードと日本語リファレンス

jQueryとはJavaScriptのライブラリのひとつで、Ajax通信やHtml要素の操作など、さまざまな機能をサポートしています。また、jQueryを利用するとJavaScriptのコードを簡略化できるので、コーディングが楽になってごちゃごちゃと長くなりやすいJavaScriptのコ…

jQueryの使い方 1.導入編

jQueryとは何なのか? jQueryとはJavaScriptのコードを簡素化して使いやすくしてくれたものだと思ってください。中身をのぞいてみるとわかりますがjQyeryはJavaScriptで書かれた関数の塊です。 1.jQueryをダウンロードする ダウンロードはここからです→(h…