Cheat sheet for moving from jQuery to vanilla JavaScript
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling them, animating them, and fetching data—things that jQuery was great at. With broad browser support of ES6 (over 96% at the time of writing), now is probably a good time to move away from jQuery. I recently re
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
Dialog - jQuery UI API 1.8.4 日本語リファレンス - StackTrace
解説 高機能なダイアログウィジェットです。 dialog は、タイトルバーとコンテンツエリアを持つ、フローティングウィンドウです。 デフォルトでは、移動、リサイズすることができ、右上の "x" ボタンでウィンドウを閉じることができます。 コンテンツの大きさが最大値を超えた場合は、スクロールバーが自動的に表示されます。 書式 依存ファイル jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.position.js jquery.ui.draggable.jsオプション jquery.ui.resizable.jsオプション 引数 optionsオプション 関数 String: "destroy"、 "disable"、"enable"、"option"、"widget"、"close", "isOpen", "
.find() | jQuery 1.9 日本語リファレンス | js STUDIO
サンプル .children()との違いは、.children()は１つ下の層である子要素のみを対象とするのに対し、 .find()は子孫要素全てを対象とします。 次のような入れ子になったリストのコードがあった場合、 <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li
jQuery でセレクトボックスのプルダウン項目（option 要素）を追加／削除する方法
フォームオブジェクトの中でも、セレクトボックスの操作は少し特殊です。記述方法を覚えてしまえば問題ないのですが、同じようなミスをして調べる機会が多いのもセレクトボックスの特徴ではないでしょうか。 jQuery を使えば、様々な需要に合った操作ができるようになります。ここではプルダウン項目の追加・削除について触れますが、基本となるセレクトボックス操作の知識は必要不可欠なので、ぜひ次の記事も一緒に確認していただければと思います。
2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
jQuery のセレクタをキャッシュしてみたら180倍くらい早くなった。 キャッシュすべし！ | Freelance Journal フリーランス ジャーナル
初心者だった頃、誰しも一度くらいはこんな感じのコードを書いたことがあるのではないでしょうか？ $('#js-button').on('click', function () { $(this).text('click'); }); $('#js-button').on('mouseenter', function () { $(this).text('mouseenter'); }); このコードのどこが問題かというと、$('#js-button')を2回、$(this)を2回書いてしまったところです。 全く同じ処理を4回も行うのは明らかに非効率ですよね。 だから、以下のように、一旦戻り値のjQueryインスタンスオブジェクトを変数にキャッシュしておいて、あとからその変数を参照するようにしたほうが処理が1回で済むので、パフォーマンスが良いです。 var $button = $('#js-b
jQueryでvideoやaudioを再生したい時はオブジェクト取得方法に注意が必要
jQueryでvideoやaudioを再生したい時はオブジェクト取得方法に注意が必要 2017/2/10 2019/9/5 JavaScript, プログラミング HTML5タグになって新しく登場したvideoタグ、audioタグ、canvasタグ。特にvideoタグは使用する機会も多くあり、HTML1つで動画を再生できることのありたがみを感じています。 そんなvideoタグやaudioタグをjQueryで再生したい時に注意しておきたいことについて紹介いたします！ audioタグを例にとって説明！audioタグに埋め込みした音声ファイルをJavaScriptから再生 audioタグを例にとって説明してみます！ jQueryの基本は「命令をしたい場所」を決めて、命令を実行するという流れです。 まずはjQueryでaudioタグを取得し、その後取得した要素（音声）を鳴らすための、play()と
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
【Javascript】colspan、rowspanをJavascriptでセットするとき at softelメモ
テーブル（table）要素をjavascriptで動的に生成、操作するとき、colspan、rowspanをセットするときは、属性名をcolSpan、rowSpanで指定する。全部小文字で大丈夫な場合もあるが、現時点では素直にcolSpan、rowSpanと、Sを大文字で書くのがよさそう。 以下の説明で、変数 td や ID #xxxx は適当なTD要素とする。 基本は col”S”pan と大文字にする //直に td.colSpan = "3" //DOM関数で td.setAttribute("colSpan", "3") //jQueryで $("#xxxx").attr("colSpan","3") 今風の書き方 + 最近のブラウザ（Firefox、IE8、Chromeなど）の組み合わせなら、小文字でも大丈夫だった 古いブラウザ（IE7など）はダメ。 //DOM関数で td.se
Google Charts サンプル
https://www.itdashboard.go.jp/PublicApi/getData.json?dataset=BasicInformation&year=2014&field=organization&option=count グラフ作成手順 環境準備 jQueryとGoogle Chartsを利用するための<script>タグを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> パッケージ読み込みとコールバック グラフ作成に必要なパッケージを
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
Javascriptでのiframe操作tips(iframeの中身を差し替える) - Qiita
追記(2016/05/05) コメントでご指摘いただきました。 過去のソースにアクセス出来ない＆Javascriptの知識が浅いので経緯がわからない状態ですが、 iframe elementの取得方法と、iframe内のコンテンツの更新方法を下記のように置き換えないと動かないようです。ご注意ください。 document.getElementById('iframe_id')[0].contentDocument.location.replace('target_url or target_path'); ↓ document.getElementById('iframe_id').contentWindow.location.replace('target_url or target_path'); 追記ここまで。 以下、2014年に投稿した記事です。 コンテンツの更新システムを作る場合な
Usage Statistics and Market Share of JavaScript Libraries for Websites, August 2024
Top Site Usage Market Position PerformancePage Speed BreakdownRanking Content Management Server-side Languages Client-side Languages CSS Frameworks Web Servers Web Panels Operating Systems Web Hosting Data Centers Reverse Proxies DNS Servers Email Servers SSL Certificate Authorities Content Delivery Traffic Analysis Tools Advertising Networks Tag Managers Social Widgets Site Elements Structured Da
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery.map() | jQuery API Documentation
GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:
脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az
click event | jQuery API Documentation
Historical quarterly trends in the usage statistics of javascript libraries for websites, June 2024