2011-12-06

jsのコードにでてくる return false; ってなんだ

return false;はa要素にclickイベントを設定する際に必要な記述で、
return false;がないとclickイベントを実行した後にリンク先に移動してしまう
それを防ぐ為の記述らしい

return false;をclickイベントの最後に記述すれば、イベントハンドラ自体がfalseを返すことで、
本来イベントが行う処理をキャンセルすることができる

例えば

$(functin(){
      $("a").click(function(){
        $("img").attr("src","cat.jpg").attr("alt","にゃー");
        return false;
     )}
)}

<a href="cat.jpg">画像を変更</a>
<p><img src="dog.jpg" alt="わん"></p>

この場合、a要素がクリックされた際にはjQueryの命令だけが実行され、href属性に設定されたリンク先"cat.jpg"には移動しない

もうひとつ、a要素のhref属性に設定されたリンク先に移動させないようにする方法がある
a要素のhref属性にjavascript:void(0)と設定し、a要素の機能を無効化するもの

<a href="javascript:void(0)">画像を変更</a>
<p><img src="dog.jpg" alt="わん"></p>

この方法は、ユーザーがJavaScriptをオフにしているとリンクをクリックしても変化が起きないのであまりよい方法ではない

return false;を追加したものはa要素のリンクが有効になるので、jQueryで命令した内容にちかいURLをhref要素に設定しておけばユーザは最低限の情報をつかめる

2011-11-26

jQuery アニメーションとキュー

ひとつの要素に対して複数のアニメーションを指定すると、始めに登録したものからひとつずつ順番に実行される
（一つ目のアニメーションが終わったら次のアニメーションが実行され、そのアニメーションが終わったらその次の・・・）

複数の命令を順番に処理する仕組みをキュー（待ち行列）という
完了したアニメーションはキューから削除され、次のアニメーションが実行される
複数のアニメーションが同時に実行されることはなく、先頭から順番に実行されていく
コンビニのレジで精算を待つために並んでいるひとのようなものだそう

キューは何かの処理を待たせる際によく使われる構造で、たとえば共有プリンタの印刷待ち、
CPUの計算待ちなどがキュー構造で処理されている

このように、「最初に入ったものが最初に出てくる」というデータの入出力方式は
"First In First Out"を略して"FIFO"と呼ばれる

2011-11-16

正規表現についてすこしだけ

正規表現とは、JavaScript等さまざまなプログラミング言語やテキストエディタなどで利用可能な、汎用的な文字列検索・置換のしくみ

正規表現を使う場合は内容を//で囲む
//に囲まれた内容にマッチした文字列を検索・置換できる

例）

/\d/

数値

/\d{5}/

数値が5つならんだもの

/^\/\/hoge\.com/

//hoge.comではじまる文字列
^(ハット)：次に続く内容ではじまる文字列
\(エスケープ)：特別な意味のある記号をただの文字列にする

/\/\/hoge\.com$/

//hoge.comで終わる文字列
＄：前にある内容で終わる文字列

2011-11-14

jQuery機能 2011.11.14までに学んだもの

ページを最後まで読み込んだらダイアログを表示

$(function(){
　alert('ページ読み込み完了'); 
});

id="hoge"な要素を表示

$('#hoge').show();

クラスhogeが指定された要素を表示

$('.hoge').show();

すべてのdiv要素を表示

$('div').show();

id="hoge"な要素のなかにあるすべてのdiv要素を表示

$('#hoge div').show();

id="div1"な要素を取得。作ったjQueryオブジェクトを変数div1に保存

var div1 = $('#div1');

div1のなかにあるクラスhogeが指定された要素を表示

div1.find('.hoge').show();

id="hoge"な要素のスタイル、font-sizeを20pxに変更

$('#hoge').css('font-size','20px');

id="hoge"な要素のスタイル、font-sizeの値を変数sizeに保存

var size = $('#hoge').css('font-size');

id="hoge"な要素を表示させる

$('#hoge').show();

id="hoge"な要素を非表示にする

$('#hoge').hide();

id="hoge"な要素の幅を600pxにする

$('#hoge').width(600);

id="hoge"な要素の高さを400pxにする

$('#hoge').height(400);

id="hoge"な要素をフェードイン

$('#hoge').fadeIn();

id="hoge"な要素をフェードアウト

$('#hoge').fadeOut();

id="hoge"な要素を1秒でフェードイン

$('#hoge').fadeIn(1000);

id="hoge"な要素を1秒でフェードイン後ダイアログを表示

$('#hoge').fadeIn(1000, function(){
  alert('フェードイン完了');
});

id="hoge"な要素をスライドダウン

$('#hoge').slideDown();

