JavaScriptの正規表現
1 |
/^yuu/ |
「yuu」を検出
1 |
/^yuu\d/ |
\d 数字を表す この場合は「yuu1」, 「yuu9」などを検出
1 |
/^\d{4}-?\d{3}$/ |
^ 行の先頭 …
public string[] 優技録 = { "Data Science", "Linux", "MS", "DB", "AWS", "Infrastructure", "C#", "PHP", "Python", "JavaScript"};
JavaScriptの正規表現
1 |
/^yuu/ |
「yuu」を検出
1 |
/^yuu\d/ |
\d 数字を表す この場合は「yuu1」, 「yuu9」などを検出
1 |
/^\d{4}-?\d{3}$/ |
^ 行の先頭 …
フォームに入力した時に通貨に自動で区切り文字を行う
1 2 3 |
1000000 ↓ 1,000,000 |
jQuery
1 2 3 |
function addCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } |
x.toString() 正規表現使うのでString型に変換しているよ!🐱
1 2 3 |
$("input:text[numberOnly]").on("keyup", function() { $(this).val(addCommas($(this).val().replace(/[^0-9]/g,""))); }); |
input ty …
値の取得 値を1つだけ取得する JS
1 |
var section_id = $('#select_section').val(); |
HTML(Laravel Brade)
1 2 3 4 5 |
<select class="form-control" id="select_section" name="section_id"> @foreach ($sections as $section) <option value="{{ $section->section_id }}">{{ $section->section_name }}</option> @endforeach </select> |
配列の値を取得 SELECTボックス 複数のSELECTボックスで選択されている同名クラスの値を取得する [crayon-600644 …
よく使うので雛形をメモしておく #select_userのセレクトボックスで選んだ時に処理が行われる時の例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$("#select_user").change(function() { // CSRFトークンの取得 $.ajaxSetup({ timeout: 3000, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); // 変数設定 var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); var user_id = $('#select_user').val(); // Ajax設定 ============================================================================ $.ajax({ type: 'get', datatype: 'json', url: '/getUsers', // パス timeout: 3000, data: { _token: CSRF_TOKEN, // CSRFトークン user_id: user_id // ユーザid } }) // Ajax成功時の処理 =========================== .done(function(data,textStatus,jqXHR) { console.log(data); }) // Ajax通信失敗時の処理 ======================== .fail(function(data) { console.log('Ajax Error'); }); }); |
実際の利用例 同じ処理が必要な場面があったので共通化した
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/** * セレクトした部署に所属するメンバーをAjaxで取得する */ function getSectionStaffs() { // CSRFトークンの取得 $.ajaxSetup({ timeout: 3000, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); // 変数設定 var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); var section_id = $('#select_section').val(); // Ajax設定 ============================================================================ $.ajax({ type: 'get', datatype: 'json', url: '/getSectionStaffs', timeout: 3000, data: { _token: CSRF_TOKEN, // CSRFトークン section_id: section_id // 部署id } }) // Ajax成功時の処理 =========================== .done(function(data,textStatus,jqXHR) { $.each(data, function(index, value) { $(".section_staffs").last().append($("<option>").val(index).text(value)); }) console.log(data); }) // Ajax通信失敗時の処理 ======================== .fail(function(data) { console.log('Ajax Error'); }); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * 各メンバーの目標設定項目を追加する */ function addPersonTargetAmount() { var html = $("#appendStaff").html(); $("#per_amount_add").append(html); getSectionStaffs(); } /** * 部署のセレクトボックスを変更した時に所属するメンバーを更新する */ $("#select_section").change(function() { $(".staff").remove(); $('select.section_staffs').children().remove(); getSectionStaffs(); }); |
&nbs …
jQuery
1 2 3 4 |
$(".btn_right").click(function() { userId = $(this).data('id'); userWeapon = $(this).data('weapon'); }); |
HTML
1 |
<span class="btn_right" ><a href="" data-id="150" data-weapon="柔術">ボタン</a></span> |
爆速レンタルサーバならConoHa WING サーバはプロに全部お任せ!「仕事」に専念したいあなたにおすすめです。 ConoHa VPSで運営してま🐱 サーバの勉強がしたいあなたにお …
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
$(document).ready(function(){ App.init(); modify_period(); }); $('#select_section').change(function() { modify_period(); }); function modify_period() { var period = $('[name=section_id] option:selected').attr('period'); if(period == "first"){ $('#score-label1').text("1月"); $('#score-label2').text("2月"); $('#score-label3').text("3月"); $('#score-label4').text("4月"); $('#score-label5').text("5月"); $('#score-label6').text("6月"); $('#form-score1').attr('name', 'score1') $('#form-score2').attr('name', 'score2') $('#form-score3').attr('name', 'score3') $('#form-score4').attr('name', 'score4') $('#form-score5').attr('name', 'score5') $('#form-score6').attr('name', 'score6') } else { $('#score-label1').text("7月"); $('#score-label2').text("8月"); $('#score-label3').text("9月"); $('#score-label4').text("10月"); $('#score-label5').text("11月"); $('#score-label6').text("12月"); $('#form-score1').attr('name', 'score7') $('#form-score2').attr('name', 'score8') $('#form-score3').attr('name', 'score9') $('#form-score4').attr('name', 'score10') $('#form-score5').attr('name', 'score11') $('#form-score6').attr('name', 'score12') } } |
1 |
$('[name=section_id] option:selected') |
名前がsection_idのセレクトボックスで選択されているoptionタグ
1 |
$('[name=section_id] option:selected').attr('period'); |
上記optionタグのperiodという値を取得する …
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/** モーダルを作成**/ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } .modal_bg { background-color:rgba(30,51,77,0.9); position: absolute; left: 0; top: 0; width: 100%; height: 100vh; } .modal_container { background-image: url('{{asset('/home/images/bg2.png')}}'); background-repeat: repeat-y; position: absolute; width: 1200px; top: 10%; } |
.modal_containerが重要
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.modal_bg { background-color:rgba(30,51,77,0.9); position: absolute; left: 0; top: 0; width: 100%; height: 100vh; } .modal_container { background-image: url('{{asset('./images/bg2.png')}}'); background-repeat: repeat-y; position: absolute; width: 1200px; top: 10%; } |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="btn_more_quest js_modal_quest_open"><a href="#">もっと見る</a></div> <div class="modal js_modal_quest"> <div class="modal_bg js_modal_close"></div> <div class="modal_container"> <div class="bg-inner"> <h4>進行中のクエスト<div class="btn_more_quest js_modal_close"><a href="#">閉じる</a></div></h4> <div class="wide_table_container"> <table class="wide_table"> <tr><th width="27%">クエスト名</th><th width="13%">勇者</th><th width="10%">攻略状況</th><th>未踏</th><th style="text-align: right;"><div class="label_bar_container"><div class="label_bar_gross_profit"></div> 予想粗利 <div class="label_bar_sales"></div> 売上</div></th></tr> <tr><td>にゃんにゃんランド</td><td>優さん</td><td>3500万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 50%"></div><div class="bar_sales" style="max-width: 50%"></div></td></tr> <tr><td>わんわんランド</td><td>鈴木</td><td>2500万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 75%"></div><div class="bar_sales" style="max-width: 10%"></div></td></tr> <tr><td>魔界</td><td>田中</td><td>2000万</td><td colspan="2"><div class="bar_gross_profit" style="max-width: 30%"></div><div class="bar_sales" style="max-width: 50%"></div></td></tr> </table> </div> </div> </div> </div> </div> |
jQuery [crayon-600644e527d0c011709007 …
共通コンテンツのSEO対策で実装 すべてのiframeを対象にせず、iframe1のidがあるiframeのみ反映させる html
1 |
<iframe src="読み込み先パス" frameborder="0" width="100%" scrolling="no" id="iframe1"></iframe> |
Widthは100%で高さはjQueryから取得する jQuery [crayon-600644e5294951386 …
DEMO index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML 5 complete</title> <link rel="stylesheet" href="css/styles.css"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function(){ $('#button').click(function(){ $.get('api.php', { name : $('#name').val(), email : $('#email').val(), goiken : $('#goiken').val(), }, function(data){ $('#result').html(data.message); }); }); }); </script> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <label>お名前</label> <input type="text" id="name" name="name" value=""><br/> <label>Eメールアドレス</label> <input type="text" id="email" name="email" value=""><br/> <label>ご意見</label> <textarea id="goiken" name="goiken" value=""></textarea><br/> <hr/> <button id="button">Ajax</button> <p id="result"></p> </body> </html> |
api.php
1 2 3 4 5 6 7 8 9 10 11 |
<?php $ret = array( "name" => htmlspecialchars("{$_GET['name']}", ENT_QUOTES, "utf-8"), "email" => htmlspecialchars("{$_GET['email']}", ENT_QUOTES, "utf-8"), "goiken" => htmlspecialchars("{$_GET['goiken']}", ENT_QUOTES, "utf-8"), "message" => htmlspecialchars("お名前:{$_GET['name']}, Email:{$_GET['email']}, ご意見:{$_GET['goiken']}", ENT_QUOTES, "utf-8") ); header( 'Content-Type: application/json; charset=utf-8' ); echo json_encode( $ret ); |
爆速レンタルサーバならConoHa WING サーバはプロに全部お任せ!「仕事」に専念したいあなたにおすすめです。 C …
DEMO index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Simple API Form Ajax</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { $("#submit").click(function() { var falseFlag = 0; if( document.getElementById('yourName').value == '' ) { falseFlag = 1; } if( document.getElementById('email').value == '' ) { falseFlag = 1; } if( document.getElementById('goiken').value == '' ) { falseFlag = 1; } if(falseFlag == 1) { window.alert("未入力の項目がありますよ!"); return false; } $.ajax({ url: 'api.php', type: 'post', dataType: 'json', data: { yourName : $('#yourName').val(), email : $('#email').val(), goiken : $('#goiken').val() }, }) .done(function(response){ // フォームデータ表示の削除 $('#yourName').val(''); $('#email').val(''); $('#goiken').val(''); // APIに返されたデータを受け取り表示する $('#result').append(response.data); $('#message').append('<strong style="color : green;">ご応募有難う御座います。<strong>'); }) .fail(function(){ $('#message').append('<strong style="color : red;">送信に失敗しました。時間を置いてもう一度お試し下さい。</strong>'); }) }); }); </script> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <lable>お名前</label> <input type="text" id="yourName" name="yourName" value=""><br/> <lable>メールアドレス</label> <input type="text" id="email" name="email" value=""><br/> <lable>ご意見</label> <textarea id="goiken" name="goiken" value=""></textarea><br/> <input type="button" id="submit" value="送信"><br/> <div id="result" value=""></div> <div id="message"></div> </body> </html> |
api.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php // API header('Content-Type: application/json'); $data = "{$_POST['yourName']}さん({$_POST['email']}) ご意見<hr/>{$_POST['goiken']}<hr/>"; echo json_encode( compact('data') ); // メール送信 mb_language("Japanese"); mb_internal_encoding("UTF-8"); $to = 'kanehiro@sys-guard.com'; $subject = 'アンケートフォーム'; $message = " お名前:{$_POST['yourName']}さん メールアドレス:{$_POST['email']} ご意見:{$_POST['goiken']} "; $headers = 'From: from@hoge.co.jp' . "\r\n"; mb_send_mail($to, $subject, $message, $headers); |
爆速レンタルサーバならConoHa WING サーバは …
toggle() 表示、非表示を繰り返す jQuery
1 2 3 4 5 |
<script> $(".btn").click(function(){ $(".box1").toggle(1000, 'linear'); }); </script> |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> .box { } .box1 { width: 150px; height: 150px; background-color: cornflowerblue; display: block; } .btn{ display: inline-block; text-decoration: none; background: #87befd; color: #FFF; width: 120px; height: 120px; line-height: 120px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; box-shadow: 0px 0px 0px 5px #87befd; border: dashed 1px #FFF; transition: .4s; margin-top: 100px; } .btn:hover{ background: #668ad8; box-shadow: 0px 0px 0px 5px #668ad8; } </style> </head> <body> <span class="box1"></span> <a href="#" class="btn">BUTTON</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(".btn").click(function(){ $(".box1").toggle(1000, 'linear'); }); </script> </body> </html> |
DEMO 爆速レンタルサーバならConoHa WING サーバは …
スクロールで指定した要素が表示された時にclassを追加する ある要素までスクロールしたらアクションをさせるJavascriptを作成する時に気をつけること。 anime.js CSSライクでデザイナーに優しい!anime.jsはDOMアニメーションの新定番だ! invie …