jQuery

Ajax通信とクロスドメイン問題

ajax通信とは URLを入力して希望するWebページをリクエストして、サーバーからのデータが送られてきて希望するページを閲覧するという通常の手順と違い、Ajax通信はJavaScriptを使用して必要なコンテンツを更新する仕組みです。通常の通信はページを全て読み込んで表示しますが、Ajaxはある一  >>続きを読む

jQuery Mobileの使い方

準備 jQuery Mobileのページに行って必要なライブラリをダウンロードまたはリンクします。 リファレンス参考 data-role transition テーマ作成 作成 sample.html HTML5の準備をします。 viewportの設定 jQuery Mobileのリンク コーディン  >>続きを読む

Topへ戻るボタンの作成〜jQuery

長いページでは必須のTopへ戻るボタンですね。 スクロールするとTopボタンが出現し、クリックすると緩やかにTopに戻ります。 この動きはCSSとjQueryで実現できます。easingなどを好みで脚色してください。 Topへ戻るボタンのサンプル CSSコード div#pagetop { displ  >>続きを読む

要素の追加〜jQuery

jQueryのprepend,append,before,afterのそれぞれのメソッドの違いを確認しておきます。 prependはHTML要素内の先頭に挿入します。 appendはHTML要素内の最後に挿入します。 beforeはHTML要素の前に挿入します。 afterはHTML要素の後ろに挿入  >>続きを読む

jQueryの記述の基本を覚える

マウスクリックした時のイベントの作成の基本形です。 $( );で全体を囲む 1の中に関数を宣言 function(){ } 2の関数の中に$( ’セレクター’).イベント( function(){ } ) 3の関数に中に命令文を書く 命令文は$( ’セレクター’).メソッド( ); $(functi  >>続きを読む

jQueryを使ったフォームのイベント処理

input要素にマウスやタブキーで選択された状態を感知して発火します。 $(セレクタ).focus(function(){ 実行する処理 }) 次のサンプルではテキストボックスに予め薄いグレーで「入力してください」と入力を促しておき、 ユーザーがテキストボックスを選択すると同時に「入力してください」  >>続きを読む

jQueryのイベント伝播〜バブリング

jQueryではそれぞれのイベントに対応したメソッドを利用してイベントハンドラを設定します。JavaScriptのDOM0ではイベント属性をイベントハンドラとして利用しました。また、documentオブジェクトを指定してそのプロパティにイベントハンドラを設定することもありましたが、ブラウザ依存の問題  >>続きを読む

jQueryメソッドの特性

jQueryのメソッドはgetterとsetterの2つの特性を持っています。 getterとsetterとは、オブジェクト指向のプログラミングで使用される特殊なメソッドです。 オブジェクト指向のプログラミングでは、フィールド変数のようなオブジェクト内のデータを外から見えないようにしています。(カプ  >>続きを読む

jQueryでのthisの使い方〜覚えると楽しくなる

jQueryにおけるthisとは thisとはどんな時に使用すればよいのでしょうか。 thisはイベントで設定したfunction内で利用すると、イベントが発生した要素を指します。 使い方 $(function(){ $(セレクター).click(function(){ $(this).メソッド()  >>続きを読む

jQueryでイベントを使ってみる

JavaScriptはイベントドリブンプログラムです。jQueryもJavaScriptですから全く同様です。 イベントの発生とともに何らかの命令が行われるものです。 イベントの基本であるマウスクリックの使い方を覚えましょう。 マウスクリックの記述 基本的な記述は簡単です。次のような書き方です。 $  >>続きを読む