jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
クライアントのリクエストがあり、超クールなjQueryプラグイン・Isotope（アイソトープ）をWordPressに導入できないかを調べましたので覚え書きです。 まず結論から言うと、『Isotope for WordPress』という素晴らしいWPプラグインがあり、これを利用してWordPressにIsotopeを組み込むことが可能です。（完全に検証できてないけど～） まずはIsotopeを入手し、サーバーへアップロード本体はjQuery Isotopeからダウンロードできます。個人使用は無料ですが、個人でも商用やデベロッパーは有料ライセンスを購入します。 基本的に必要なのは本体ファイルのみです。ダウンロードしたら、今度は利用中のWPテーマのフォルダ内にアップロードします。 ../テーマファイル名/js/isotope.pkgd.min.js のような感じです。 WPプラグインIsoto
この記事のショートリンクを取得 <a href='https://wp-doctor.jp/blog/?p=2526' target='_blank'>WordPress(ワードプレス)のTypeError: $ is not a functionエラーの解決方法について</a> WordPressの最新バージョンではjQueryがデフォルトで読み込まれます。さてこのjQueryの関数をテーマ等で呼ぼうとすると、TypeError: $ is not a function と定義されていないというエラーが出てしまいます。今回はこのエラーの解消法と、ワードプレスの本体に組み込まれているjQueryを安全に利用する方法を解説いたします TypeError: $ is not a functionエラーの修正方法 ワードプレスでjQueryが読み込まれていることをまずご確認ください サイトにJq
Ajax通信をウェブサイトに実装している場合、Ajax通信がローディング中は、画面上にくるくる（スピナー）などの表示があると、サイト閲覧者にとってローディング中ということが理解でき、良いデザインだと思います。 今回は、そのような場合に使用できるソースコードの例となり、jQueryを利用しAjaxのローディング中にスピナーを表示させます。 Ajaxのローディング中にくるくる（スピナー）を表示する例以下がjQueryを利用したソースコードの例となります。 例では、「Click 」ボタンを押すと、Ajax通信を行います。そして、ローディング中には、スピナーがある全画面を覆うオーバーレイを表示し、Ajax通信が終了するとオーバーレイを非表示にします。 See the Pen jQuery Ajax Loading Spinner by yic666kr (@yic666kr) on CodePen
現在、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を使うにはまずjQuery本体を読み込まないと始まりません。 ファイルを直接ダウンロードして読み込むことも出来ますが、GoogleなどにホストされているCDNを使って読み込む方法が主流となっています。 その他、読み込み時の注意点などもご紹介します。 CDNを使って読み込む jQueryは1.x2.x3.xのバージョンがあります。 それぞれの読み込み方法を以下でご紹介します。 Google Hosted Libraries https://developers.google.com/speed/libraries/#jquery jQueryのCDNといえばGoogleですね。 jQueryを利用する際はみなさんココから読み込んでるかと思います。 jQuery 1.x
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
情報を時系列に沿って表現する際には年表表示が便利です。教科書などでは横型の年表が使われますが、Webにおいては横スクロールは一般的ではないため、縦型のスクロールをしながら表示されることが多くなっています。 そんな縦型年表を容易に作成できるのがVertical Timelineになります。 Vertical Timelineの使い方 デフォルトの表示です。 日付を表示するデモ。 開始を右側からに。 左寄せ。吹き出しなし。 レスポンシブデザインも対応しています。 Vertical Timelineを使えばサービスの遍歴など、過去の歴史を振り返るような表示が簡単に作れるようになります。普段から使うようなデザインではないので、メモリアル的な部分に用いると良さそうです。 Vertical TimelineはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）で
概要 jQuery-File-Uploadを使ったajaxファイルアップロード https://github.com/blueimp/jQuery-File-Upload デモはこっち 今回はBasic versionを使用した． 実装 basic.htmlからコピペ ソースをダウンロードし，basic.htmlの内容をコピーすれば実装できるはず．（できた） js,cssのインポート ※bootstrap,jqueryは別途インポート必要 <script src="file_upload/js/vendor/jquery.ui.widget.js"></script> <!-- The Iframe Transport is required for browsers without support for XHR file uploads --> <script src="file_up
何回やっても取得できない！ jsonの形式も間違ってないし、メソッドも間違えてないはずやのに、なんでや！ そしてミスに気づいた・・その顛末を。 とっても初歩的なミスなので、備忘録として！ かなり古い記事なので、$.ajax().then()とか今風の書き方にはなってないですが、本質的にはまだ通用するっぽいのでそこだけ見てください！ ダメだったケース $(function(){ $.ajax({ type: "GET", scriptCharset: 'utf-8', url: "sample.json", success: function(res){ console.debug(res[0]); //こいつがイマイチおかしい }, error:function(){console.log('Miss..');} }); }); ちゃんと変なものが返ってくるので、何がおかしいんやろうかと。
jQueryで何かしたい時にまずセレクタで該当要素を指定すると思いますが、要素にidやclassがついていなくても特定の条件を持つ要素として指定できたり、奇数・偶数・n番目の要素を指定できたりと、セレクタには様々な指定方法があります。 ただ中には利用頻度が低くていざ使える場面がきても忘れしてしまっていたり、未だに使う度にググったりするものも幾つかあるので、セレクタに関しての復習兼ねた備忘録です。 また、併せて同じく使用する機会が多いthisに関することやセレクタで指定した要素の親要素や子要素を指定する方法も書いておこうと思います。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれな
**誰かみんなの主張のまとめを作ってくれないですか？** (まあそれこそお前がやれよって話かもしれないので、誰もやってくれなかったら私がしますが。。) 最近、JQueryはもはや不要でReactさえあればOK,みたいな記事をよく見ますね。 論旨としては、どうせトランスパイラ使ってるんだからもっと便利な書き方しようぜ！ってことなんだと思います。(virtual DOMがメインだ！という話もあったけど、じゃあ何でReactなの？というのは聞きたいかな。メジャーだから？) ただちょっと個人的に違和感が拭えないので聞きたいです。 ちなみに私は昔coffeeとbackbone.jsか何かで業務用のページ（SPAではなかったような気がする）を作るお仕事をしたことがありますが、フロントエンドエンジニアというわけではないです。どちらかというとサーバー管理とかのほうがよく知っていると思いますが、Javasc
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
基本 ajaxでない処理の場合。 deferred.resolve()をコールすることで、続くthen()を実行することができる。 直列つなぎ deferred.then()で接続する。 $.Deferred().resolve() .then(function() { console.log("serial 1"); }) .then(function() { console.log("serial 2"); }); つなぐ個数が可変の場合 var n = 10; var defer = $.Deferred().resolve(); for (var i=0; i<n; i++) { defer = defer.then(function() { console.log("serial", i); }); } defer.done(function() { console.log("d
htmlのテーブル内容をJSONにする htmlのテーブル内容を取得してJavascriptでなんらかの処理をすることはよくあります。 普通にjqueryを使い、行を取得してセルを取得して・・・と処理すればデータを取得することができますが、 今回紹介するjQuery用プラグイン、「table-to-json」を使用すると、もっと簡単にテーブルのデータをJSON形式で取得できます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 jQuery : 1.9.1 セットアップ&動作確認 まずはここからtable-to-jsonをダウンロードしましょう。 ここのlibディレクトリにあるjsファイルを使用します。 そして、下記のようなhtmlをディレクトリ内に作成し、動きを見てみましょう。 <!DOCTYPE html> <html lang="ja"
2015-03-29 jQueryでData Table / Grid 操作が出来るライブラリの参考URLメモ(2015-03) JavaScript jQuery 2015-03時点で、jQueryでソートとかグルーピングとか出来ちゃう高機能なTable/Gridライブラリってどんなのがあるんだろうか、といくつかのまとめサイトから好評そうなのを見繕って、参考URLをまとめたメモ書きです。 データ操作に役立つjQueryプラグイン （1/4）：CodeZine http://codezine.jp/article/detail/5946 グリッドレイアウト採用時に便利なjQueryプラグイン 20 | NxWorld http://www.nxworld.net/tips/jquery-grid-layout-plugins.html JavaScriptのGridライブラリ決定版 - S
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
画面の解像度が高まるのに合わせて注目を集めているのがSVGです。これまでのバイナリと異なり、SVGはXMLベースのテキストデータなので縮小、拡大しても綺麗なままです。 そしてテキストデータということは、その書き方もデータがすべて読み取れるということです。そこで作られたのがjQuery DrawSVGになります。 jQuery DrawSVGの使い方 jQuery DrawSVGのデモです。SVG画像がアニメーションしながら描かれているのが分かります。 画像と組み合わせるとこんなこともできます。 jQuery DrawSVGを使うとSVGに書かれている内容をアニメーションしながら描写してくれます。アニメーションGIFのようですが、よりスムーズで綺麗に描かれます。SVGを画像とはまた違った使い方で楽しめるのではないでしょうか。 jQuery DrawSVGはjQuery/JavaScript製
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
