よく使うけど忘れがちな『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();