jQueryからネイティブJavaScriptへ置き換えの第一歩 - Qiita
この記事はJavaScript Advent Calendar 2016の9日目の記事です。 jQueryのセレクタはめちゃくちゃ楽なので多用しているのですが、最近ちょこちょこRiot.jsを使い始めたこともあり、jQueryを使うのもいいけど出来れば外部ライブラリは最小限にして書きたいよねーってことで、jQueryでこうやって書いてたの、ネイティブのJavaScriptで実現する場合どうやるんだっけ？という備忘録。 jQuery3.1.1 GoogleChrome54で検証 HTML5が解釈できるWebブラウザなら動くはず (IE？知らない子ですね……) セレクタ Selectors API jQueryでお馴染みCSSセレクタライクのセレクタをネイティブなJavaScriptでも使えるように実現しているのがSelectors APIです。 覚えるのはたった2つだけ！ document.
最新版で学ぶwebpack 5入門 - Babel 7でES2023環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
jQueryで動的にhiddenのinputタグを生成する方法 - 万年素人からHackerへの道
stackoverflow.com $('<input>').attr({ type: 'hidden', id: 'foo', name: 'foo[]', value: 'bar' }).appendTo('form'); とやれば、 動的に <input type='hiddne' id='foo' name='foo[]' value='bar'></input> ができる。 jQuery最高の教科書 作者: 株式会社シフトブレイン出版社/メーカー: SBクリエイティブ発売日: 2013/11/26メディア: 単行本この商品を含むブログ (5件) を見る
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
初めてのVue.js（jQuery脳からの移行をメインに） - Qiita
記事概要 jQueryベースでWebブラウザベースのアプリ書いている人がVue.jsに手を出すとしたら、「こんな風にやってみると分かりやすいかも？」と言う話。ES5 前提です。 Vue.jsの特徴として、他のフレームワークとの混在が容易、ってのがある。なのでjQueryとの共存も可能。今回の例では「inputタグなどの入力インターフェースにのみVue.jsを適用し、設定パネルのスライドダウン／アップなどの表示系DOMの操作はjQueryでのコードをそのまま流用」という方針で組んでみた。 「Vue.jsとは何ぞや？」は下記の公式ガイドを参照のこと。 https://jp.vuejs.org/v2/guide/ Vue (発音は / v j u ? / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolith
jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ - Qiita
知ってるよって？ 知ってる人には当たり前、でも知らない人はかなり躓くんだよ！ 事象 こんなボタンを作るじゃろ <div class="btn-area"> <button type="button" class="add-btn">ボタン1</button> </div> $(".add-btn").on("click", function () { var num = Number($(this).text().replace("ボタン", "")); var html = '<button type="button" class="add-btn">ボタン' + (num + 1) + '</button>'; $(".btn-area").append(html); }); 「ボタン1」をクリックするたび「ボタン2」が増えるね だがしかし！ 「ボタン2」をクリックしても何も起きない！
jQueryへの依存を外す方法 - dely engineering blog
こんにちは！dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち（ @takaoh717 ）が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。 tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください！ はじめに ここ一年間で Web 版 kurashiru のフロントエンドは Rails から Vue の SPA へと少しづつ置き換えられ
株式会社ジェイクール【ホームページ更新代行・制作】
jQueryで作成するアコーディオンメニューやスライドショー、ギャラリーなどは、 部分的に非表示にし、マウスクリックやマウスオーバーで表示させる仕組みのものが大半です。 ページのレンダリング時に一瞬「非表示」が効かず全部が表示されてしまう、 といったことがあります。 ブラウザの性能や回線速度にも依存すると思いますが、 環境が悪い程表示されてしまう時間は長く、何とも残念な見た目になります。 ブラウザの読み込みルールに沿ってjavascriptを書き換えるなど対策は色々と考えられますが、 手っとり早いのは該当部分をCSSで非表示にしておき、javascript読み込み段階でフェードインさせる方法です。 【記入例：#mainimgをどうにかしたい場合】 ■CSSへの追記 #mainimg { display: none; } ■該当javascriptへの追記 $('#mainimg').fad
JavaScriptのappendとappendChildの違い - みかづきブログ その3
すごく昔に、jQueryで書いたコードをjQuery無しで書き直す作業を行っていたのですが、 $body.append($wrapper); 的なコードを、 document.body.appendChild(wrapper); という感じに書き換えようとして、 document.body.append(wrapper); としてしまいました。 で、発覚までに時間がかかったのですが、 原因として、appendというメソッド、IE、Edge以外には存在するんですね。 https://developer.mozilla.org/ja/docs/Web/API/ParentNode/appenddeveloper.mozilla.org IEでテストして初めて己の過ちに気づきました。 せっかくなので、appendとappendChildの違いをまとめておこうと思います。 appendChild
偏見？参考にならないjQueryのページの見分け方 - Qiita
最初に 独断！参考にならないJavaScriptページの見分け方 こちらの記事が秀逸だったので、触発されてjQueryに寄った記事を書いてみようと思います。 動機 jQueryも随分と広く使われるようになり、『JavaScript使えます』って意味合いの中にjQueryしか使えないってのも含まれてしまうようになったりするのも若干なんだかなぁとは思いますが、 それはさておき、「チームメンバーになんでこんな書き方してんの？」って聞いたらそういう書き方をしているページが検索で出てきたりして…そういう苦い思い出を思い返しながら、この記事を書こうと思います。 この記事の対象者 コピペで動けば良いやという人以外 コピペより先にまだ進めていない人 この記事を書いてる人のスペック PHPというかLaravelが好き JavaScript始めたのはprototype.jsの頃 ES6まだよくわかってないです
[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有) | onocom
表を検索したい！簡単に！都道府県別にある情報を簡単に絞り込みたい。というご要望。 セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索（絞り込み）する。 というかたちで実装を考えました。 テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。 jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。 参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。 動作デモ・ソースコード
![[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有) | onocom](https://cdn-ak-scissors.b.st-hatena.com/image/square/2930b98b2785f3bff772a8d2c4da8fbfbcab53b5/height=288;version=1;width=512/http%3A%2F%2Fonocom.net%2Fblog%2Fwp-content%2Fuploads%2F2017%2F03%2Fsearch_1488601984.jpg)
jQueryのprop()でdisabled属性を切り替える - Qiita
buttonタグなどのdisabled属性の切り替えを、jQueryのprop()によって切り替える方法です。
jQueryでURLとパラメータを取得する方法：location
jQueryで現在表示中のページのURLとそのパラメータを取得する方法を説明します。 if文を使うことで、URLやそのパラメータによって表示を切り替えることができるので頻繁に見る処理です。 locationを使用した方法 jQueryでも、JavaScriptでデフォルトで用意されているLocationオブジェクトを利用できます。 Locationオブジェクトでは、「location.プロパティ」のようにプロパティ（パラメータなど）を指定することで、簡単にURLとその情報を取得できます。 JavaScriptにおけるlocationのサンプル たとえば以下のURLが表示中だとします。 「http://www.example.com:8080/page.html?page=2#pagetop」 URLやドメイン、パラメータを取得する例は以下のようになります。 URLを取得する URLの全体を
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
JQueryで読み込み時とリサイズ時にブラウザサイズに横幅を合わせる - Qiita
レスポンシブデザインとかの横幅100%をJQueryで処理 こんな時に便利 video要素ではwidthおよびheight属性は、パーセントでの値指定が出来ない レスポンシブデザインされていないページを処理する場合 読み込み時とリサイズ時を同時に処理する 読み込み時だけで処理するとブラウザサイズを変更した時に対応出来ないので、 JQueryではloadとresizeを合わせて記載すればOK!
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
<a href="tel:***">リンクをスマートフォン端末以外では無効にする - Qiita
非常に利便性の高い実装ですが、レスポンシブWebデザインでサイト制作をする場合には、PC端末等での閲覧・操作時に予期しない挙動となる場合があります。 "tel:" リンクを【スマートフォン端末以外では無効】にする方法はいくつかありますが、 「カスタムデータ属性の追加」といったHTML側の調整が必要ない 余計なDOMの書き換えが発生しない という条件では以下のシンプルな実装が考えられます。（jQuery使用） var ua = navigator.userAgent.toLowerCase(); var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua); if (!isMobile) { $('a[href^="tel:"]').on('click', function(e) { e.preventDefault(); }
「tel」を指定したaタグをPCだけ削除する[jquery]
まえがき iPhoneやandroidは「tel」プロトコルを使用すれば、そのリンクをタップすると番号発信を行うということが可能になります。 ■具体例 <a href="tel:0012345678">電話する</a> しかし、「tel」プロトコルが指定されたリンクをPCで開こうとすると当たり前ですが開けません。 そうなると、例えばレスポンシブ対応のサイトを制作する場合、HTMLの構造は基本的にPC、スマホともに同じなので「tel」プロトコルを使用するとなるとPCにも反映されてしまいます。 困りますね。 ということで、この記事ではPCでアクセスされた時のみ「tel」プロトコルが指定されたaタグを削除する方法を紹介したいと思います。 jqueryです。 PCのみ「tel」プロトコルが指定されたaタグを削除する方法 HTMLの「tel」プロトコルの指定 HTMLの方に若干細工を施します。「te
![「tel」を指定したaタグをPCだけ削除する[jquery]](https://cdn-ak-scissors.b.st-hatena.com/image/square/091edb0e74083d2dc5c10dc1b5def26877f14c51/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Ftel.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Double Scrollbar For Scrollable Container - jQuery DoubleScroll