鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

jQuery

属性値(name, valueなど)で要素を指定する / javascriptとjQueryそれぞれ(個人的備忘録)

理解しやすさでいうと、jQueryの方が優っていると思い、習いたての時はjQueryを多用していた。 しかしながら、他の言語を使ってみたり、関数を複数作って長期的に体系化して改善・追加していくようになると、javascriptの方が書き方が美しいのでは? さらに…

jQueryで属性値が一致するものの存在チェックをしたい

valueが〜〜なinputタグがあったら、〜〜したい、と言ったif文を書きたいとします。 これは「セレクタを属性値で絞り込む」という要素と、「要素の存在チェックをする」という要素に別れます。 セレクタを属性値で絞り込む これは、valueでも、nameでも、使…

PHP Laravelのアップデート画面でcheckboxを操作する

チェックボックスやセレクトボックスの制御は、色々と便利なメソッドが用意されているLaravelでも案外面倒 PHP Laravelで、一度登録した情報の編集画面を作るときに、checkboxやセレクトボックスの挙動を指定するのが、思った以上に面倒だったので、メモして…

<button>タグ使うときは、type属性の記述を忘れるなかれ。(時折面倒なことに巻き込まれます)

buttonタグのtype属性 HTMLだけを勉強している人は、入門の教科書などで、Formを送信したい時のボタンは type="submit" をつけます、というのを知っていると思います。 ただ、submitしたくない、ただのボタンの時は、 type="button" をつけましょう! という…

javascriptの名前空間、モジュールパターン(個人的メモ)

※この記事は、様々なソースをもとに個人的に学んだことを未来の自分が見返す目的で一つにまとめたものです。 2019.12 ES2015に則ってletで変数宣言する場合、グローバル汚染は心配無いようです。 この記事は根本から古い議論になっている可能性があります。 …

jQueryで一番近いセレクタや、親要素を指定する(closest, parent, children)

あるセレクタに「一番近い」要素の指定の仕方 jQueryで、直接的にリーチが難しいタグについて、「何かの一番近く」や「何かの親要素」という指定の仕方をしたい時があります。 例えば、私の場合は、ファイルを読み込むための input type="file" タグのスタイ…

jQueryで文字列を操るメソッドたち(メモ・適宜追加)

**特定の文字を置換・削除する なんと! 簡単。 $(セレクタ).text().replace('置き変える前の文字列', '置き換えた後の文字列'); なので、削除したい時も $(セレクタ).text().replace('削除したい文字列', ''); と置き換えた後の文字列を、空文字で指定すれ…

jQueryのeachメソッドでbreak的なことをしたい

