『web制作現場ですぐ役立つ jQuery実践講座』の講師をします【8/4・11(土) 神戸・カフーツ】

2012年7月30日 15:57 『web制作現場ですぐ役立つ jQuery実践講座』の講師をします【8/4・11(土) 神戸・カフーツ】

企業サイトの構築なんかでニーズの多いjQueryの使用法を、実際にコードを書いて、学んでいただく実践的なjQuery講座を全二回で開催しますよ!

ぜひぜひお気軽にご参加くださいねー!

『web制作現場ですぐ役立つ jQuery実践講座』の詳細・お申込みはこちら

関連するブログ記事
スポンサード リンク
カテゴリー
jQuery | セミナー/講習会
タグ
JavaScript | jQuery | セミナー

コメント(8) | トラックバック(0)

 

『WebデザイナーのためのjQuery入門講座』の講師をします【3/10(土) 神戸・カフーツ】

非プログラマなWeb屋のみなさん!

プログラマじゃなくてもちょこっとJavaScriptやjQuery知ってると色々と便利だし、プログラマな人に仕事を頼む時も話がしやすくなりますよ!!

というわけで、いつも大変お世話になっている神戸のコワーキング・スペース カフーツさんの主催で『WebデザイナーのためのjQuery入門講座』の講師をさせて頂くことになりました。

JavaScript/jQueryの基本から、ある程度実用的なサンプル紹介まで、これからjQueryもかじろうかな、という人向けの内容となっております。

ぜひぜひお気軽にご参加くださいねー!

『WebデザイナーのためのjQuery入門講座』の詳細・お申込みはこちら

関連するブログ記事
カテゴリー
jQuery | セミナー/講習会
タグ
JavaScript | jQuery | セミナー

コメント(13) | トラックバック(0)

 

jQuery でフォームの値を取得・変更する方法

input要素等の値を取得する

jQuery を利用してフォームの値を取得するには、

// 変数 Fvalue にフォームの値を代入
var Fvalue = $("#id").val();

とやればOKです。

JavaScript でやろうとするとループを回したりして色々めんどくさい select要素によるドロップダウンの値も、val() だけで取得できるので非常に楽ちんです。

input要素に値をセットする

逆に、フォームの input要素に値をセットする(変更する)には、

// #id の値を「1」に変更
$("#id").val(1);

とやればOKです。

関連するブログ記事
カテゴリー
jQuery
タグ
input要素 | JavaScript | jQuery | val

コメント(7) | トラックバック(0)

 

jQuery で iframe 内のウィンドウから親ウィンドウの要素を操作する方法

本日も jQuery の小ネタメモ。

いわゆるLightbox風のインターフェイスが流行している影響で、インラインフレーム(に見えないUIだけど)内のウィンドウから、呼び出し元である親ウィンドウの要素を操作する、という処理は多用する機会が増えたなあ、という印象がありますね。

親ウィンドウの要素を操作する時は、

parent.$("#id").addClass('ClassName');

とか、

parent.$("p").html('カラオケ行きたい。');

とか、まあ普通の JavaScript と同じように parent で親ウィンドウを指定すればOKです。

関連するブログ記事
カテゴリー
jQuery
タグ
iframe | JavaScript | jQuery | parent

コメント(12) | トラックバック(0)

 

jQuery で指定した要素のスタイルを変更する方法

jQuery の超小ネタメモ。

ボタンクリックに合わせて、特定要素の背景色や文字色を変えたりというインターフェイスを実現するには、jQuery を使うのが手っ取り早いですね。

// div要素の文字色を変更
$("div").css("color","#9932cc");

上記のように、変更したいスタイルのプロパティと値をカンマ区切りで指定します。

複数のスタイルを一気にしたいする場合は、以下のようにさらにカンマ区切りで続ければ良いです。

// div要素の文字色と背景色の変更
$("div").css("color","#9932cc", "background-color", "#000000");

何らかのアクションに合わせて、ブロック要素の表示・非表示の切り替えをしたりするのもよくやりますが、これも display:none; と display: block; (または display: inline; etc) を切り替えれば良いわけですね。

// id="mesage" を非表示にする
$("#message").css("display", "none");

// id="message" を表示する
$("#message").css("display", "block");

クラスの追加と削除

上記のように css() を使って直接スタイルを指定するのも良いですが、デザインとの一元管理を考えると、クラスの追加・削除を活用した方が良いかもしれません。

// div要素にクラスClassNameを追加
$("div").addClass("ClassName");

// div要素からクラスClassNameを削除
$("div").removeClass("ClassName");

クラスAをクラスBに変更したい場合は、removeClass("ClassA") で削除した後に、addClass("ClassB") で追加してやれば、結果的にClassA が ClassB に変わったことになりますね。

関連するブログ記事
カテゴリー
jQuery | スタイルシート(CSS)
タグ
addClass | css | JavaScript | jQuery | removeClass

コメント(16) | トラックバック(0)

 

jQuery で指定した要素の中身を空にする方法

また jQuery の超小ネタのメモです。

