alert( $('#hoge').prop('type') );
if ( $("[name='yoyaku']").prop("tagName") == 'SELECT' ){
//処理
}
前方一致
$("[name^='yoyaku']")
yoyaku_01 , yoyaku_02 などにマッチします。
後方一致
$("[name$='_01']")
name="data_01" や name="hoge_01" などにマッチします。
部分一致
$("[name*='at']")
name="created_at" や name="atmark" などにマッチします。
<input type="text" name="hoge" id="hoge" value="999" >
// jQuery
var v = $('#hoge').val();
// JavaScriptのみ
var v = document.getElementById('hoge').value;
// jQuery
$('#hoge').val('test_string');
var v = $('#hoge').val();
var select_obj = $("[name='school_id']");
var selected_option_text = select_obj.children(':selected').text();
currency_unit 設定した値を持つドロップダウンリストを選択状態にします
$('.hoge').val(currency_unit);
var data = $("input:radio[name='my_radio']:checked").val();
$( "[name='my_radio']" ).prop('checked', false);
// ↑ これで動かない場合は attr を使用する
$( "[name='my_radio']" ).attr('checked', false);
<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">あいうえお
var v = $('#cb1_id:checked').val(); // IDでアクセスする場合
var v = $("input[name='cb1']:checked").val(); // nameでアクセスする場合
alert(v);
true ,false が帰ってきます。
var flag = $("[name=checkbox1]").prop("checked");
<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">
// name が「cb1」 valueが「あいうえお」のチェックボックスにチェックを付ける
$('input[type="checkbox"][name="cb1"][value="あいうえお"]').prop("checked",true);
// 全てのチェックボックのチェックを外す
$("input:checbox").attr('checked', false);
id="all_check_on”な要素をクリックするとname = ”user_id[]" のチェックボックス全てにチェックをつける(または解除)します
html
<label><input type="checkbox" id="all_check_on">全て選択する</label>
<input type="checkbox" name="user_id[]" value="1">
<input type="checkbox" name="user_id[]" value="2">
<input type="checkbox" name="user_id[]" value="3">
js
$("#all_check_on").click(function() {
if ($(this).prop("checked")) {
$('[name="user_id[]"]').prop("checked", true);
} else {
$('[name="user_id[]"]').prop("checked", false);
}
});
name = ”user_id[]" のチェックされている全てのチェックボックスの値をURLに渡せる形式で取得します。 js
param = $('[name="user_id[]"]:checked').map(function(){
return this.name + '=' + $(this).val();
}).get().join('&');
console.log( param );
表示結果
user_id[]=1&user_id[]=2
<form id="FM"></form>
$('#FM').submit();
$('#input_button').prop('disabled', true); // 押せない
$('#input_button').prop('disabled', false); // 押せる
$('.my_list').prop('disabled', true); // 押せない
$('.my_list').prop('disabled', false); // 押せる
$(":input") // 全てのフォーム要素
$(":button") // 全てのボタン要素
$(":text") // テキストボックス
$(":password") // パスワード入力ボックス
$(":radio") // ラジオボタン
$(":checkbox") // チェックボックス
$(":file") // ファイル選択ボックス
$(":submit") // 送信ボタン
$(":image") // 画像ボタン
$(":reset") // リセットボタン
$(":input").each(function(index, el) {
console.log(el.name);
});
<script type="text/javascript">
$(document).ready(function() {
$("[name='mt_payment_id']").change(function() {
console.log( '変更されました' );
});
});
</script>
イベント名 | 説明 |
---|---|
click | 指定要素上で左クリック時に発火 |
dblclick | 指定要素上でダブルクリック時に発火(clickも発火) |
contextmenu | 指定要素上でマウス右ボタンを押した時に発火 |
mousedown | 指定要素上で左or右ボタンを押した時に発火 |
mouseup | 指定要素上で左or右ボタンを離した時に発火 |
mousemove | 指定要素上でマウスカーソルが動いた時に発火 |
mouseover / mouseenter | 指定要素上にマウスカーソルが入った時に発火 |
mouseout / mouseleave | 指定要素上からマウスカーソルが離れた時に発火 |
keydown / keypress | キーを押した瞬間に発火 |
keyup | キーを離した瞬間に発火 |
イベント名 | 説明 |
---|---|
focus / focusin | 要素にフォーカスが当たった時に発火 |
blur / focusout | 要素からフォーカスが外れた時に発火 |
change | 要素の内容が変更された時に発火(1行テキストや複数行テキストの場合変更がありかつフォーカスが外れた瞬間) |
select | inputやtextareaのテキストを選択した時に発火 |
submit | フォームが送信された時に発火 |
イベント名 | 説明 |
---|---|
scroll | 画面がスクロールした時に発火 |
resize | ウィンドウのサイズが変更された時に発火 |
ready | HTMLが読み込まれた時に発火 |
unload | 別のページに遷移する時に発火 |
load | データの読み込みが完了した時に発火 |
error | データの読み込みに失敗した時に発火 |
コンパクトなサイズで設置簡単な(alert・モーダル)ウィンドウ jquery プラグイン
https://github.com/claviska/jquery-alertable
http://www.jqueryscript.net/demo/Nice-Clean-jQuery-Alert-Confirm-Dialog-Plugin-alertable-js/
<script src="assets/js/jquery.alertable.min.js"></script>
<link href="assets/js/jquery.alertable.css" rel="stylesheet">
$.alertable.alert('Howdy!');
これだけです。とても簡単ですね。
<form action="test.php" name="MYNAME">
<input type="text" name="input1">
<textarea name="input2"></textarea>
</form>
$(function(){
var form_change_flg = false;
$(window).on('beforeunload', function() {
if (form_change_flg) {
return "入力画面を閉じようとしています。入力中の情報がありますがよろしいですか?";
}
});
//フォームの内容が変更されたらフラグを立てる
$('form[name=MYNAME] input[name=title1]').change(function() {
form_change_flg = true;
});
$('form[name=MYNAME] textarea[name=input2]').change(function() {
form_change_flg = true;
});
// フォーム送信時はアラートOFF
$('form[name=MYNAME]').submit(function(){
form_change_flg = false;
});
});
http://alphasis.info/2011/06/jquery-ui-resizable-textarea/
jQueryプラグインを作成するためのひな形はネットで調べるといくつかパターンが出てきますが、例えばこういうのはどうでしょうか。
;(function($){
$.fn.myPlugin = function(options) {
'use strict';
if (this.length === 0){
var error_css = 'background: #ff0000; color: #FFF; padding: 2px; line-height: 1.5;';
console.log('%cERROR( jquery.myPlugin.js ) :DOM Object not found', error_css);
return this;
}
// private variables
var priOne = '';
var priTwo = '';
// private methods
var foo = function() {
};
// public variables
this.pubOne = 0;
// public methods
this.initialize = function() {
return this.each(function(i, elem) {
// ...
});
};
return this.initialize();
};
})(jQuery);
有名なテンプレートとしては jquery boilerplate があります
https://github.com/rstacruz/jquery.transit#readme
jQueryを使いますが、アニメーション自体はCSS3アニメーションなのでスマホでも軽いです。 例:(フェードインの例)
<div id="test" style="border:1px solid red;">テストです</div>
$('#test').transition({ opacity: 0.0, scale: 0.5 }, 0);
$('#test').transition({
opacity : 1.0,
scale : 1.0 ,
duration: 5000,
complete: function() {
alert("CSS3 animation complete!");
}
});
設置が簡単なのでおすすめです。住所データも自動更新。
https://github.com/ninton/jquery.jpostal.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jpostal.js"></script>
$('#postcode1').jpostal({
postcode : [
'#postcode1', // 郵便番号 前3桁
'#postcode2' // 郵便番号 後4桁
],
address : {
'#address1' : '%3', // 都道府県
'#address2' : '%4', //住所1
'#address3' : '%5' // 住所2
}
});
です。とても簡単ですね。
HTMLは次のように準備します。
郵便番号 : <input type="text" name="postcode1" id="postcode1" > - <input type="text" name="postcode2" id="postcode2" >
都道府県 : <input type="text" name="address1" id="address1" >
住所1 : <input type="text" name="address2" id="address2" >
住所2 : <input type="text" name="address3" id="address3" >
「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力するには、
<button id="btn_post" type="button">郵便番号から住所を自動入力</button>
というボタンを設置して
$(document).ready(function() {
$('#btn_post').jpostal({
click : '#btn_post',
postcode : [
'#zip_code'
],
address : {
'#prefecture_name': '%3',
'#addr_name' : '%4%5'
}
});
});
という風に呼び出します。
moji.js を使用して次のようにします。
https://github.com/niwaringo/moji
<script src="./js/moji.js"></script>
<script type="text/javascript">
$("#zip_code").keyup(function(){
var str = $(this).val();
var han = moji(str).convert("ZEtoHE").toString();
$(this).val(han);
});
</script>
郵便番号から住所を自動入力するには住所データ自動更新してくれる ajaxzip3 も簡単便利です。
https://github.com/ajaxzip3/ajaxzip3.github.io
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
正規表現で郵便番号が7桁入力された時に検索を実行するようにします。 【name=zipcode】のテキストエリアに7桁の郵便番号を入力すると 【name=prefecture】のドロップダウンリスト 【name=address】の1行テキストに住所が反映されます。 ■ HTMLの1行テキストを下記のように修正
<input name="zipcode" type="text" />
↓
<input name="zipcode" type="text" onkeyup="check_zip(this);" />
■ HTMLの<head>タグ内に下記を追加(.js ファイルにして外に出してもok)
<script>
var postal_name = '';
function check_zip( _this ){
if ( postal_name != _this.value ){
AjaxZip3.zip2addr( '_this', 'prefecture', 'address' );
postal_name = _this.value;
}
}
</script>
これだけです。
デバッグ時には必ず出くわすのですが、jQueryオブジェクトやDOMオブジェクトの中身を見たい!という時があります。
console.log( object )
jq_obj = $("#test01");
console.group('jq_objの中身は↓');
console.log(Object.getPrototypeOf( jq_obj ));
console.log(jq_obj);
console.groupEnd();
とするとメッセージがグループ化されていい感じに見えます。
jQueryとprototype.js を同時に使いたい場面がまれにあります。
そのとき
$('id_name'); //prototype.js $('#id_name'); //jQuery
といった書式を jQuery, prototype.js 共に持っているのですが、その動作(書式や戻り値)が違います。
例えば戻り値の場合、
という違いがあります。
そこで jQueryとprototype.jsを同時に使いたい場合は jQueryの $(); を違う名前に変更して使います。
jQuery.noConflict(); var j$ = jQuery;
2行を追加します。
こうすることによって
// jQuery jQuery('#id_name'); j$('#id_name'); //prototype.js $('id_name');
として使用できます