jQueryでテキストをクリップボードへコピーするスニペット
CSS .moviepass_area { display: block; margin: 20px auto 20px; padding: 20px 20px 0; } .moviepass_area p { color: #2165c0; font-size: 1.4rem; font-weight: 500; text-align: center; margin-bottom: 15px; line-height: 1.6; } .moviepass_inner { display: flex; width: 450px; margin: 0 auto; background: #F0F0F0; justify-content: center; align-items: center; padding-top: 10px; padding-bottom: 10px; flex-wra
jQueryチートシート - Qiita
はじめに 最近jQuery関連について学習したのでチートシートを作成しました！ よく使うものを中心に、使い方や記述のポイントを簡単にまとめたのでご活用ください。 目次 1.予約状態 2.セレクタの指定方法 3.Family Treeの探索 4.よく使うメソッド一覧 5.その他のメソッド ６.each() ６.イベント処理 ６.非同期通信: $.ajax() 予約状態（HTMLを先に読み込む処理） !DOCTYPE <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <!-- scriptファイルの読み込み --> <script src="jquery-3.4.1.min.js"></script> </head> <body> <div class="box" id="box"> <p class="b
はじめてのAjax(jQuery) 2018年版 - Qiita
2018/03/21 2018年版に再編集 はじめに：Ajaxとは Ajaxとは「Asynchronous JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリティの向上やサーバ負荷の軽減に繋がります。AngularJSなどで作成したシングルページアプリケーションはこの技術を中心に構成されています。 簡単にまとめると次のようになります。 ページ遷移をさせず（非同期処理で）コンテンツを書き換えられる 他の処理と同時並行で、サーバとやりとりができる また、jQueryでのAjax実装が手軽なので、今回はjQuery、ローカルサーバにMAMPを使用しています。 最初は、pythonやnodeなどのワンライナーでのローカルサ
jQueryのajaxで Illegal invocation が出た時の対策。
Illegal invocation エラーがたまに出ます。 Uncaught TypeError: Illegal invocation これは基本的には予約語を使った場合に出るそうなのですが そんな予約語を使った覚えはないのに、エラーが出てきた時の 対策がなかなか見つからなかったので、こちらに記述しておきます。 対策 対策は簡単です。 ajax の option に processData: falseをつける。 ファイルを送信したりするときに formdata を使って送信するのですが、 以下の様に書くとエラーが出ます。 $.ajax({ url: endpoint_url, type: "POST", headers: { "Authorization": auth_key }, data: formdata }) なので、processData: falseをつけてあげるとエラー
jQueryでたった5行の記述で長いテキストを「…」で省略する
テキストをJavaScriptで省略して語尾に「･･･」を付けたいケースは割とよくある。jQueryプラグインなども存在するがjQueryを読み込んでいるのであれば下記のように5行の記述で長いテキストを「…」で省略することが可能。 半角0.5文字、全角1文字版を追記
jQueryのhover()でマウスオーバーの処理
jQueryでマウスを乗せたときにイベントを発生させるhover()ですが、cssを使った処理や画像の切り替え、動的に生成した要素にhover()を効かせる方法などをご紹介します。
jQuery で select タグに option タグを追加する - Qiita
例えば <select class="my-select" multiple> という select タグに jQuery を使って option タグを追加してみます。 var characters = { yuno: 'ゆの', miyako: '宮子', sae: '沙英', hiro: 'ヒロ', nori: '乃莉', nazuna: 'なずな' }, $select = $('.my-select'), $option, isSelected; $.each(characters, function (value, name) { isSelected = (value === 'miyako' || value === 'nori'); $option = $('<option>') .val(value) .text(name) .prop('selected', isSe
jQueryでselectタグ内のoptionタグを削除する方法をいくつか |
そんなに難しい話では無いですが、ごく最近ちょっと手間取った（力不足なだけ・・・）ので、自分用のメモ。 フォームでselectを使っている場合に、ページ内で何かの操作をした時にselectタグの子要素になるoptionの内容、要するに選択項目を書き換えたいという時が結構あると思います。 optionの追加はprepend（選択黒目の先頭に追加）またはappend（選択黒目の末尾に追加）を使います。これについては結構情報も多かったので問題は無いと思いますが、削除についての情報は少ない気がしました。 というわけで、選択項目を削除する時のコードをいくつか。 選択項目を一つだけ削除する場合 まずはこんなコード。『id=area』という指定がされているselectタグがあるとします。 $('select#area option:first-child').remove(); 『first-child』
Moment.js | Parse, validate, manipulate, and display dates in javascript.
Moment.js 2.30.1 Parse, validate, manipulate, and display dates and times in JavaScript. Install npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format
jQuery.each(object, callback) - jQuery 日本語リファレンス
配列/オブジェクトを問わずに汎用的に用いることができる、繰り返し処理用の関数です。 この関数は、jQueryオブジェクトのプロトタイプに実装されている $().each() とは異なります。こちらは、引数で渡した単なる配列やjQueryでないオブジェクトも繰り返し操作することができます。 コールバック関数は2つの引数を持ちます。 1番目はオブジェクトであればハッシュKEY、配列であればインデックスを受け取ります。 2番目には、値が受け渡されます。 繰り返し処理中にループを抜けたい場合（一般的なループ処理で言うところのbreak）、コールバック関数でfalseを返すことで実装できます。それ以外の値を返した場合は、無視されます。 配列とオブジェクトを用意します。 配列は、繰り返しながら対応するidを持つdiv要素に、テキストとして自分のidを入れていきます。但し、ループ中に"four"が出てき
JavaScriptで日付を扱うならこれ！「moment.js」
■ つかいかた（基礎編） ダウンロードしたmoment.jsをscriptタグで読み込ませたら準備完了です。 あとは下記のような実装で使用できます。 // momentオブジェクトを初期化して・・・ var m = moment(); // formatで出力! var output = m.format("YYYY年MM月DD日 HH:mm:ss dddd"); console.log(output); // => 2013年05月15日 12:34:56 Wednesday // 現在時刻 moment(); // ミリ秒で指定 moment(1368543600000); // タイムスタンプ（秒）で指定 moment.unix(1368543600); // Date.parseで解析可能な文字列を指定 moment("May 15, 2013"); // Dateオブジェクトか
jQuery 選択されているラジオボタンの値を取得する
jQueryで選択されているラジオボタンの値を取得する方法が わからなかったのでメモしておきます。 ちなみに、ラジオボタンのグループが選択されているかのチェックはこちら。 jQuery ラジオボタンのグループが選択されているかチェックする ラジオボタンのvalueを定義 htmlでラジオボタンを定義するとき、name属性に同じ値を設定すると、 ラジオボタンのグループとなります。 他の値が選択されると、元選択されていた値は解除されます。 今まで、こんなラジオボタンがある場合、 <label><input type="radio" name="radio_group" id="radio1">値１</label> <label><input type="radio" name="radio_group" id="radio2">値２</label> <label><input type="ra
Moment.js | Parse, validate, manipulate, and display dates in javascript.
Moment.js 2.30.1 Parse, validate, manipulate, and display dates and times in JavaScript. Install npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format
一生Ajaxで取得した値をDataTablesにつっこめない - arimoつくったメモ
DataTablesっていうjQueryライブラリを使ってソート機能とか検索/抽出機能とかが自動でついちゃうイケてる表組をつくろうとしています。 やりたいこと：ajaxでJSONを返すだけのAPIに通信しにいって、返ってきたJSONを整形してテーブルタグ群につっこみたい。 $("tbody").append("<tr data-href='arimo.php><td>" + this.Profile.first_name + "</td><td>" + this.Profile.last_name + "</td><td></tr>"); ってかんじでtbodyにappendしていけばいいでしょう、ちょっとださいけど。 と思ったら、DataTablesはNo dataと1件もとれてない旨を表示するし、ソートボタンや検索をしようとするとajaxで取りに行った情報が消えてまっさらになる… ht
jQuery.extend() メソッドの使い方まとめ ｜ Tips Note by TAM
知っている人には当たり前のことかもしれませんが、使い方をまとめておきます。 jQuery.extend() は、基本的には複数のオブジェクトをマージして返してくれるメソッドです。 (プラグインのソースで、デフォルトの設定値を上書きする時などによく見かけますね） jQuery.extend(target[, object1][, objectN]) こんな感じで使います。 オブジェクト a の内容と b の内容をマージしたいとき、 var a = { id: 1, name: 'TAM' }; var b = { name: 'TAM-new', hobby: 'football' }; $.extend(a, b); console.log(a); // 結果: // { // id: 1, // name: "TAM-new", // hobby: "football" // } $.e
Spectrum～シンプルで使いやすいjQueryカラーピッカープラグイン – HCDコンサルティング（旧・中川勉社会保険労務士事務所FPウェブシュフ）のブログ
Spectrumは画像ファイルを含まないので、とても「軽い」カラーピッカープラグインです。jQuery・CSSだけで表現され、<input type=”color”>を用いた送信フォームを用意すればすぐに使えます。 使い方 まず、自分のPCに挙動確認用のファイルを作りましょう。私は、spectrumと名付けたフォルダーを作りました。 次にspectrum.cssとspectrum.jsを、マウスの右クリックを利用するなどして、今作ったフォルダーの中に保存します。 その後、以下のようなhtmlファイルを作成・保存してください。私は、0.htmlと名付けました。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>spectrum</title> <script src='spectrum.js'></script> <l
Spectrum - The No Hassle jQuery Colorpicker
<input type='color' value='#f594d0' /> Why A Colorpicker? I wasn't satisfied with the solutions available for colorpicking. Many of them included a ton of images, were hard to skin or customize, or were very large plugins. Here are the goals I had when making a new one: Small Footprint Just include the needed CSS and JavaScript files, and you are ready to go! <script src='spectrum.js'></script> <l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://kame--code.com/clipboard-copy/
脱jQueryのためにしたこと - Qiita
jQuery プラグインの DateTimePicker が良さそう - Qiita
