2014/02/22 (更新日: 2016/08/13)

よく使うけど忘れがちな『JavaScript、jQueryのコード』まとめ

追記：コードがよくまとまっている記事をみつけたので、共有。
» jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com

よく使うJavaScriptのコード集です。
コピペですぐに利用できるようにまとめます。
たまにコードを追加していきます( ◜◡‾)b

pタグ内の要素を取得

$("p").text("");

HTMLを挿入

$("p").html('<a href="google.com">click me!</a>');

input内からvalueを取得

$("input").val();

input内にvalueを挿入

$("input").val("hello");

マウスオーバーでCSS変更

$(function(){
    $('#typo') .on('mouseover', function(){
        $('#typo') .css('color','blue');
    });
});

マウスオーバー＆マウスアウトでCSS変更


$("#typo").mouseover(function(){
	$('#typo').css('display','block');
}).mouseout(function(){
	$('#typo').css('display','none');
});

class=”hogeCLASS”からidを取得し、dataに挿入

data=$('.hogeCLASS').attr('id')

class=”hogeCLASS”からidを取得できているかをAlertで確認 ※バグチェックに有効

alert($('.hogeCLASS').attr('id'));

フォームの値を取得する方法

$(document).ready(function(){
    $("#btn").click(function () {　
        str = $("#hoge").val();　　　 // フォームの値を取得してstrに挿入
        alert(str);
    });
});

特定のタグ内の情報を変更方法

ラジオボタンをクリックすると、フォームのアクション先が切り替わります。

■HTML

<form action="thanks.php" method="post" enctype="multipart/form-data">
	<input type="radio" id="thnaks1" value="thanks1">Thanks1
	<input type="radio" id="thnaks2" value="thanks2">Thanks2
</form>

■jQuery

$(function(){
     $('#thanks1').click(function() {
        $("form").attr("action","thanks.php");
      });

     $('#thanks2').click(function() {
        $("form").attr("action","thanks2.php");
        });
});

submitする方法

$(document).ready(function() {
    $('#btn').click(function() {
        $('#form1').submit();
    });
});

selectboxにoption要素の追加・削除をする方法

 //追加するとき
$('#select').append($('

選択されたoption項目から値を取得する

<div class="input">
    <select name="hogeNAME" id="hogeID">
        <option value="">-- 選択してください --</option>
        <option value="1" id="hogeID1">パターン1</option>
        <option value="2" id="hogeID2">パターン2</option>
        <option value="3" id="hogeID3">パターン3</option>
    </select>
</div>
<script type="text/javascript">
    var Answer = null;
    if ($('#hogeID1').val() != undefined) Answer = 1;
    else if ($('#hogeID2').val() != undefined) Answer = 2;
    else if ($('#hogeID3').val() != undefined) Answer = 3;
    $('#hogeID').val(Answer); //hogeIDのvalueにAnswerの値を入力
    }
</script>

jQueryで複数のイベントをまとめて設定する方法

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#a, #b, #c, #d, #e').click(function() {
        alert('test'); 
        });
    });
</script>
<body>
    <button id="a" value="">a</button>
    <button id="b" value="">b</button>
    <button id="c" value="">c</button>
    <button id="d" value="">d</button>
    <button id="e" value="">e</button>
</body>

特定の日付と曜日を取得する方法

function SpecificDay() {
var i = 3; //(例)：3日後
var date = new Date();
date.setTime(date.getTime() + (i * 24 * 3600 * 1000));
var y = date.getYear();
var m = date.getMonth() + 1;
var d = date.getDate();
if (y < 2000) {
    y += 1900;
}
wday = new Array("日", "月", "火", "水", "木", "金", "土");
document.write(y + "年" + m + "月" + d + "日");
document.write(wday[date.getDay()]);
}
//特定の日付と曜日を表示したい部分に以下を挿入
特定の日付は：<script type="text/javascript">SpecificDay();</script>

jQueryUIの基本的な使い方

まずは、以下のScriptを読み込む。※jQueryのあとで

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

jQueryUIを使ったボタンのスタイリング方法

<button id="hogebutton">ぼたん</button>
$('hogebutton').button();

jQueryUIを使った『オプションメニュー』のスタイリング方法

<select name="options[1]" id="select_1">
<option value="option[1]">選択肢1</option>
<option value="option[2]">選択肢2</option>
<option value="option[3]">選択肢3</option>
$("#select_1").menu();

JavaScript