jQUery で、指定した要素の中身を空にする方法です。

例えば p要素の中身を空にしたい場合は、以下のようにします。

$("p").empty();

もちろん、「.class」「#id」のような指定で、クラスやID指定した要素を空にもできます。

関連するブログ記事
カテゴリー
jQuery
タグ
empty | jQuery | xhtml

コメント(13) | トラックバック(0)

 

jQuery で非同期通信中にローディング画像を表示する方法

超小ネタですが。

jQuery で非同期通信処理をしている間に「Now Loading」的なアニメーション画像を表示する、というのはよくあるパターンですが、その方法の解説です。

ローディング中の画像を表示するスクリプト

例えば、以下のような html の id="message" の内容を Ajax によって変更したい場合。

<p id="message">ここのメッセージが非同期通信後に変更されます。</p>
<form method="GET" action="#">
  <input type="button" value="ここをクリックでメッセージ変更" onclick="ChangeMessage();">
</form>

この時、function ChangeMessage() の中身は通常以下のようになります。

function ChangeMessage(){
	$.post(
		// 通信先URL
		"./message.cgi",
		// 送信するデータ
		{
			hoge:"huga"
		},
		// 返った結果の処理
		function(data){
			$("#message").html(data);
		}
	);
}

で、 message.cgi から結果が帰ってくるまでの間に「Now Loading」的な GIFアニメアイコンなんかを表示したければ、単に $.post (); の直前で、id="message" の中に GIFアニメアイコンを表示するようにすれば良いだけです。
結果が帰ってくれば、id="message" の中身はそのレスポンス内容に変更されますからね。

というわけで、

function ChangeMessage(){
	$("#message").html('<img src="loading.gif" width="10" height="10" alt="Now Loading..." />');
	$.post(
		"./message.cgi",
		{
			hoge:"huga"
		},
		function(data){
			$("#message").html(data);
		}
	);
}

みたいな感じの一行を追加すれば良いわけです。

ローディング中の画像の作り方

簡単にローディング中の GIFアニメアイコンを作れるサイトがあったので、ついでにご紹介。

Load Info - gif generator で、色々と Now Loading なアイコンを簡単に作ることができます。

関連するブログ記事
カテゴリー
jQuery
タグ
Ajax | JavaScript | jQuery | xhtml

コメント(6) | トラックバック(0)

 

jQuery UI の Sortable モジュールでリストをドラッグしてソート可能にする方法

ul要素や ol要素で作成したリストを、マウスのドラッグ&ドロップで好きなようにソート可能にする jQuery のモジュール「Sortable」の解説です。

1. Sortable モジュールの入手

Sortable を利用するためには、通常の jQuery ソースコード以外に、jQuery UI のモジュールをいくつか読み込む必要があります。

jQuery UI - Configure your download から jQuery UI モジュールをダウンロードしましょう。

上記サイトには、Sortable 以外にも沢山のモジュールが用意されていますが、とりあえず Sortable の機能を利用したいだけの場合は、以下の四つのモジュールを選択すればOKです。

  • Core
  • Widget
  • Mouse
  • Sortable

2. script要素で各種モジュールを読み込む

ダウンロードしたら、各種モジュールを script要素で指定して読み込みます。

この際注意するべきことは、

  • 各種モジュールは jquery.js よりも後に指定する
  • 各種モジュールの jsファイルは順番通りに指定する
  • その他の外部 jsファイルがある場合は、各種モジュールより後に指定する

といったあたりでしょうか。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.sortable.js"></script>

3. ソースのコーディングとリストの id指定

まず、ソートしたいリストに id をつけます。

<ul id="sort_list">
  <li>火吹山の魔法使い</li>
  <li>バルサスの要塞</li>
  <li>運命の森</li>
  <li>さまよえる宇宙船</li>
  <li>盗賊都市</li>
  <li>死のワナの地下迷宮</li>
</ul>

今回は「sort_list」という id をつけました。

続いて、jQuery のコードを書きます。

$(function() {
	$("#sort_list").sortable({items:"li"});
});

これだけてOKです。

これで、「sort_list」内の li要素をドラッグ&ドロップでソートできるようになりました。

関連するブログ記事
カテゴリー
jQuery
タグ
JavaScript | jQuery | jQuery UI | li要素 | ol要素 | script要素 | Sortable | ul要素 | xhtml

コメント(4) | トラックバック(1)

 

jQuery で POSTメソッドによる非同期通信を行なう方法

jQuery で Ajax ですよ非同期通信ですよ!

というわけで、jQuery を使って POSTメソッドで別の CGIスクリプトにデータを送り、返った結果をページ内に出力を行なう、という処理の方法の解説です。

jQuery で POSTメソッドによる非同期通信は、「post( 通信先URL, 送信するデータ, 返った結果の処理, 送信データ形式) 」という形で指定します。

例えば、「./test.cgi」に対して「mode=test」「name=tatsuya」というデータを送信し、test.cgi が返した結果を「div id="test"」の中に出力したい場合は、以下のようになります。

