WebデザイナーのためのjQuery入門 魅力的なユーザーインターフェースを手軽に作る

IDIA.JP > 参考文献 > WebデザイナーのためのjQuery入門 魅力的なユーザーインターフェースを手軽に作る
WebデザイナーのためのjQuery入門 魅力的なユーザーインターフェースを手軽に作る

データ

書名
WebデザイナーのためのjQuery入門 魅力的なユーザーインターフェースを手軽に作る
著者
高津戸壮
出版社
技術評論社
発行日
2011年12月

概要

HTML、CSSの基本をマスターしていることを前提に、jQueryをわかり易く解説。対象読者を絞込み、知識や技術の範囲も制限を設けることで、よみやすく、学びやすい入門書となっている。

抜粋

ページの読み込みが完了したらダイアログを表示
$(function(){
alert('ページの読み込み完了');
});
id=”foo”な要素を表示
$('#foo').show();
クラスfooが指定された要素を表示
$('.foo').show();
すべてのdiv要素を表示
$('div').show();
id=”foo”な要素のなかにあるすべてのdiv要素を表示
$('#foo div').show();
id=”div1″な要素を取得。作ったjQueryオブジェクトを変数div1に保存
var div1 = $('#div1');
div1のなかにあるクラスfooが指定された要素を表示
div1.find('.foo').show();
id=”foo”な要素のスタイル、font-sizeを20pxに変更
$('#foo').css('font-size'.'20px');
id=”foo”な要素のスタイル、font-sizeの値を変数sizeに保存
var size = $('#foo').css('font-size');
id=”foo”な要素を表示させる
$('#foo').show();
id=”foo”な要素を非表示にする
$('#foo').hide();
id=”foo”な要素の幅を400pxにする
$('#foo').width(400);
id=”foo”な要素の高さを400pxにする
$('#foo').hight(400);
id=”foo”な要素をフェードイン
$('#foo').fadeIn();
id=”foo”な要素をフェードアウト
$('#foo').fadeOut();
id=”foo”な要素を1秒でフェードイン
$('#foo').fadeIn(1000);
id=”foo”な要素を1秒でフェードイン後ダイアログを表示
$('#foo').fadeIn(1000, function(){
alert('フェードイン完了');
});
id=”foo”な要素をスライドダウン
$('#foo').slideDown();
id=”foo”な要素をスライドアップ
$('#foo').slideUp();
id=”foo”な要素をtop:200px;,left:400px;へアニメーション
$('#foo').animate({
top: 200,
left: 400
});
id=”foo”な要素をtop:200px;,left:400px;へ1秒でアニメーション後ダイアログ表示
$('#foo').animate({
top: 200,
left: 400
},1000,function(){
alert('アニメーション完了');
});
id=”foo”な要素の内容を「jQuery本」に変更
$('#foo').text('jQuery本');
id=”foo”な要素の内容をtextに保存
var text = $('#foo').text();
id=”foo”な要素の内容をhtmlに保存
var html = $('#foo').html();
id=”foo”な要素の内容を空に
$('#foo').empty();
id=”foo”なa要素のtarget属性値に_blunkを指定
$('a#foo').attr('target','_blank');
id=”foo”なa要素のtarget属性値を変数targetに保存
var target = $('a#foo').attr('target');
id=”foo”なinput要素の入力値を「jQuery本」に変更
$('input#foo').val('jQuery本');
id=”foo”なinput要素に入力されている値を変数valueに保存
var value = $('input#foo').val();
id=”foo”な要素のクラスにbarを追加
$('#foo').addClass('bar');
id=”foo”な要素のクラスからbarを削除
$('#foo').removeClass('bar');
id=”bar”な要素をid=”foo”な要素の中に移動
$('#foo').append($('#bar'));
$('#bar').appendTo($('#foo'));
span要素を作ってid=”foo”な要素の中に追加
$('新要素').appendTo($('#foo'));
id=”foo”な要素を削除
$('#foo').remove();
id=”foo”な要素がクリックされたらダイアログを表示
$('#foo').click({
alert('クリックされた');
});
id=”foo”な要素の上にマウスがのったらダイアログを表示
$('#foo').mouseenter({
alert('マウスがのった');
});
id=”foo”な要素の上からマウスがおりたらダイアログを表示
$('#foo').mouseleave({
alert('マウスがおりた');
});
上記2つを一度に
$('#foo').hover(function(){
alert('マウスがのった');
}'function(){
alert('マウスがおりた');
});
id=”foo”なinput要素にフォーカスがあたったらダイアログを表示
$('input#foo').focus(function{
alert('フォーカスがあたった');
});
id=”foo”なinput要素からフォーカスが外れたらダイアログを表示
$('input#foo').blur(function{
alert('フォーカスが外れた');
});
クラスfooが指定された要素がクリックされたら中身のテキストを変更
$('#foo').click(function(){
$(this).text('クリックされた');
});
クラスfooが指定された要素それぞれにつき、中身のテキストをダイアログ表示
$('#foo').click(function(){
var text = $(this).text();
alert(text);
});

参考

amazonでみる

WebデザイナーのためのjQuery入門 魅力的なユーザーインターフェースを手軽に作る

記事のデータ

文責IDIA.JP
公開日2013年1月7日
カテゴリー
タグ
関連する記事

記事を共有する