JavaScriptの正規表現 /^yuu/ 「yuu」を検出 /^yuu\d/ \d 数字を表す この場合は「yuu1」, 「yuu9」などを検出 /^\d{4}-?\d{3}$/ ^ 行の先頭 $ 行の先頭 d{4} 4桁の数字 -? -、または-がない場合がある moge? ? 直前の一文字がある場合、ない場 …
JavaScript正規表現
タグ: jQuery
jQuery通貨区切り・正規表現
フォームに入力した時に通貨に自動で区切り文字を行う 1000000 ↓ 1,000,000 jQuery function addCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”); } x.toString() 正規表現使うのでString型に変換しているよ！🐱 $( …
jQuery 値・配列の取得・削除
値の取得 値を１つだけ取得する JS var section_id = $(‘#select_section’).val(); HTML(Laravel Brade) <select class=”form-control” id=”select_section” name=”section_id”> @foreach ($sections as $section) &l …
jQuery Ajaxの雛形
よく使うので雛形をメモしておく #select_userのセレクトボックスで選んだ時に処理が行われる時の例 $(“#select_user”).change(function() { // CSRFトークンの取得 $.ajaxSetup({ timeout: 3000, headers: { ‘X-CSRF-TOKEN’: $(‘meta[name=”csrf-token”]’).attr(‘ …
ボタンを押すことでデータを取得する
jQuery $(“.btn_right”).click(function() { userId = $(this).data(‘id’); userWeapon = $(this).data(‘weapon’); }); HTML <span class=”btn_right” ><a href=”” data-id=”150″ data-weapon=”柔術 …
jQuery optionの属性値で振る舞いを変える
jQuery $(document).ready(function(){ App.init(); modify_period(); }); $(‘#select_section’).change(function() { modify_period(); }); function modify_period() { var period = $(‘[name=section_id] …
jQuery モーダルウィンドウ 背景が黒くなるやつ
CSS /** モーダルを作成**/ .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; …
iframeの高さの自動調整
共通コンテンツのSEO対策で実装 すべてのiframeを対象にせず、iframe1のidがあるiframeのみ反映させる html <iframe src=”読み込み先パス” frameborder=”0″ width=”100%” scrolling=”no” id=”iframe1″></iframe> Width …
Ajax jQuery 基本フォーム処理
DEMO index.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>HTML 5 complete</title> <link rel=”stylesheet” href=”css/styles.css …
シンプルフォームAPI
DEMO index.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>Simple API Form Ajax</title> <!–[if IE]> <script src=”http://h …
jQuery toggle() 表示, 非表示を繰り返す
toggle() 表示、非表示を繰り返す jQuery <script> $(“.btn”).click(function(){ $(“.box1”).toggle(1000, ‘linear’); }); </script> HTML <!doctype html> <html&g …
anime.js inview.js スクロールイベントアニメーション メモ
スクロールで指定した要素が表示された時にclassを追加する ある要素までスクロールしたらアクションをさせるJavascriptを作成する時に気をつけること。 anime.js CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！ inv …