$.post(
	// 通信先URL
	"./test.cgi",
	// 送信するデータ
	{
		mode:"test",
		name:"tatsuya"
	},
	// 返った結果の処理
	function(data){
		$("#test").html(data);
	}
);

第二引数以降は省略可能なので、第四引数は省略しています。

なお、GETメソッドで通信したい場合は、同様に「get(通信先URL, 送信するデータ, 返った結果の処理, 送信データ形式)」で非同期通信を行なえます。

関連するブログ記事
カテゴリー
jQuery
タグ
Ajax | JavaScript | jQuery | xhtml

コメント(549) | トラックバック(0)

 

jQuery で hover() を使ってマウスホバーにあわせてスタイルを変更する方法

jQuery の hover() を使って、マウスホバーにあわせてスタイルを変更することができます。

hover(マウスが乗っているときの処理,マウスが外れたときの処理);

という形式で指定するので、例えば「list」というクラスを指定した要素に対して、マウスが乗っているときだけ「list_hover」というクラスを適用したい場合は、以下のようになります。

$(".list").hover(
	function () {
		$(this).addClass("list_hover");
	},
	function () {
		$(this).removeClass("list_hover");
	}
);

「マウスが乗っているときの処理」で「addClass」=文字通り、クラス「list_hover」を追加しています。
「マウスが外れたときの処理」で「removeClass」=文字通り、クラス「list_hover」を削除しています。

関連するブログ記事
カテゴリー
jQuery
タグ
CSS | hover | JavaScript | jQuery

コメント(9) | トラックバック(0)

 

jQuery の入門というか初歩というかそういう話

簡単に Ajax 的なこととかができちゃう楽チンライブラリ jQuery の入門的解説です。

今回はHello World レベルの話まで。

1. jQuery のダウンロード

とりあえず、jQuery のソースコードをダウンロードしましょう。

jQuery: The Write Less, Do More, JavaScript Library からダウンロード可能です。

ソースコードは「jquery-*.*.*.min.js」みたいなファイル名になってるかと思いますが、「jquery.js」とかに変えておいたほうがあとでバージョンアップする際とかにも便利な気がします。

2. html から jQuery を読み込む

ソースコードを入手したら、jQuery を利用する html ファイルに、script要素で jQuery を読み込みます。

<script type="text/javascript" src="jquery.js"></script>

3. html の内容を書き換えるスクリプト

まずは、ボタンクリックで html の内容を書き換えるようなスクリプトで Hello World してみましょう。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript;charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>jQuery で Hello World</title>
</head>
<body>
<h1>jQuery で Hello World</h1>
<p>ここの内容を変更します。</p>

<form method="GET" action="#">
  <input type="button" onclick="helloworld();" value="Hello World" />
</form>

</body>
</html>

上記のような html がある場合、p要素の内容を変更するスクリプトを書けばよいわけです。

その場合、function helloworld() の内容は、

function helloworld(){
	$("p").html("Hello World!");
}

となります。

「$(" ")」の中に、アクセスしたい要素を指定すれば良いわけです。
「.html(" ")」は、JavaScript の innerHTML みたいなもんですね。
操作するのがテキストのみなら、innerTEXT 相当の「.text(" ")」を使っても良いと思います。

ただしこのやり方だと、html 内に複数の p 要素がある場合、全ての p要素が書き換えられてしまいます。

そこで、要素名ではなく、class属性や id属性を指定する方法があります。

例えば、

<p class="hello">class指定されたp要素です。</p>

<p id="world">id指定されたp要素です。</p>

のような感じで、class属性や id属性が指定されている場合、それぞれの内容を変更するスクリプトは、

// class="hello" の内容を変更
$(".hello").html("Hello World!");

// id="world" の内容を変更
$("#world").html("Hello World!");

という感じで指定できます。

class や id の指定が、スタイルシート(CSS)と同じなので、覚えやすくて良いですね。

関連するブログ記事
カテゴリー
jQuery
タグ
Ajax | JavaScript | jQuery | script要素 | xhtml

コメント(25) | トラックバック(0)

 

このブログについて

阿部辰也

Webコンサルタントやシステムエンジニア、執筆業などをやっている、グッドホープ代表・阿部辰也のブログです。
Web技術系のTipsから仕事の話、趣味の話まで色々と。
人生は所詮生まれてから死ぬまでの壮大な暇つぶし。
だったら有意義に暇をつぶして生きましょー。

阿部辰也へのお仕事のご依頼・問合せはこちらからどうぞ。

Twitter: @t_abe
読書メーター: ID:Tatsuya

このブログのサイトマップ
このブログのはてなブックマーク数

Feed/RSS購読

タグクラウド

最近のトラックバック

阿部辰也の著書

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

頑張って書いたのに、出版後すぐに出版社が倒産して印税も貰えずじまいで俺涙目(笑)。

Powered by Movable Type 5.02

スポンサード リンク

はてなブックマーク



あわせて読みたい

t-abeの今読んでる本

t-abeの最近読んだ本

t-abeの今やってるゲーム

t-abeの最近やったゲーム