プログラミングめも

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.4");
</script>

以下の2行は同じ意味。

document.getElementById('id').innerHTML = "html";
$('#id').html( "html" );

動作しない場合は設定内容が1つでも{}で囲む。また、cssのパラメータも""で囲った方が無難。

$('#id').css({"color":"red"});

<input type="button" id="123_id" onclick="test('123')" value="ボタン1">
<input type="button" id="456_id" onclick="test('456')" value="ボタン2">

<script type="text/javascript">
function atest(id){
  var tmp = $('#' + id +  '_id').val();
  alert(tmp);
}
</script>

<select name="select01">
 <option value="100">
</select>

if ($('select[@name=select01] option:selected').val() == '') {
    alert('選択してください');
}

<input type="radio" name="radio01">ラジオ

if ($('input:radio[@name=radio01]:checked').val() == null) {
    alert('選択してください');
}

同一ページで複数ラジオグループがあると、最初のグループの値しか取れない。@を抜くと対処できる。

$('radio[name=radio01]:checked').val();
$('radio[name=radio02]:checked').val();
$('radio[name=radio03]:checked').val();

radioではなくinput:raidoの方が無難っぽい。

<input type="checkbox" id="checkbox_all" onclick="$('input[type=checkbox][name=visible_toggle]').attr('checked', $('#checkbox_all').attr('checked'));" />
<input type="checkbox" name="visible_toggle" value="1">
<input type="checkbox" name="visible_toggle" value="2">
<input type="checkbox" name="visible_toggle" value="3">
:
:

<select id="selectbox_id">
<option>aa</option>
<option>bb</option>
<option>cc</option>
</select>
<input type="button" value="1つ上へ" onclick="up()">
<input type="button" value="1つ下へ" onclick="down()">

<script>
function up() {
    var selectedOptions = $('#selectbox').children('option:selected');
    var prev = $(selectedOptions).first().prev();
    $(selectedOptions).insertBefore(prev);
}

function down() {
    var selectedOptions = $('#selectbox').children('option:selected');
    var next = $(selectedOptions).last().next();
    $(selectedOptions).insertAfter(next);
}
</script>

<script>
function deleteImage(id){
  $.ajax({
    url      : '/api/delete_image/' + ?id=' + id,
    type     : 'GET',
    dataType : 'text',
    success :function(text) {
      $('#image_block').html('<p>画像登録なし</p>');
    }
  });
}
</script>

<input type="button" id="toggle_button" value="+">
<div id="one">ボタンクリックで開きます</div>
<div id="two" style="display:none">ボタンクリックで閉じます</div>
<script>
$("#toggle_button").click(function () {
  $("#one").toggle(); 
  $("#two").toggle();
});
</script>

リンクでトグルするとき。javascript:void(0);は書いた方がいい。

<a href="javascript:void(0)"; onclick="tog()">開く</a>

readyを使う。

<script type="text/javascript">
$(document).ready( function() {
    $('#after').html( '<p>ロード完了</p>' );
});
</script>
<span id="after"></span>