【脱jQuery】jQuery <=> vanillaJS 書き換え集
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」がWordpressで出る場合の解決方法。
Googleが提供するサイト診断ツール「PageSpeed Insights」の診断の項目にて「スクロールパフォーマンスを高める受動的なリスナーが使用されていません」が出る場合の解決策をシンプルにまとめました。 Wordpressを使ったサイトでは「comment-reply.min.js」と「jquery.min.js」の２つのソースが指摘されていると思いますので、この両方に対応します。 技術的な内容はページ下の別記事にまとめたので、本当にシンプルにいきます。 メモ この記事の内容はWordpress5.7時点で執筆しています。 WordPress6.5より「comment-reply.min.js」に同問題は出なくなりました。新しいバージョンになってやっと改善された様子です。 スクロール パフォーマンスを高める受動的なリスナーが使用されていませんの対処法 PageSpeed Insig
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
jQueryしか書けなかった自分がVueを使えるようになるまでの話と同じような環境の人たちへ - Qiita
この記事はVue #2 Advent Calendar 2019の10日目です。 昨日は @i-ryo さんの 【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた でした。 JavaScriptといえば、jQueryだった Vueを触る前はHTML+CSS+jQuery+WordPressが主な使用言語でした。以前は小〜中規模なWebサイト制作がメインだったので、JavaScriptを操作する場面というのは多くありませんでした。 使ってもハンバーガーボタンの操作やjQuery プラグインのスライダー、ちょっとしたエフェクト程度です。少なくとも状態管理をするような案件はほとんどなく、DOM操作がメインなのでjQueryで十分でした。 1つだけ状態管理をする案件があり、案件としてはVueに最適でしたが、jQueryでごり押しました。過去の自分に教えてあげたい。 V
JavaScript・jQueryを使用して特定の位置にスライドしたら発火させる【初心者向け】 - Qiita
$(function(){ $(window).on('scroll', function() { if($(this).scrollTop() + $(window).height() > $('.point').offset().top){ alert('発火!'); } }); }); 一応jsのif文の中身をサクッと解説すると、 $(this).scrollTop() → スクロールをしたheightの数値 $(window).height() → ブラウザのウィンドウのheightの数値 $('.point').offset().top → 画面トップから指定した要素（上記の場合はpointクラス）までのheight 図で表すとこんな感じです。 発火するときはこんな感じです。 多分間違えていないはず！
【jQuery】初回アクセス時のみポップアップ表示（jquery.cookie.js使用） | LIOT BLOG
jquery.cookie.jsは、PHPなどの環境がなくてもcookieを取り扱うことができるとても便利なjQueryのライブラリです。今回はこちらを用い、初回アクセスの１回だけ画面全体にLightbox風のオーバレイポップアップ画面を表示させる方法をご紹介します。 ※2019.4.15 一部ご指摘を受けたためコードを修正しました。 DEMOプログラムの動作デモページを用意しました。下記リンク先をご確認下さい。 » 初回アクセスのときのみポップアップ画面を表示させるサンプル 設置方法jQuery本体・jquery.cookie.jsの読み込みどちらもCDNで配布されています。下記コードをそのまま＜head＞内に記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></sc
jQueryで $ is not define エラーが出たときの一番簡単な解決法 | PisukeCode - Web開発まとめ
こういう $ is not defined エラーってjQueryを使ってると頻繁というほどでもないけど、よく見かけることが多いですよね。 でも実はこのエラーは大したものでなく、少しコードを直せば簡単に解決できます。 ここではエラーの原因とコード修正のやり方について具体的なコード例と一緒にまとめました。 このエラーが出てしまう原因 ずばり $ is not defined エラーの原因を一言でいうなら jQueryで読み込まれてない段階でjQuery関数を使おうとしているから たったこれだけの単純な理由です。 例えばエラーが出てしまうのは次みたいなコード例 <!-- jQuery読み込み前に実行 --> <script> $(function(){ $('#hoge').html('CANNOT execute'); }); </script> <!-- jQueryをCDNから読み込
jQueryからVue.jsへ乗り換えてみた - Qiita
はじめに この記事でQiitaデビュー？ですが、文書書くの下手くそなので、読みにくかったらすみません。 JavaScriptとjQueryで個人的に作りたかったマネーカウンター（コインカウンター）を題材に、仕事と趣味半々で作ってました。でも複雑怪奇になったのでVue.jsを使えば多分楽になると思って、移植しました。 なお、PWAとして まねかん と、 Cordovaでラッピングして Androidアプリ「まねかん」 がありますので、参考まで。 ソースは GitHub においてあります。 「まねかん」制作のアイデア 個人的にとある集会の会計をやっていて、小銭勘定を常に行う必要があったので、Excelで計算してたのですが、必ず手元にExcelがあるわけがないので、スマホアプリを作ろうと考えました。大元のExcelはこんな感じ。 ただし、スマホアプリを一から設計するだけの余裕と技量が無いので、W
カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2）|WD Online
2016.01.04 課題解決のためのUI実装講座 Web Designing 2016年1月号 カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2） スワイプ対応タブメニューを実装してみよう Text：町田なつみ、古川佑太朗 スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説していこう。 サンプルファイルダウンロードのご案内 このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。 ［SWIPE TAB 01］タブ部分を配置し横スクロールに対応させる それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さ
AMPのライブラリをjQueryの代わりに使う - Qiita
みなさん、jQuery、使っていますか？ 先日ウェブサイトの制作をある会社さんに発注したところ、jQuery満載のコードが納品されました。 「うわぁ…」ってなったんですけど、（主に発注ノウハウの）のいい勉強だなあと思ってjQuery排除のリファクタリングをしました。 リファクタリングしている中で、AMPのライブラリ便利だなあって思ったのでここにまとめます。 AMPとは？ Googleが推進している高速なWEBサイト表示技術です。 詳しくはこちらをどうぞ。 https://www.ampproject.org/ AMPのUIライブラリは非AMPページでも使える AMPに対応するためにはいろいろ規則を守らなければなりませんが、それを守っていられない案件もあるでしょう。 しかし、AMPのための公式JavaScriptライブラリは、非AMP対応ページでももちろん使用可能です。 基本はこれだけです。
jQuery Smart Wizard 4 - jQuery製のウィザードライブラリ
たくさんの入力欄があるフォームをまとめて入力するのは苦痛です。果てしなく続く入力欄を見ただけで気分が萎えてしまいます。そこで使えるのがウィザードです。入力欄をグルーピング、分割することで心理的負担を下げられます。 そこで使ってみたいのがjQuery Smart Wizard 4です。jQuery/Bootstrapをサポートしたウィザードライブラリです。 jQuery Smart Wizard 4の使い方 矢印形のウィザード。 サークル型。 ドット型。 モーダルウィンドウと組み合わせることも可能です。 jQuery Smart Wizard 4はjQueryとBootstrapというよくある組み合わせで使えるのが便利です。VueやReactなどのライブラリに依存することがないので、広くWebサイトで使えるでしょう。 jQuery Smart Wizard 4はjQuery/JavaScri
jQuery 3未満のXSS脆弱性を修正する方法。jQuery1/2は最新版でも必要。｜榊原昌彦
jQuery 3未満は、XSSの脆弱性を抱えています。 JVNは「リスク：低」に設定していますが、脆弱性として認定されてしまっているので対策しておくに越したことはありません。 対策jQuery 3にアップグレードすることが望ましいですが、それができない場合はjQueryを読み込んでるscriptタグのすぐ下に、以下を追記してください。 <script> jQuery.ajaxPrefilter( function( s ) { if ( s.crossDomain ) { s.contents.script = false; } } ); </script>これによって、Ajaxをつかって「異なるドメイン」からJavaScriptファイルを読み込むことができなくなります。 場合は、そのScriptは動かなくなります。 脆弱性をもっているかの確認方法Google ChromeのConsole
jQuery Validation Engineを利用する - Qiita
そもそもvalidation engineってなに？ form周りで便利なjQueryプラグイン。オープンソースで開発されている。ソースは以下のレポジトリから取得します。 https://github.com/posabsolute/jQuery-Validation-Engine フォームの正確なエラー判定は、実際にSubmitした後にシステム側でバリデーションして貰えばいい。 しかしそうすると、「え、年月日は半角じゃないとだめなの？」とか、不必要なストレスをユーザーに与える恐ればあり、UXの質が下がる。 またサブミットがされないようjsで制御する必要も出てくるし、submitをフックにその他いろいろなjsがあれば、干渉する可能性もある。 それが回避できても、すべてのモダンブラウザで入力した全データを（エラー後も）そのまま残すのはハードルが高い。 もし失敗してしまえば、ユーザーにとっては
2/5 jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About
jQueryで簡単！フォームをリアルタイムで入力チェック(2ページ目)ウェブ上のフォームでは、JavaScriptでリアルタイムに入力チェックし、その場でエラー表示のバルーンを出せると便利。jQuery-Validation-Engineを使えば、入力文字列や選択内容が指定条件(複数項目の組み合わせも可)を満たしているかどうかを入力と同時に確認し、ミスがあればエラーメッセージを吹き出しの形で表示可能。送信前に自動で入力チェックされる使いやすいフォームの作り方を解説。 jQuery-Validation-Engineを入手して読み込む方法2通り まずは、jQuery-Validation-Engineを使うための準備をしましょう。おすすめなのは、CDNから読み込む方法です。CDNから読み込めば、自サイト上には何も設置することなく簡単に利用できます。一方、ソースを自力でカスタマイズしたい場合は
![2/5 jQueryで簡単！フォームをリアルタイムで入力チェック [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/53261f4457e0fb42c78173601df18b35aa3e7ed4/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F2%2F0%2F3%2F2%2F7%2Ftopimg_large.png)
femtoJS - Really small JavaScript (ES6) library for DOM manipulation.
// Hi! // // ... } }, after: { argOrder: ['content'], argTypes: { content: 'string | HTMLElement | femtoJS' }, desc: 'If content is a' + ' string, append that HTML' + ' after the end of the elements. If' + ' it\'s a HTMLElement,' + ' append that element after the end of' + ' the elements. If it\'s a' + ' femtoJS object, append' + ' everything in its selection after the' + ' end of the elements.' +
高解像度画像を後読みするjQueryライブラリ [lazy-out.js] • Teletakt
lazy-out.js というスクリプトを作りました。 スクロールによる”Lazy Load”を簡単に実装できます。 “Lazy Load”というのはあらかじめ低解像度画像(Lazy-image)を読み込んで置いて、スクロールで可視範囲に入った時などに高解像度画像に置き換えるというものです。 サイズを縮小した低解像度画像を読み込んで都度置き換えていくので、ページ自体のリソースを少なくすることができます。 ちなみに僕みたいな素人が書きました。JS歴は10年ぐらいなんですが、自分で一回もまともに書いたことありません。 仕組みとして、jQueryで<img> の srcをイベントによって書き換えています。 GitHubにおいてありますので、どうにでもこうにでもしてください。 kurogedelic / lazy-out.js DEMOも置いてあります。 DEMO 使い方 まず<body>タグの終
某サイトに見る狂ったjQueryのソースと高速化・改善方法
自宅の光回線が遅すぎて乗り換えを検討していた矢先、Ymobileのキャンペーンページがやけにもっさりしているので、思わずソースを覗いてしまった。一流企業のソースはさぞかしモダンなのだろうと思ったら、jQueryで鬼のDOMいじり。思わず閉口してしまったので同じ轍を踏まないために改善方法を考えます。 経緯 我が家で契約しているSo-net光という回線が常時1Mbps/s以下という稀に見るクソっぷりなので、違約金を払ってでも回線を変更したいと考えていました。 まずなぜSo-net光にしたかと言うと、全ての業者と契約パターンの中で、最も運用費が安かったからです。キャッシュバックが56,000円・月額費用が2,800円・初月無料だったので21ヶ月使ってようやく料金が発生し始めるという計算です。ちなみに違約金は3万円ほどになる予定です。 そこで乗り換え違約金全額キャッシュバックのSoftBank光に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】jquery本体をdeferで読み込みつつ、インラインのjqueryを、本体の読み込み後に処理実行する方法【js】 | sakura*sakura
Jmap - 日本地図簡単表示ライブラリ(jQueryプラグイン)
jQuery で select タグに option タグを追加する - Qiita