id="hoge"なinput要素の入力値を「jQuery」に変更
テキストフィールドやドロップダウンメニュー等のvalue属性を取得・操作するには、val()を使用する
引数無しで呼ぶと、テキストフィールド等の中身が取得でき、引数有りで呼ぶと中身をその値に変えることができる

$('input#hoge').val('jQuery');

id="hoge"な要素の内容を変数textに保存

var text = $('#hoge').text();

id="hoge"な要素の内容を「<p>jQuery</p>」に変更

$('#hoge').html('<p>jQuery</p>');

id="hoge"な要素の内容を変数htmlに保存

var html = $('#hoge').html();

id="hoge"な要素の内容を空にする

$('#hoge').empty();

id="hoge"なa要素のtarget属性値に_blankを指定

$('a#hoge').attr('target','_blank');

id="hoge"な要素のtarget属性値を変数targetに保存

var target = $('a#hoge').attr('target');

id="hoge"なinput要素の入力値を「jQuery」に変更

$('input#hoge').val('jQuery');

id="hoge"なinput要素に入力されている値を変数valueに保存

var value = $('input#hoge').val();

id="hoge"な要素のクラスにfugaを追加

$('#hoge').addClass('fuga');

id="hoge"な要素のクラスからfugaを削除

$('#hoge').removeClass('fuga');

id="fuga"な要素をid="hoge"な要素のなかに移動

$('#hoge').append($('#fuga')); 
$('#fuga').appendTo($('#hoge'));

id="hoge"な要素を削除

$('#hoge').remove();

id="hoge"な要素がクリックされたらダイアログを表示

$('#hoge').click(function(){
  alert('クリックされた');
});

id="hoge"な要素をスライドアップ

$('#hoge').slideUp();

id="hoge"な要素をtop:200px,left:400pxへアニメーション

$('#hoge').animate({
  top: 200,
  left: 400
});

id="hoge"な要素をtop:200px,left:400pxへ1秒でアニメーション後ダイアログを表示

$('#hoge').animate({
　top: 200,
　left: 400 
},1000,function(){
　alert('アニメーション完了');
});

id="hoge"な要素の内容を「jQuery」に変更

$('#hoge').text('jQuery');

id="hoge"な要素の上にマウスがのったらダイアログを表示

$('#hoge').mouseenter(function(){
  alert('マウスがのった'); 
});

id="hoge"な要素の上からマウスが外れたらダイアログを表示

$('#hoge').mouseleave(function(){
  alert('マウスが外れた'); 
});

マウスがのった、外れたを2ついっぺんに

$('#hoge').hover(function(){ 
  alert('マウスがのった');
},function(){ 
  alert('マウスが外れた');
});

id="hoge"なinput要素にフォーカスが当たったらダイアログを表示

$('input#hoge').focus(function(){
  alert('フォーカスが当たった'); 
});

id="hoge"なinput要素からフォーカスが外れたらダイアログを表示

$('input#hoge').blur(function(){
  alert('フォーカスが外れた'); 
});

クラスhogeが指定された要素がクリックされたら中身のテキストを変更

$('.hoge').click(function(){
  $(this).text('クリックされた');
});

クラスhogeが指定された要素それぞれにつき、中身のテキストをダイアログ表示

$('.hoge').each(function(){
  var text = $(this).text();
  alert(text); 
});

2011-11-11

jQuery .ready()メソッドを使う際の形式について

.ready() メソッドとは

$(document).ready(function(){
  // 実行する命令
});

これを略したもの

$(function(){
  // 実行する命令
});

この中にjQueryコードを書いていくと、ドキュメントを最後まで読み込んだ後に実行されるというもの

でも

Prototype.js等も同じように$を使っていて、jQueryと同時に使うと $ の衝突が起こってしまうので
より安全に .ready() の中だけで $ をjQueryのエイリアスとして使う場合は

jQuery(function($){
  // 実行する命令
});

こうすれば、この中では $ はjQueryとして扱われる

2011-11-11

jQueryの特徴 (1)

DOMの操作を簡単、シンプルに行える

DOMの場合

document.getElementByID('id名')

jQueryの場合

$('#id名')

2011-11-10

jQueryのプラグインを使用する方法

実行したいjQueryプラグイン hoge があるとして

HTMLに、必要なjsファイルを読み込む

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>huge</title>
<script src="scripts/jquery.js"></script>
<script src="scripts/hoge.js"></script>
<script>
// ここにどうしたいかを書く (1)
</script>

(1)の箇所にどの要素をどう処理するかの命令をする

jQuery(function($) {
    // ここにjQueryの処理を記述
});

完了

jQuery(function($) {});

これはドキュメントを最後まで読み込んだ後にjQueryを実行するための指示
DOMContentLoadedのタイミングで実行され、window.loadとはちがうらしい

akane_memo

これからがんばるための勉強メモ、じぶん用