jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
はじめに 普段、Ruby On RailsでMPA（マルチページアプリケーション）による開発をメインに行っています。 最近「jQueryを使わない」という話しをチラホラ見かけるようになりました。その辺を調べていくうちに自分も「jQueryを使うのやめよう」と思いました。しかし、jQueryに慣れてしまっていて、プレーンなJSで書く方法がパッと出てこなかったので、その辺りを備忘録としてまとめてみました。 jQueryでよく使っていた機能 自社内のプロダクトでjQueryの利用状況をざっと見たところ、利用されている機能としては次のものが多かったです。 セレクタ Ajax イベント ループ それぞれプレーンJSでの記述例を書いておきます。 単一セレクタの例 jQuery
CSSフレームワーク「Bootstrap」の最新バージョンである「Bootstrap 5」がアルファ版としてリリースされました。バージョン5ではjQuery依存からの脱却や、Internet Explorerのサポート終了によるCSSカスタムプロパティの強化など、数多くの新機能が追加されています。 Bootstrap 5 alpha! | Bootstrap Blog https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/ 目次 ◆ドキュメントページやロゴのデザイン変更 ◆jQueryとJavaScript ◆CSSカスタムプロパティ ◆ドキュメントの改善 ◆フォームの改善 ◆ユーティリティAPI ◆グリッドシステムの強化 ◆ドキュメントの生成方法変更 ◆ドキュメントページやロゴのデザイン変更 バージョン5では、ドキュメントペ
こんにちは！フリーランスディレクター兼エンジニアののせっち@nosecchi01です。 スクロールでふわっと要素を出現させるアニメーションを、Javascriptのみで実装します。 jQueryは使いません。 元々jQueryで使っていたコード（スニペット）を元にjavascriptに書き直した形なので、下記のような方にもオススメです。 「jQueryはわかるけどJavascriptはイマイチ・・・」「jQueryを使わずにバニラjsで書いてみたいけど、正直自分で書くのは面倒。」 それではいってみましょう！ 目標物を確認 早速コードペンで見てみましょう！ jQueryと比較するとわかりやすいので、jQuery、Javascriptを両方記載します。 jQuery jQueryで書いたものが下記です。 See the Pen scroll-in(jQuery) by Yuki Nose (@
オジサンはマークアップエンジニアである。 DBから情報を非同期で引っ張ってきてコンテンツを表示したり、バナーを表示する仕組みは基本的にフロントエンジニア任せだが、デザインに関わる部分、例えばモーダルやアコーディオン等はオジサンが基本部分を実装してフロントエンジニアに引き渡すのである。 そんなオジサンは手軽にDOM操作ができるjavaScriptのライブラリであるjQueryをずっと使ってきたのだが、ここ2、3年の間に生のjavaScriptでもDOM操作が割と手軽にできるようになってきているので去年あたりから情報収集したり、実際にコードを書いて試したりもしている。 jQueryが結構長い事Web制作で使われていたのは、jQueryが現れた当時ブラウザ戦争の真っ只中で各ブラウザの仕様がバラけていたのをうまく吸収することで実装しやすくしたことや、有志による様々なプラグインの開発、それまで難解だ
// HTMLElement | 存在しない場合はnullを返す //IDを持つ要素を取得 document.getElementById('hoge'); //HTMLCollection | 存在しない場合は、空のHTMLCollectionを返す //タグで取得 document.getElementsByTagName('p'); //HTMLCollection | 存在しない場合は、空のHTMLCollectionを返す //クラス名で取得 document.getElementsByClassName('hoge'); //HTMLElement //マッチした最初の要素のみ取得 | 存在しない場合はnullを返す document.querySelector('.hoge'); //NodeList //マッチした要素をすべて取得 | 存在しない場合は空のNodeListを
こんにちは！フリーランスWebディレクター兼エンジニアののせっち@nosecchi01です。 Javascriptのみでスムーススクロールを実装してみましょう。 僕はこれまでjQueryで実装してきましたが、Javascriptでも簡単に実装できます。 それではいってみましょう！ 目標物を確認 早速コードペンで見てみましょう！ See the Pen Smooth Scroll (Javascript) by Yuki Nose (@yukinouz1) on CodePen. 下記のような仕様です。 const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]'); for (let i = 0; i < smoothScrollTrigger.length; i++){ smoothScrollTrigger[i
簡単な JavaScript で HTML の表示要素をクリップボードにコピーする(iPhone 対応、脱 JQuery)
簡単な JavaScript で HTML の表示要素をクリップボードにコピーする(iPhone 対応、脱 JQuery) 例えばプロダクトキーや API キーなど、長くて複雑な文字列を、訪問者に提供している場合、この機能を提供することで、訪問者のクリップボードに文字列をコピーして、その後はペーストだけすればよい、という形で利便性を高めることができます。 JavaScript で記述していますので、脱 JQuery / 非 JQuery を望まれる方にもご利用いただけます。 HTML<p id="campaign-code">VjBpRLpQkr5GniGG7J5PxUa7CXmZKuzD</p> <p><a href="javascript:void(0);" onclick="javascript:clipboard();" style="cursor: pointer;"><i cl
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【脱jQuery】jQuery <=> vanillaJS 書き換え集
【脱jQuery】モダンなJSの書き方 - Qiita
「Bootstrap 5」のアルファ版がリリース、脱jQueryやCSSカスタムプロパティの強化など
【脱jQuery】スクロールでふわっと出現するアニメーションをJavascriptのみで実装
オジサン、脱jQueryを試みる - 漂うマークアップエンジニア
【脱jQuery】よく使うJavaScriptの書き方 - 要素の取得、ループ処理、クラス名の追加・削除など
【脱jQuery】Javascriptのみでスムーススクロールを実装【コピペ】