自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

jQuery

  • inputタグのtype='file'で画像のサムネイルを表示させる
    fontawesomeを使用しているので、アイコンの表示は別途CDNをインストールしておいてほしい。 ソースコード HTML <label class="image_input_area"> <input class="image_input" type="file" name="icon" accept="image/*"> <div class="image_input_icon"><i class="fas fa-image"></i></div> <img class="image_input_preview" src="" alt=""> </label> CSS .image_input_area { display:inline-block; border:dashed 0.2rem var(--gray); width:5rem; height:5rem; position:relative; cursor:pointer; } .image_input{ display:none; } .image_input_preview{ width:100%; height:100%;position:absolute; } .image_input_icon{ width:100%; height:100%;position:absolute; } .image_input_icon i{ font-size:2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } JavaScript(jQuery) $(".image_input").change(function() { const label = $(this).parent("label"); const file = $(this).prop("files")[0]; // 画像以外は処理を停止 if (! file.type.match("image.*")) { $(this).val(""); return; } // 画像表示 const reader = new FileReader(); reader.onload = function() { label.children(".image_input_preview").prop("src", reader.result ); } reader.readAsDataURL(file); }); 【別解】JavaScript(バニラ) window.addEventListener("load" , function (){ document.addEventListener("change", (event) => { // type="file ...
    続きを読む

  • jQueryのslick.jsでカルーセルを表示する【.slick-dotsのCSS付きでボタンを押しやすく】
    jQueryとslick.jsを使うことでカルーセルを簡単に表現することができる。 CDNを読み込み 前もって、以下のCSSと <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> JSを読み込んでおく。(jQueryもセットで。) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 使い方 このような形のHTMLに対して <div class="slick_area"> <div class="slick_content">コンテンツ1</div> <div class="slick_content& ...
    続きを読む

  • JavaScriptのイベントリスナのアロー関数でthisは使わない【event.currentTargetを使おう】
    モダンなJavaScriptに慣れるため、無名関数を書くときにもアロー関数を使い、そしてthisを使おうとすると、意図したとおりにはならない。 アロー関数式とfunction関数ではthisの仕様が異なるからだ。下記ソースコードを元に動作を確かめよう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class="button" value="1">ボタン1</button> <button class="button" value=" ...
    続きを読む

  • 【jQuery】.animate()の使い方【アニメーション】
    .animate() の構文 $(要素).animate({ 発動するCSS }, 遅延 ); 遅延はミリ秒単位で書く <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .button-more{ display:inline-block; background:orange; padding:1rem; cursor:pointer; } </style> </head> <body> <span class="button-more">continue ...</span> <script> $('.button-more').on('mouseover', function() { console.log("over"); // このthisはこのイベントが発生した要素自身を意味している。 $(this).animate({ opacity: 0.5, marginLeft: 20, }, 100); }); $('.button-more').on('mouseout', function() { console.log("out"); $(this).animate({ opacity: 1.0, marginLeft: 0, }, 100); }); </script> </body> </html> 結論 jQueryを使用することで、簡単にアニメーションを再現することができる。 イベントと組み合わせることで、モーダルダイアログの表示や、入力欄の ...
    続きを読む

  • JavaScriptで動的に増減する要素に対してイベントを発動させる【Vanilla.js】
    動的に増減する要素に対して、以下のようなやり方ではイベントをセットすることはできない。(クリックして追加されたあと、ボタンをクリックしても追加はされない。) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <button class='test'>test</button> <script> const test = document.getElementsByClassName("test")[0]; test.addEventListener("click", () => { document.body.innerHTML += "<button class='test'>test</button>"; }); </script> </body> </html> jQueryではこのようにするが <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class='test'>test</button> <script> $(document).on("click", ".test", () => { $("body").append("<button class='test'>test</button>"); }); </script> </body> </html> Vanilla.jsではこのように書く <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <button class='test'>test</button> <script> //動的 ...
    続きを読む

  • Reactに必要なJavaScript構文【ES2015(ES6)のテンプレート文字列、アロー関数、スプレッド構文、letとconstなど、脱jQueryにも有効】
    Reactに必要なJavaScript構文をまとめる Reactを使わない場合でも、JavaScriptをシンプル書くヒントがあるので、コードを小さくしたい場合にも有効。 脱jQueryを推進したい人は下記も参考に。 jQueryのコードをJavascriptに書き換える【セレクタ、属性値の参照、イベントなど】 letとconst letとconstはいずれも再宣言が不可能。 let test = "aaa"; //これはエラー //let test = "bbb"; ...
    続きを読む

  • jQueryのオブジェクトをfor~of文でループするとJavaScriptになる問題の対処
    for~of文を使ってjQueryのオブジェクトをループすると、JavaScriptのオブジェクトになる。 その対策をまとめておく。 jQueryループ時の問題 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="test">1</div> <div class="test">2</div> <div class="test">3</div> <div class="test">4</div> <script> let elems = $(".test"); //この時点ではjQueryのオブジェクトになっている。 console.log(elems); for (let elem of elems){ //for of文で取り出すと、JavaScriptのオブジェクトになっている。 console.log(elem); //jQueryのオブジェクトだと思ってjQ ...
    続きを読む

  • Tempermonkeyを使ってGitHubのリポジトリ削除を簡単にする。
    GitHubのリポジトリを作りすぎた。 順次消していこう。 そういう時、こういうダイアログが出てくる。 この確認の入力作業がめんどくさい。 確認するまでもなく、すぐにリポジトリを削除したい時、Tempermonkeyを使ってこの入力作業をスキップしていく。 コード // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://github.com/[ここにGitHubのユーザー名を]/* // @icon https://www.google.com/s2/favicons?sz=64&domain=github.com // @grant none // @require http://code.jquery.com/jquery-3.4.1.min.js ...
    続きを読む

  • 【JavaScript】動的に要素が変化した時に何か処理をさせたいならMutationObserverを使う
    例えば、特定の要素内のHTMLがJavaScriptの処理によって変わった時。 こんな時に何か処理を実行したい場合、MutationObserverを使うと良い。 ソースコード //特定の要素が動的に変化した時、何らかの発動させる let body = document.getElementsByTagName('body')[0]; let target = new MutationObserver(function(){ detail_sortable() }); target.observe(body, { "childList":true,"subtree":true }); 結論 例えば、Ajaxが発動して、ページがレンダリングされた時に何かを発動させることができる。(Ajaxのdoneの時に処理を書くという方法もあるが ...
    続きを読む

  • 【保存版】Ajax(jQuery)の仕組みと仕様
    本記事は、たびたび忘れがちなAjaxのパラメータや引数などの意味を思い返すための備忘録である。 let form_elem = "#form_area"; let data = new FormData( $(form_elem).get(0) ); let url = $(form_elem).prop("action"); let method = $(form_elem).prop("method"); $.ajax({ url: url, // リクエストの送信先 type: method, // 送信するリクエストのメソッド data: data, // 送信するデータ(FormDataオブジェクト型) processData: false, // dataに指定した内容をURLエンコードして送信(?page=2などの形式)にするかの指定。FormDataオブジェクトの場合はfalseを指定 contentType: false, ...
    続きを読む