jQuery
理解しやすさでいうと、jQueryの方が優っていると思い、習いたての時はjQueryを多用していた。 しかしながら、他の言語を使ってみたり、関数を複数作って長期的に体系化して改善・追加していくようになると、javascriptの方が書き方が美しいのでは? さらに…
valueが〜〜なinputタグがあったら、〜〜したい、と言ったif文を書きたいとします。 これは「セレクタを属性値で絞り込む」という要素と、「要素の存在チェックをする」という要素に別れます。 セレクタを属性値で絞り込む これは、valueでも、nameでも、使…
チェックボックスやセレクトボックスの制御は、色々と便利なメソッドが用意されているLaravelでも案外面倒 PHP Laravelで、一度登録した情報の編集画面を作るときに、checkboxやセレクトボックスの挙動を指定するのが、思った以上に面倒だったので、メモして…
buttonタグのtype属性 HTMLだけを勉強している人は、入門の教科書などで、Formを送信したい時のボタンは type="submit" をつけます、というのを知っていると思います。 ただ、submitしたくない、ただのボタンの時は、 type="button" をつけましょう! という…
※この記事は、様々なソースをもとに個人的に学んだことを未来の自分が見返す目的で一つにまとめたものです。 2019.12 ES2015に則ってletで変数宣言する場合、グローバル汚染は心配無いようです。 この記事は根本から古い議論になっている可能性があります。 …
あるセレクタに「一番近い」要素の指定の仕方 jQueryで、直接的にリーチが難しいタグについて、「何かの一番近く」や「何かの親要素」という指定の仕方をしたい時があります。 例えば、私の場合は、ファイルを読み込むための input type="file" タグのスタイ…
**特定の文字を置換・削除する なんと! 簡単。 $(セレクタ).text().replace('置き変える前の文字列', '置き換えた後の文字列'); なので、削除したい時も $(セレクタ).text().replace('削除したい文字列', ''); と置き換えた後の文字列を、空文字で指定すれ…
jQueryで、 .each() メソッドを使うとき、途中でループを抜けたいときがありました。 どうするかというと、 jQuery.each( array, function( i, val ) { // 操作 return false; }); で抜けてくれるそうです。 ちゃんと公式をよく見たら書いてあった^^; StackO…
jQueryのセレクタに変数を入れたい時ってありますよね。 そんな時は、どうするのか調べました。 $('#' + variable_name)... で良いそうです! このStackOverFlowの回答が、一行でシンプルすぎてとても良い(^^) jQuery: using a variable as a selector - Sta…
今扱っている要素は、 $(this) で表せますが、それのidを取得したい! というときがありました。 具体的には、同じクラスをつけているボタンについて、その中で今おしたボタンのidを取得して、それぞれのidに応じた挙動を追加したいと思いました。 そこで調…
jQueryのセレクタで、ワイルドカードを使いたい! ということ、ありますよね。 私の場合、inputタグの、id属性で、id="hoge1", id="hoge2"... という書き方をして、それぞれのタグを区別した上で、 どのhegeなんたらについても、同じ動きをつけたいときに、…
JavaScript初心者です。 掲題の通りの疑問を抱いたので調べました。結論から言うと、全く問題ないようです。こちらの方が同じ質問をされていて、疑問が解消されました。okwave.jp この回答者の方によると、jQueryはJavaScriptnライブラリ。 分けて書くことの…
jQueryでwindow幅ごとに処理を書き分けるというのを書きましたが、その時に、widthとinnerWidthって何が違うの? と思ったので、調べてみたことを書いておきます。結論から言うと、以下の図の通りのようです。 しかし、①window.width(), ②window.innerWidth(…
これはいくつかの方法があるようでした。window.innerWidthで、スマホとタブレット、PCなどを判定する方法。 ユーザーエージェントで判定する方法などです。ユーザーエージェントで判定するのもかなりシンプルなコードが書けそうでした(こちらのかたが綺麗…
以前、インプットタグで画像を読み込むjQueryコードを作ったのですが、 この上に、削除ボタンをつけて、クリックするとプレビューが消える、というようにしました。しかし、何度か試しているうちに、一度読み込んで削除した画像を再度読み込もうとしても、読…
parent() 親要素を取得する position() 親要素からのtop, leftの座標を取得。 ただし、cssでposition:absoluteを指定した要素の、position: relativeを指定した親要素という関係が成立していないと取得はできないので注意 これで詰まった時、width()を使った…
jQueryをまずhtmlファイルに書き込んで追加していったところ、うまく動いていることを確認したのですが、外部のjsファイルに転記したところ動かなくなってしまいました。 これは、ドキュメントを読み込んでから、jQueryを作動させないといけないことに関連し…
基本は、$('セレクタ').width();で良いはずなのですが、これだとwidthもheightも0になってしまいました。 そこで調べたところ、画像は「読み込んでから」widthを取らないと、0になってしまうみたいです。なので、以下のようにするのが注意する点です。 $('セ…
HTML/CSSはまあまあ、jQueryはまだ初心者を抜けきっていないくらいのレベルです。 Webサービスで、画像を読み込む必要が出たので色々調べました。 結果実装できました! 一口に「画像読み込み」といっても、いくつかの機能に別れるため、それぞれで調べて、…
jeryで、クリック時のイベントを定義していたのですが、 ・テーブルの行全体を押すと、データの詳細画面へ遷移する ・行の中にある削除ボタンを押すと、削除確認画面へ遷移する という形になっていたところ、削除ボタンを押しても詳細画面へとぶ・・・なぜ・…
全てのコンテンツが一枚のシートにつらつらと書かれていて、スクロールしてみていくというサイト、最近多いですよね。 その時に、メニューを画面トップにとどめておきたいというのはよく思うことですよね。 やってみました。 HTML jQueryのライブラリ読み込…
jQueryを使う時に、htmlのheadタグ内で宣言しておく必要がありますね。 いつも調べるのは面倒なので、備忘がてら、ここに貼っておきます。 1.ダウンロードする方法 jQueryのページに行きます。 jquery.com ダウンロードタブをクリックして、ダウンロードの…