jQueryメモ

カテゴリー: jQuery

jQueryをダウンロードする

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

あるいはscriptのsrcの指定で下記のURLを指定する

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

FireBugのコンソールに出力する
console.log();

value値を取得する
.val()

text値を取得する
.text()

プルダウンを追加する
.append()

プルダウンを変更すると実行する
.change(function(){}

クリックする度に実行する
.click(function(){}

ざっくりとサンプルを書いてみる

test.html

<html>
<head>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
jQueryテスト
<br />
<select name="hoge" id="hoge">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<br />
<input type="radio" name="piyo" id="piyo" value="a">aaaaa

</body>
</html>



test.js

$(function(){
// プルダウンに追加
$('#hoge').append('<option value="4">d</option>');

//FireBugでコンソールを表示するとログが出力される
// 一番最初のvalueのみ表示される
console.log($('#hoge').val());
// 全てのtext(a b c d)が表示される
console.log($('#hoge').text());

// 選択している値を変更する度に実行される
$('#hoge').change(function(){
//変更した値のvalueを表示する
console.log($(this).val());
});

// クリックする度に実行される
$('#piyo').click(function(){
//変更した値のvalueを表示する
console.log($(this).val());
});

});


スポンサーサイト



2012/04/26(木) 23:14 | trackback(0) | comment(0)