脱jQuery $(”#id”) | q-Az
脱jQuery その1 です。 本日より25日間連続で「脱jQuery」についての記事を「アドベントカレンダー」に投稿していきます。つたない文章力ですが、わかりやすく書くよう頑張りますのでよろしくお願いします。 方針本題の前に方針を少し。 jQuery の利用を否定するものではありません。 正確に jQuery ⇒ JavaScript を書き換えることよりも、「わかりやすく書き換える」に主眼を置きます。 間違った書き換えを行うというのではなく、jQuery オブジェクトと JavaScript の通常のオブジェクトの違いまでは考慮しないといった感じになります。 「jQuery のように JavaScript を扱う」を主眼においてなるべく JavaScript 独特な表現は避け、コピペでも使えちゃうよ、ぐらいの勢いで書いていきます。「jQuery は書けるのに JavaScript は書
jQuery+ajaxでモーダルのコンテンツを取得する方法
jQuery+ajaxでモーダルのコンテンツを取得する方法を紹介します。 １．はじめに モーダル表示の使い方は、たとえば商品ページで、その商品の詳細画像を表示するといったことが多いと思います。 その場合、HTMLページ内にすべてのモーダル用コンテンツを配置して、そこから取得・表示する実装になると思います。 ですが、ページ内にモーダル用のコンテンツをすべて記述すると、場合によってはページのサイズが大きくなり、ロード時間に影響します。 また商品ページではなく、たとえばモーダルをブログの記事ページとして表示させたい場合、上記の方法では大量のコンテンツをページ内に書き出す必要がありますが、現実的ではありません。 ということで、本記事ではモーダル用コンテンツをjQuery+ajaxで取得し、さらの前後リンクのコンテンツもjQuery+ajaxで取得する方法を紹介します。 ２．サンプル 下記のリンクを
【jQuery】（上／下）どっちにスクロールしているか判別 | web関連 | 二色人日記。
上スクロールか下スクロールか判別するソースコード var pos = 0; var currentPos = 0; $(window).on('scroll', function(){ scroll(); }); function scroll() { currentPos = $(window).scrollTop(); console.log("現在地:"+currentPos+", 移動前:"+pos); if( currentPos <= pos ){ console.log("上にスクロール中"); }else{ console.log("下ににスクロール中"); } pos = currentPos;//現在地保存 } $(window).trigger('scroll');// 上にスクロール中 失敗１：「currentPos」と「pos」が同じ数値になるときがある curr
jQuery 4.0β版が登場。バージョン3.0から8年振りのメジャーバージョンアップへ。IE10以前のサポートは終了に
jQuery 4.0β版が登場。バージョン3.0から8年振りのメジャーバージョンアップへ。IE10以前のサポートは終了に JavaScriptライブラリ「jQuery」の次期版として開発中の「jQuery 4.0ベータ版」が公開されました。 今年中にjQuery 4.0正式版がリリースされれば、2016年6月にリリースされたjQuery 3.0以来8年振りのバージョンアップとなります。ちなみにjQuery 1.0がリリースされたのは2006年ですので、jQueryの開発は18年にわたり継続されています。 IE 10以前のサポートが終了、Trusted Typesのサポート追加など jQuery 4.0ではInternete Explorer 10もしくはそれ以前のバージョンのサポートが終了します。Internet Explorer 11のサポートは継続されますが、次のjQuery 5.0で
何がjQueryを負債たらしめているのかを考察する | yamanoku Advent Calendar 2023
何がjQueryを負債たらしめているのかを考察する この記事はyamanoku Advent Calendar 2023の12日目の記事になります。 現代のフロントエンド技術的負債の要因となっているものはいくつかあると思いますが、その中でも共通で「jQuery」が挙げられるかなと思っています。長期間運営されているサービスであればまだまだ現役なのではないでしょうか？かくいうウチもそうです！ 2023年現在でのフロントエンド開発であれば今は新規でjQueryを選択肢としてあげることはほとんどないと思っていますが、今よりもJavaScriptのサポートが貧弱だったころ、かつてのブラウザ間の齟齬を吸収する点で大変重宝されていたようです。 JavaScript自体が進化してきたのもあり、jQueryでできた表現が単体のJavaScriptとWeb APIとで表現できるようになってきている1ので
jQuery 要素をコピーして追加し、IDを書き換える | OCテックノート
inputボックスの数を、ユーザーが任意に操作できるように、動的にinputボックスなどを追加したい場合があると思います。 //Html <div id="roots"> <div id="each_root"> <div class="detail"> <input type="text" name="root"> <input type="button" value="行き先を追加" onclick="addInput();"> </div> </div> </div> //Javascript function addInput(){ $("#each_root").clone().appendTo("#roots"); } ついでに、何かの用途のためにコピーした中身の、IDを連番でつけてそれぞれを識別したい場合、IDを次のように動的に書き換えます。 //Javascript 上記の
1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】 | InfinityScope
スクロールすると次のコンテンツへとつないでいき、商品やプロダクトなどを印象的にみせてくれる、1ページで完結するタイプのサイトを作成するときに参考にしたいパララックスやフリップ型などのjQuery Pluginを集めました。 1ページスクロールがつくれる jQuery Plugin特集【One Page Scroll】is a post from:InfinityScope 投稿全文を表示する - View All Content Follow Me : FaceBook Page InfinityScope 関連オススメ記事モバイルメニューを実装する多機能 jQuery plugin『mmenu』ページを縦横斜めに、滑らかにスクロールすることが出来るJS,jQueryプラグインから4選「Masonry」のようなPinterest風デザインを実装できる jQuery pluginをいくつかリ
【パララックスとは？】 Rellax.jsの使い方！｜株式会社ParaLux - 新しいあり方を創造する
私たちの社名にも使われている「パララックス」。英語では「parallax」といい、視差効果という意味があります。IT業界では、webデザインで2012年頃から用いられるようになり、今では多くのサイトがこのパララックスを採用しています！ 今回はこのパララックス効果をみなさんにご紹介したいと思います！ パララックスは、元々は写真用語で実際に撮った写真とカメラのファインダー内の像とがずれて写る現象のことを言います。 webデザインに用いられるパララックスも、「サイトを構成するパーツごとに動くスピードや向きをずらすスクロール効果」のことを言い、パララックスを用いることで、サイトに奥行きがでて、視差効果を楽しみながらスクロールすることができます。 この他にもパララックスを使うことで、以下のメリットがあると言われています。 見せたいものをピンポイントで見せることができるデザインの幅が広がるストーリー性
jQuery 3.7.0リリース。チェーン可能な新メソッドuniqueSort、単位なしのCSSプロパティなど追加
jQuery 3.7.0リリース。チェーン可能な新メソッドuniqueSort、単位なしのCSSプロパティなど追加 jQuery 3.7.0ではいくつかの機能追加、性能向上、バグフィクスが盛り込まれています。 機能追加では、新しく「.uniqueSort()」メソッドが追加されました。これは既存の「jQuery.uniqueSort()」と同じ機能をチェーン可能にしたものです。 uniqueSort()は要素の配列から順番を重複を排除してソートしたものを返します。 これは、いくつかの要素の並びからある要素よりも手前の要素の並びを返す[ .prevAll()」を、要素をラップする「.wrapAll()」と組み合わせたときに、ラップされた要素が逆順で返ってくるなどの問題を解決するために追加されました。 CSSプロパティでは、単位を省略した場合に自動的に「px」となるプロパティが7つ追加されまし
jQueryでパスワードの表示・非表示を切り替えるサンプル
jQueryでフォームのパスワードの表示・非表示を切り替えるサンプルを紹介します。 １．はじめに フォームのパスワードの表示・非表示を切り替える必要が生じたので、調べてみました。 この記事でサンプルを作ってみましたので、よければご利用ください。 ２．サンプル サンプルページから動作を確認できます。 ３．ソース コピー＆ペーストでそのまま使えると思います。 <html lang="ja"> <head> <meta charset="utf-8"> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> form { font
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応 8月にリリースされたChrome 105で実装されたCSSの疑似クラス「:has()」が、jQueryに以前から備わっている「:has()」に悪影響を及ぼし、一定の条件下ではjQueryを使ったWebサイトが壊れるなどの問題を引き起こすことがあることを、9月の下記の記事で紹介しました。 参考：Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 その後、Chrome側ではこの問題に対応する回避策が実装され、一方のjQuery側でも先日リリースされたjQuery 3.6.2で対応が行われたことが明らかになりました。 Chrome、jQueryそしてCSS
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
jQueryで入力フォームのコピー＆ペーストを禁止する｜BLACKFLAG
会員登録などの入力フォームでメールアドレスの登録ミスをしないように、メールアドレスの入力欄を入力用、確認用と2つ設けて入力をしてもらうことがあり、この2つの入力欄にメールアドレスを正確に入力してもらうために入力フォーム内でのコピー＆ペーストができないようにする仕様がよくあります。 このUIの良し悪しは別として、そのような入力フォーム内でのコピー＆ペーストの制御について、jQueryを使って簡単に実装する方法を紹介します。 「jQueryで入力フォームのコピー＆ペーストを禁止する」サンプルを別枠で表示 サンプル画面では2つの入力フォームを設けて、一つ目のフォームで入力したものをコピー及びカットする動作を禁止させ、二つ目のフォームでは入力する際のペースト（貼り付け）の動作を禁止しています。 この入力フォーム制御の全体構成についてまずはHTMLから。 ◆HTML <ul> <li>メールアドレス
リッチなファイルアップロードウィジェットが作れる「filepond」:phpspot開発日誌
GitHub - pqina/filepond: ? A flexible and fun JavaScript file upload library リッチなファイルアップロードウィジェットが作れる「filepond」 次のようなリッチなアップロードウィジェットが実現できます 関連エントリ ファイルアップロード前の名前、サイズ、MIMEタイプを得るjQuery 画像や音声ファイルをアップロード前にプレビューできる「jquery_upload_preview」
フォームをぐっと使いやすくする！ウィザード型jQueryプラグイン6選【2017年版】
Webサイトのフォームの作成にはjQueryのプラグインが便利。中でも対話形式の使いやすいフォームを作成できるjQueryプラグインを厳選して紹介します。 ページの更新がなく、指示に沿って記入できるjQuery用のウィザード形式のフォームを作成するためのjQueryプラグインがあります。ユーザーデータを一度に入力させる大きなフォームなら、ウィザード形式に変えることで、小さなステップの入力に分割できます。これならユーザーが長い入力フォームにうんざりすることもなくなり、進行状況も示しせます。 この記事ではおすすめjQueryフォームウィザードを6つ、それぞれの特徴を踏まえて紹介します。有料版や自作する方法も少し触れます。jQueryのフォームウィザードを求めている人の助けになれば幸いです。 1．jQuery steps jQuery Stepsはウィザード型のインターフェイスを簡単に作れる気の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
入力フォームをスライダー形式にグラフィカルにできる「jquery.formslider」:phpspot開発日誌
何日から何日迄の入力に便利な「date-ranges-selector」:phpspot開発日誌
複数選択、検索が可能なselectボックス実装「multi.js」:phpspot開発日誌
フォーム等での進捗状況表示に使える「Progress Tracker」:phpspot開発日誌