Qiita - jQueryタグが付けられた新着投稿

【jQuery】配列をCSVファイルにして、ダウンロードする方法

SN

7/15 11:35



解説

流れとしては、カンマ区切りにした配列をAjaxを利用して、CSVを生成するPHPファイルを呼び出します。

返ってきた値をブラウザでダウンロードすることになります。

送信するデータ(例)

Array
(
...

ProgateのjQueryレッスンで学べること

SN

7/15 02:10



Progateとは

Progateサイト上でコーディングをしながら、気軽にプログラミング言語を学ぶことが出来るサイト。

「新しくこの言語に挑戦してみたいな」という時に使えるありがたいサイト

基本無料のサ...

WordPress管理ページ中でajaxを利用して、CSVファイルをダウンロードする方法

SN

7/14 18:06



やりたいこと

WordPress管理ページ上で、任意のデータをシームレスにCSVダウンロードする

CSVファイルを出力する際に一度外部のPHPファイルをリンクさせず、シームレスにダウンロードしたい


仮シナリオ
...

Javascriptで数値のカウントアップ

SN

7/14 16:18

ランディングページやゲームでよく見かける数値のカウントアップ。

忘れないようにメモ。

See the Pen KBdbJX by pragma-curry (@pragma-curry) on CodePen.



<html>
<div id="countup">100 L...

JSのdatetimepickerで日付の範囲指定ができなくてハマったポイント

SN

7/12 19:41



ハマったこと

bootstrap3-datetimepicker-rails を使うことで、railsでは簡単に日付カレンダーを作成することができる。


test.html.ruby
f.text_field :date, label: true, class: "form-control datetimep...

タグ付け機能をtag-it.jsを使って導入する

SN

7/12 17:49



はじめに

タグ付けの機能がほしいと思いググると、便利なjqueryプラグインがありました。

github (Tag-it)


導入方法

ダウンロードして、jsとcssをコピー(jsはminがついている方だけで大丈夫です。)

・埋...

Aurelia で Date Range Picker を使う

SN

7/12 16:59

今回は Aurelia で Date Range Picker を使う方法について書いていきます。

最終的に、下図の「Expiry Period」のようになります。

日付を範囲選択したい場合に便利ですので、宜しければご覧ください。



...

ゲーミングPCのパーツ選びに役立つサイトを作ってみた

SN

7/12 15:06



はじめに

自作初心者がゲーミングPCを組む時に、パーツ選びで苦戦することが本当に多いため(自分もそうでした)少しでも楽にパーツを選べたらいいなと思って作ってみました。(まだ未完成ですが...)


サイト...

unsliderを触ってみたよ。

SN

7/12 15:02

色々なサイトで画像がスライドする場所があって、実装方法が気になったので、調べました。

とりあえずこれ書けば動くレベルのソース、各パラメータの説明を載せておきます。オプションが豊富すぎるので、公式を...

ajaxではまった話(XMLHttpRequest : 500)

SN

7/12 11:33

CakePHP3でajaxで取得した情報を処理しようとしたら、データが取得できなかった。

まずエラーが表示されないので、エラー内容が表示されるように設定する。

.fail(function (XMLHttpRequest, textStatus, er...

【slick.js】2週目に入る際に「.slick-center」の位置がずれるバグ

SN

7/11 19:05

http://kenwheeler.github.io/slick/

こちらの公式サイトの「Center Mode」のように、

オプションで centerMode: true; を設定した場合のみ、真ん中の要素に「.slick-center」を付与してくれます。

…が...

個人学習メモ#4 Jquery 基礎

SN

7/11 15:28

$('セレクタ').css('プロパティ','値');

複数プロパティがある場合

$('セレクタ').css({

'プロパティ':'値',

'プロパティ':'値',

'プロパティ':'値'

});

イベントタイプ一覧

$('セレクタ'...

jQueryチートシート

SN

7/8 23:39



初級編


基本操作

$...jQueryのオブジェクト

()...セレクタ(HTMLの要素や、id名/class名などのこと)

.method(args)...メソッドと引数

※jQueryはセミコロンを忘れないように!


jQueryはfunction内...

jQueryの非同期の仕組みをブックマークレットに組み込む

SN

7/8 20:01

ブックマークレットを使ってDeferredを使う方法です。普通のjQueryを使った解法なのでブックマークレット特有のことは出てきません。


困ったこと

いろんなAPIを叩くブックマークレットを作って調子に乗ってAPI...

【初心者向け】ajaxハンズオン with Rails5.1 & jQuery3.0

SN

7/8 10:04

プログラミング学びたての方から、ajaxがよくわからないという相談を

Web上を見るとajaxの詳しい解説はあっても、ハンズオン形式の記事は少ないと感じました。

ということで、細かい説明は抜きにしてとり...

参考になるcss・jqueryページ(自分用)

SN

7/8 02:46



参考になるcss、jqueryページをまとめてみる

・フルスクリーンナビゲーション

https://webdesignday.jp/inspiration/technique/html/4746/

・おしゃれアイコン

https://saruwakakun.com/design/tips/...

jQueryで登場アニメーション

SN

7/7 17:57

今回はサイトで使えるように

誰でも簡単に出現アニメーションをつけれるように作ってみました。

divでもaタグでも何でも使えます。

注意点 "marginが消えます。"




使い方


css
body {
overflow-x: ...

GAS(GoogleAppsScript)を使ってみる #006

SN

7/6 15:37

(また休んでいたため久し振りの投稿…果たして復帰する日はやってくるのか)Oo。(´-`*)


概要

 スプレッドシート出社記録を付けているのだが、この表何と手作り(* ´艸`)クスクス

無くなったら新たに作成するので...

textareaで指定の行数に移動する方法

SN

7/6 15:21



説明

高さを行数で割っただけです。


ソース


app.js
// i : 行数
let height = $t.height() / $t.prop('rows')
$t.prop('scrollTop', i * height)



【このご時世にjQuery!?】まさかのjQuery+webpack+babelでマンスリーカレンダーを作ってみた

SN

7/6 03:41



このReactのコード、jQueryで書いたらどうなるんだろう…

ふと、Reactを書いていてそんなことを思いました。

ここ最近Reactも主流になりつつあり、仕事でもReactを書くことが増えてきました。

Reactはstat...

結婚式のためにリアルタイムスライドショーを作ってみる〜概要編〜

SN

7/6 00:11



はじまり

近々結婚式を行うことになり、余興についての情報を調べていたところ、リアルタイムスライドショーが流行っている(?)と知りました。

参列者にスマホなどで写真を送ってもらい、それを会場のスク...

復習1:Local Storageとオブジェクトのまとめ

SN

7/5 16:36

4月からプログラミングスクールにフルタイムで通い始めて早3ヶ月、この機会に色々と復習して記事にまとめていこうと思います。わかりにくい点、間違っている点などありましたらコメントでご指摘ください。

ま...

Onメソッドでアロー関数を使う場合のthisについて

SN

7/5 16:24

個人的な復習と健忘録として。

アロー関数内のthisは挙動が変わります。

//ES5記法
$('#hoge').on('click', function() {
$(this).hide();
});


これをアロー関数で書いた場合

// NG
$('#hoge').on('click'...

超シンプル!マウスオーバーで色変化

SN

7/5 15:25



やってみよう!

デモイメージ↓



以下コードです。


html
<div id="typo">マウス</div>




css
#typo {
background-color: #64bcfc;
color: #fff;
font-weight: bold;
font...

jQueryで外部CSVファイルをロードする

SN

7/5 14:58

外部CSVファイルからデータを取得して、javascriptで操作したい場合がある。そんなときには、jQueryとjquery.csv.jsを使うのが最も簡単である。

ところが、この方法を紹介しているいくつかのサイトのコードを実...

複数項目の詳細表示 / 非表示を、JQuery5行で実装する

SN

7/5 12:24



よくあるこういうリスト形式の詳細表示非表示をJQuery5行で実装しました。

HTML・CSSはこんなかんじです。


pulldown.html
<head>
<link rel="stylesheet" type="text/css" href="./stylesheet.cs...

jQuery「Invalid or unexpected token」→は?

SN

7/5 10:06



jQueryでInvalid or unexpected tokenって出る

→検索する

→それっぽい解決策が出ない

→\(^o^)/

ってなったので直した。


コンソール



ここで気づけばよかったのに・・・(5行目って書いてある...

MTGのために画像と名前をさっとサジェストで検索する

SN

7/5 09:19

ニコニコ動画で、シチュエーション1に即したカード名が

《日本語/英語》

でコメントされる流れが好きです。

しかし日本名はともかく英語までいちいち調べるのは面倒2なので、情報をさっと取れないかなと...

bitFlyerAPIで自動売買①[初心者向け、プログラミング歴1ヶ月でも作れた]

SN

7/4 16:37

プログラミングの勉強を始めて約2ヶ月半、、始めてのQiita投稿です。

今回は勉強を始めて1ヶ月の時に作ったbitFlyerの自動売買システムの土台作り〜いじり始めるまでを簡単に説明します。

※あくまで実際にお...

ピュアCSSでボタンアニメーション+jQueryでアニメーション終了イベントを取得する

SN

7/4 14:28

box-shadowでボタンっぽく作ってビュアCSSで動かす方法です。

See the Pen Button Animation by shiba328 (@shiba_mitue) on CodePen.



<div class="btn">Button</div>


CSSのactive時にkeyframe...

PR:bitflyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で