タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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
【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ 2019 12/15 最近では脱jQueryの流れがきている、という情報を目にしてさっそく脱jQueryしてみることに。 ...と思ったのですが、いざやってみるとかなり苦労しました。 なので、今回はその備忘録としてjQueryからネイティブJS（Vanilla JS）への書き換え方をまとめていこうと思います。 というか、本当に脱jQueryしたほうがいいの？ ということは一旦置いておいて、好奇心の赴くままにやっていきましょう。 ちなみに、『Vanilla JS』というのはフレームワークとかの名前ではなく、ただのJavaScriptのことです。 ※ 書きかけの部分やら中途半端なもありますが、ご了承ください。
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では、ドキュメントペ
この記事はミツエーリンクスアドベントカレンダー2019の2日目の記事です。 脱jQueryするべきなのか jQueryは、JavaScriptをより簡易的に記述することができ、各ブラウザへの互換性を持つため非常に便利なライブラリです。しかし、リソース読み込みによるパフォーマンスの低下も懸念されています。 表示パフォーマンスに目が向けられている昨今、jQueryを利用しないことも1つの選択肢になるのではないでしょうか。 また、ブラウザも進化しておりブラウザごとにJavaScriptの動作が変わることもほとんどなくなりました。 もしかしたら、もともとクロスブラウザ対応として生まれた側面が強いjQueryを利用しないタイミングが来ているのかもしれません。 jQueryを無理にやめようとしない とは言え、いままでjQueryを使って書いてきたコードをすべてネイティブに書き換えるには、覚えること・考
こんにちは！フリーランスディレクター兼エンジニアののせっち@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が現れた当時ブラウザ戦争の真っ只中で各ブラウザの仕様がバラけていたのをうまく吸収することで実装しやすくしたことや、有志による様々なプラグインの開発、それまで難解だ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Bootstrapは開発者でも整ったデザインが簡単に実現できる便利なUIフレームワークですが、jQueryに依存している点がいけてません。jQueryは便利ですが、今時…と思ってしまっている人も多いでしょう。実際、次期バージョンのv5からはjQueryを外すといわれています。 そんなBootstrapについて、現在のv4、そしてv3についてもjQueryを外したソフトウェアがNative JavaScript for Bootstrapになります。 Native JavaScript for Bootstrapの使い方 こちらはv3。 v4。JavaScript部分もちゃんと動作します。 Native JavaScript for BootstrapはjQueryを純粋なJavaS
【脱jQuery】.load()で別ページから共通パーツを読み込むのをネイティブに書き換え｜クリエイターブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
こんにちは。なかなか梅雨が明けずバイク乗り、自転車乗りの方はロードバイクに跨がれない季節を迎えていますが、今回はroadではなく、loadです。ウェブラボクリエイターズメモです。 過去の記事で「jQueryで外部にあるHTMLを読み込む」について書きましたが、 今回はそれをもっと簡単に記述できるjQueryの「.load()」メソッドと、ネイティブJavascriptにこだわりを持つマニアの方々へ書き換えJavascriptを紹介します。 先にデモページをどうぞ DEMO jQuery「.load()」メソッド 「.load()」をネイティブJavascriptに書き換え jQuery「.load()」メソッドでパーツのみを読み込み パーツのみ読み込みの書き換えJavascript 1.jQuery「.load()」メソッド jQueryの.loadメソッドを使えば、他ファイルからHTML
こんにちは！フリーランス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
// HTMLElement | 存在しない場合はnullを返す //IDを持つ要素を取得 document.getElementById('hoge'); //HTMLCollection | 存在しない場合は、空のHTMLCollectionを返す //タグで取得 document.getElementsByTagName('p'); //HTMLCollection | 存在しない場合は、空のHTMLCollectionを返す //クラス名で取得 document.getElementsByClassName('hoge'); //HTMLElement //マッチした最初の要素のみ取得 | 存在しない場合はnullを返す document.querySelector('.hoge'); //NodeList //マッチした要素をすべて取得 | 存在しない場合は空のNodeListを
簡単な 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 class="fa fa-clipboard" aria-hidden="true"></i> <span id="clipb
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【脱jQuery】jQuery <=> vanillaJS 書き換え集
【脱jQuery】モダンなJSの書き方 - Qiita
【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ | WEMO
「Bootstrap 5」のアルファ版がリリース、脱jQueryやCSSカスタムプロパティの強化など
脱jQueryに向けた第一歩 | フロントエンドBlog | ミツエーリンクス
【脱jQuery】スクロールでふわっと出現するアニメーションをJavascriptのみで実装
オジサン、脱jQueryを試みる - 漂うマークアップエンジニア
Native JavaScript for Bootstrap - 脱jQueryしたBootstrap
【脱jQuery】Javascriptのみでスムーススクロールを実装【コピペ】
【脱jQuery】よく使うJavaScriptの書き方 - 要素の取得、ループ処理、クラス名の追加・削除など
tt-lions.jp
www.udemy.com
togetter.com
originalnews.nico
tt-lions.jp
www.sponichi.co.jp