jQueryで、 .each() メソッドを使うとき、途中でループを抜けたいときがありました。 どうするかというと、 jQuery.each( array, function( i, val ) { // 操作 return false; }); で抜けてくれるそうです。 ちゃんと公式をよく見たら書いてあった^^; StackO…

jQueryのセレクタに変数を使いたい

jQueryのセレクタに変数を入れたい時ってありますよね。 そんな時は、どうするのか調べました。 $('#' + variable_name)... で良いそうです! このStackOverFlowの回答が、一行でシンプルすぎてとても良い(^^) jQuery: using a variable as a selector - Sta…

jQueryでidを取得して利用したい(初心者向け)

今扱っている要素は、 $(this) で表せますが、それのidを取得したい! というときがありました。 具体的には、同じクラスをつけているボタンについて、その中で今おしたボタンのidを取得して、それぞれのidに応じた挙動を追加したいと思いました。 そこで調…

jQueryのセレクタでワイルドカードを使いたい

jQueryのセレクタで、ワイルドカードを使いたい! ということ、ありますよね。 私の場合、inputタグの、id属性で、id="hoge1", id="hoge2"... という書き方をして、それぞれのタグを区別した上で、 どのhegeなんたらについても、同じ動きをつけたいときに、…

同じjsファイル内/同じ関数内で、jQueryとJavaScriptは混ぜて書いて良いのか

JavaScript初心者です。 掲題の通りの疑問を抱いたので調べました。結論から言うと、全く問題ないようです。こちらの方が同じ質問をされていて、疑問が解消されました。okwave.jp この回答者の方によると、jQueryはJavaScriptnライブラリ。 分けて書くことの…

jQueryのwidth(), innerWidth(), outerWidth()の違い

jQueryでwindow幅ごとに処理を書き分けるというのを書きましたが、その時に、widthとinnerWidthって何が違うの? と思ったので、調べてみたことを書いておきます。結論から言うと、以下の図の通りのようです。 しかし、①window.width(), ②window.innerWidth(…

jQueryでwindow幅ごとに処理を書き分ける

これはいくつかの方法があるようでした。window.innerWidthで、スマホとタブレット、PCなどを判定する方法。 ユーザーエージェントで判定する方法などです。ユーザーエージェントで判定するのもかなりシンプルなコードが書けそうでした(こちらのかたが綺麗…

jQueryでinput[type="file"]タグを初期化したい

以前、インプットタグで画像を読み込むjQueryコードを作ったのですが、 この上に、削除ボタンをつけて、クリックするとプレビューが消える、というようにしました。しかし、何度か試しているうちに、一度読み込んで削除した画像を再度読み込もうとしても、読…

(自分用)jQueryメソッド覚書(注意点など)

parent() 親要素を取得する position() 親要素からのtop, leftの座標を取得。 ただし、cssでposition:absoluteを指定した要素の、position: relativeを指定した親要素という関係が成立していないと取得はできないので注意 これで詰まった時、width()を使った…

jQueryが外部ファイルから読み込めない時に注意すべき点

jQueryをまずhtmlファイルに書き込んで追加していったところ、うまく動いていることを確認したのですが、外部のjsファイルに転記したところ動かなくなってしまいました。 これは、ドキュメントを読み込んでから、jQueryを作動させないといけないことに関連し…

jQueryのwidthメソッドで表示画像の幅をとるときの注意点

基本は、$('セレクタ').width();で良いはずなのですが、これだとwidthもheightも0になってしまいました。 そこで調べたところ、画像は「読み込んでから」widthを取らないと、0になってしまうみたいです。なので、以下のようにするのが注意する点です。 $('セ…

webで画像読み込みで一番簡単なセット(inputタグのデザイン、プレビュー表示のjQuery、type制限)備忘メモ

HTML/CSSはまあまあ、jQueryはまだ初心者を抜けきっていないくらいのレベルです。 Webサービスで、画像を読み込む必要が出たので色々調べました。 結果実装できました! 一口に「画像読み込み」といっても、いくつかの機能に別れるため、それぞれで調べて、…

jQueryで子要素をクリックしているのに親要素のイベントが起きちゃうバグを防ぐ(バブリングの伝播制御)

jeryで、クリック時のイベントを定義していたのですが、 ・テーブルの行全体を押すと、データの詳細画面へ遷移する ・行の中にある削除ボタンを押すと、削除確認画面へ遷移する という形になっていたところ、削除ボタンを押しても詳細画面へとぶ・・・なぜ・…

【jQuery】 スクロールすると途中からメニューバーが画面トップに留まる

全てのコンテンツが一枚のシートにつらつらと書かれていて、スクロールしてみていくというサイト、最近多いですよね。 その時に、メニューを画面トップにとどめておきたいというのはよく思うことですよね。 やってみました。 HTML jQueryのライブラリ読み込…

【jQuery】 headタグ内での基本の宣言

jQueryを使う時に、htmlのheadタグ内で宣言しておく必要がありますね。 いつも調べるのは面倒なので、備忘がてら、ここに貼っておきます。 1.ダウンロードする方法 jQueryのページに行きます。 jquery.com ダウンロードタブをクリックして、ダウンロードの…