『web制作現場ですぐ役立つ jQuery実践講座』の講師をします【8/4・11(土) 神戸・カフーツ】
2012年7月30日 15:57
企業サイトの構築なんかでニーズの多いjQueryの使用法を、実際にコードを書いて、学んでいただく実践的なjQuery講座を全二回で開催しますよ！
ぜひぜひお気軽にご参加くださいねー！
つぶやく『WebデザイナーのためのjQuery入門講座』の講師をします【3/10(土) 神戸・カフーツ】
2012年3月 5日 18:47
非プログラマなWeb屋のみなさん！
プログラマじゃなくてもちょこっとJavaScriptやjQuery知ってると色々と便利だし、プログラマな人に仕事を頼む時も話がしやすくなりますよ！！
というわけで、いつも大変お世話になっている神戸のコワーキング・スペース カフーツさんの主催で『WebデザイナーのためのjQuery入門講座』の講師をさせて頂くことになりました。
JavaScript/jQueryの基本から、ある程度実用的なサンプル紹介まで、これからjQueryもかじろうかな、という人向けの内容となっております。
ぜひぜひお気軽にご参加くださいねー！
『WebデザイナーのためのjQuery入門講座』の詳細・お申込みはこちら
jQuery でフォームの値を取得・変更する方法
2012年1月27日 16:36
input要素等の値を取得する
jQuery を利用してフォームの値を取得するには、
// 変数 Fvalue にフォームの値を代入
var Fvalue = $("#id").val();
とやればOKです。
JavaScript でやろうとするとループを回したりして色々めんどくさい select要素によるドロップダウンの値も、val() だけで取得できるので非常に楽ちんです。
input要素に値をセットする
逆に、フォームの input要素に値をセットする（変更する）には、
// #id の値を「1」に変更
$("#id").val(1);
とやればOKです。
jQuery で iframe 内のウィンドウから親ウィンドウの要素を操作する方法
2012年1月26日 16:26
本日も jQuery の小ネタメモ。
いわゆるLightbox風のインターフェイスが流行している影響で、インラインフレーム（に見えないUIだけど）内のウィンドウから、呼び出し元である親ウィンドウの要素を操作する、という処理は多用する機会が増えたなあ、という印象がありますね。
親ウィンドウの要素を操作する時は、
parent.$("#id").addClass('ClassName');
とか、
parent.$("p").html('カラオケ行きたい。');
とか、まあ普通の JavaScript と同じように parent で親ウィンドウを指定すればOKです。
jQuery で指定した要素のスタイルを変更する方法
2012年1月25日 20:38
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
jQuery で非同期通信中にローディング画像を表示する方法
2010年8月10日 23:03
超小ネタですが。
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 UI の Sortable モジュールでリストをドラッグしてソート可能にする方法
2010年7月27日 15:47
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 で POSTメソッドによる非同期通信を行なう方法
2010年7月26日 17:28
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 で hover() を使ってマウスホバーにあわせてスタイルを変更する方法
2010年7月23日 15:50
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 の入門というか初歩というかそういう話
2010年7月22日 16:48
簡単に 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)と同じなので、覚えやすくて良いですね。
