脱jQuery $(”#id”) | q-Az
脱jQuery その1 です。 本日より25日間連続で「脱jQuery」についての記事を「アドベントカレンダー」に投稿していきます。つたない文章力ですが、わかりやすく書くよう頑張りますのでよろしくお願いします。 方針本題の前に方針を少し。 jQuery の利用を否定するものではありません。 正確に jQuery ⇒ JavaScript を書き換えることよりも、「わかりやすく書き換える」に主眼を置きます。 間違った書き換えを行うというのではなく、jQuery オブジェクトと JavaScript の通常のオブジェクトの違いまでは考慮しないといった感じになります。 「jQuery のように JavaScript を扱う」を主眼においてなるべく JavaScript 独特な表現は避け、コピペでも使えちゃうよ、ぐらいの勢いで書いていきます。「jQuery は書けるのに JavaScript は書
【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 上記の
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 +
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
軽量のイメージギャラリー「Spotlight.js」:phpspot開発日誌
Spotlight.js Demo 軽量のイメージギャラリー「Spotlight.js」 画像を拡大したりスライドショーしたりという豊富な機能がありつつ軽量なギャラリーがつくれます 関連エントリ おしゃれなギャラリー風ページを作るデモ シンプルなグリッドベースのギャラリー実装jQuery「sampGallery」
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら） | 125naroom / デザインするところ（会社）です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> $(function(){ var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。 var urlHash = location.hash; // ハッシュ値があればページ内スクロール if(urlHash) { // 外部リンクからのクリック時 $('body,html').stop().scrollTop(0); // スクロールを0に戻す setTimeout(function(){ // ロード時の処理を待ち、時間差でスクロール実行 var target = $(urlHash);
ボタンをクリックする度に少しスクロールするカスタマイズ！ | Fantastech（ファンタステック）
きっかけはAmazon これまで、たくさんのカスタマイズに挑戦してきたんですが、すべて満足な結果になったわけではなく、少しだけ「妥協」したカスタマイズもありました。 その中でも特に悔しかったのが「横スクロール」にするカスタマイズ。シンプルなカスタマイズにしようとした結果、パソコンでの操作性が悪くなってしまったんです。 パソコンで横スクロールする方法がわからない方もいると思うので、この為にわざとスクロールバーを太くしました。 スペースをクリックすると横スクロールすることも…わかってくれるよね！きっと！ 良いアイディアが思いつかず、そのままにしていたんですが、パソコンで「Amazonのサイト」を見て閃きました。 「あ、左右のボタンでスクロールできれば解決じゃん」 ボタンをクリックする度にスクロールさせたい はい、ということで、今回挑戦したのは、Amazonのサイトのように「ボタンをクリックする
途中からヘッダー固定にする方法！画面上部までスクロールされたら固定する | HPcode（えいちぴーこーど）
途中からヘッダー固定にする方法 HTML ヘッダーメニューの作り方です。5つのメニューが並ぶシンプルな構成です。JavaScriptと連動させる大事な部分としては、#global-navになります。 （ここだけは確実に合わせる） <nav id="global-nav"> <div class="inner"> <ul class="global-list"> <li class="global-item"><a href="#section1">セクション１</a></li> <li class="global-item"><a href="#section2">セクション２</a></li> <li class="global-item"><a href="#section3">セクション３</a></li> <li class="global-item"><a href="#sect
シンプルな画像ズームjQueryプラグイン「ZoomIt」:phpspot開発日誌
ZoomIt シンプルな画像ズームjQueryプラグイン「ZoomIt」 マウスオーバーでオーバー箇所をズームインできます 関連エントリ 画像をホバー時にJavaScriptなしでズームする ECサイトなどに使える画像のカーソル部分ズームjQueryプラグイン「xZoom」
テキストを文字数で自動省略できるjQueryプラグイン「limit-text」:phpspot開発日誌
GitHub - mykisscool/limit-text: This jQuery plugin will truncate text to a specified number of characters without splitting a word in half. テキストを文字数で自動省略できるjQueryプラグイン「limit-text」 サーバサイドでやらなくてもよいのは便利かも 関連エントリ 3Dでアニメーションするスライドショーを作れる「jquery-rsSlideIt」 FB/Google/Twitterへのシェアボタンを簡単に作れる「jquery.sharebox」 どんな要素もblinkさせられる「jquery.blink」
jQueryでチェックボックスを操作するさまざまな方法
jQueryでチェックボックスのチェック状態や値の取得、チェックを付けたり外したり、チェック数の制限などさまざまな方法をご紹介します。 通常のイベントでは動かない、jQueryイベントで追加したチェックボックスの操作方法なども併せてお伝えします。 attr() は使わない attr()を使ったチェックボックスの操作は不具合が生じるため、本ページではチェックボックスの取得やチェック等の操作にattr()は使っておりません。 ※もちろん、それ以外については通常どおりattr()は使いますよ。 チェックボックスの取得 チェックが入っているかの状態や、チェックボックスの値を取得、また複数のチェックボックスの値を配列に格納する方法です。 チェックの状態を取得 チェックの状態を取得する3つの方法を一気にご紹介します。 HTML
jQueryで画面から見切れない固定型ナビゲーションメニューを実装する方法｜BLACKFLAG
スクロールすることによってサイドカラムに配置しているナビゲーションメニューを 画面上部に固定してスクロールに合わせて追従させる動作はよく見かけますが だいたいが画面上部に固定のみ、もしくは画面下部に固定のみ、といったものが多く ブラウザウィンドウの高さよりもナビゲーションメニューの高さが大きかった場合には ナビゲーションメニューが見切れてしまうものが多く見られます。 そんなスクロール追従型のナビゲーションで メニューエリアが見切れないようにスクロールに合わせて 画面に固定されつつメニュー部分だけをスクロールさせる 固定型ナビゲーションメニューをjQueryを使って作ってみたのでご紹介してみます。 「jQueryで画面から見切れない固定型ナビゲーションメニューを実装する方法」サンプルを別枠で表示 なかなか文章で説明するのも難しいので サンプル動作からご確認ください。 サンプル画面左側のナビゲ
スクロールで上か下かを判断してコールバック「jquery.scrollDetection」:phpspot開発日誌
GitHub - melbon/jquery.scrollDetection: jquery.scrollDetection detects your scroll position /up or down/ スクロールで上か下かを判断してコールバック「jquery.scrollDetection」 スクロール後に上にいったか、下にいったかを実現しようとすると、元の位置を記録しておいて数値の差がマイナスがプラスかで上か下かを判断する必要がありますが、こちらを使えばシンプルなコードでそれが実現可能です。 上に戻った場合はナビを表示するといったケースに使えそうです 関連エントリ スクロールと同時にアニメーションする様々なパララックスエフェクト実装「paroller.js」 スクロールでサイドに付いてくる枠を作れる「floater」 スクロール要素にプログレスバーを付けられるjQueryプラグイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カスタマイズ性の高いツールチップ実装「jTippy」:phpspot開発日誌
darsa.in
[jquery]複数のチェックボックスで、一つも選択されてなかったらアラートを出す。 - Qiita![[jquery]複数のチェックボックスで、一つも選択されてなかったらアラートを出す。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9702cde77f5092519398ab2ad18862eaf288e1ed/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCanF1ZXJ5JTVEJUU4JUE0JTg3JUU2JTk1JUIwJUUzJTgxJUFFJUUzJTgzJTgxJUUzJTgyJUE3JUUzJTgzJTgzJUUzJTgyJUFGJUUzJTgzJTlDJUUzJTgzJTgzJUUzJTgyJUFGJUUzJTgyJUI5JUUzJTgxJUE3JUUzJTgwJTgxJUU0JUI4JTgwJUUzJTgxJUE0JUUzJTgyJTgyJUU5JTgxJUI4JUU2JThBJTlFJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgxJUE2JUUzJTgxJUFBJUUzJTgxJThCJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgyJTg5JUUzJTgyJUEyJUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgyJTkyJUU1JTg3JUJBJUUzJTgxJTk5JUUzJTgwJTgyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03MDkzNWE4YTkzYWIxYjE1ODM4NGU2NGU3YTgzMzUxOQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBnZXNoaSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9N2U4NmVmMmM3NGUyYTg4ODc4ZWNjNzM0N2ZkOWFiNWE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D5db3d8eb99d2aa24e0f88551b06318c4)
finefinefine.jp