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 を連携させるよ
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.
jQueryによる要素の存在チェックまとめ
jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括ってますが、必要に応じて「$(function(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 １．$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える（配列の基本メソッドが使える訳ではない）ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
jQueryで多数の要素を生成して追加する場合のパフォーマンスについて | JavaScript | かたつむりくんのWWW
jQuery で多数の要素を生成して別の要素に追加する場合、どんな書き方が速いのかなーと思って試してみました。 今回は、3,000回ループを回して既存の要素に追加していくというのを、パッと思いつく感じの6パターンで試してみました。 サンプル（※モダンブラウザ以外では実行しない方が良いです！） さて、HTMLのソースは次の通り単純です。 <ul id="result"> <li>このリストに結果を追記する</li> </ul> また、次の1文は最初に定義しておきます。 var $result = $("#result"), n = 3000; 1 : 毎回要素を生成して append() していく for (var i = -1; ++i < n;) { var $li = $("<li></li>").text(i).attr("id","id_" + i).addClass("class
jQueryで、背景画像の切り替えを実装したいです。div#coverに設定してあるbackground-imageを時間ごとにフ... - Yahoo!知恵袋
WEB上にある数多くのソースで満足できるものがなければ 知恵袋に曖昧な説明で質問して気に入るものが見つかるか不明ですが・・・。 まず、div#coverが「・・・」ってなっているということは div#coverにコンテンツが入るわけですよね？ 背景そのものをフェードイン・フェードアウトはできません。 div#cover自体をフェードイン・フェードアウトさせてしまうと コンテンツ自体もフェードインアウトしてしまいます。 こういう場合は擬似的な背景を実装することが多いです。 <div id="wrap"> <div id="bgimg"></div> <div id="cover">・・・</div> </div> などとして、div#bgimgには背景画像だけ設定します。 擬似背景の環境を作る為に div#wrapにposition:relative; div#coverにposition:
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15 | NxWorld
ユーザーに日付や時刻を入力してもらう際に手助けするデートピッカー・タイムピッカーを実装できるスクリプトのまとめです。 日付であればカレンダーを、時刻であれば時計を表示させるといったように選択しやすい感じの見栄えにしてくれるものもあれば、シンプルな見た目で入力・選択させるといったものもあり、使いたいデザインのテイストに合わせて選べると思います。 以前だとjQueryを使っている環境でデートピッカーといえば「jQuery UI Datepicker」が定番という印象で、オプションが豊富なのでいろいろな機能・見せ方を実装できますし、ちょっとしたカスタマイズ情報なども検索でたくさん出てくることもあって使ったことあるという人も多いと思います。 ただ、今では同じjQueryプラグインでももっと軽量なものだったり、そもそもjQueryなどは使わず単体で動いて且つオプションが豊富でカスタマイズもしやすいス
電話発信用のリンクをスマホの時だけ有効にする設定（PCの場合は無効に） | Web Folders
a要素に「tel」を指定し電話発信用のリンクを設定した時、スマホで閲覧した時だけタップで電話発信ができるようにする設定。 パソコンから閲覧した時はリンクを無効にする。（クリック出来ない状態にする） どの端末からアクセスしているのか？を判別させ、HTMLにclassを設定してスマホ（タブレット）の時だけa要素を有効にする。 HTML側の設定 電話発信用のリンクにしたいところにclassを指定する。 ※ここではclass名をtelにしてある。 画像でリンクする場合 img要素の中にclassを指定する。 <img src="images/tel.png" width="190" height="40" alt="お問い合わせ" class="tel" /> テキストでリンクする場合 spanタグやpタグなどでclassを指定する。 <span class="tel">お問い合わせはこちら</s
脱jQuery Tips Advent Calendar 2015 - Adventar
jQueryからNativeJavaScriptへの変換規則的なTips 1個1個の記事は薄めでも25個で脱jQueryを目指します。 blog：https://q-az.net/ Twitter：https://twitter.com/gzzdino
目次 - jQuery syntax
はじめに.addClassと.removeClass$(document).ready(function(){});$(document).ready(function(){});$(document).ready(function(){});を省略して書く変数varで変数を定義する変数を変更するalert();やconsole.log();で確認変数で足し算など$(document).ready(function(){});は何度も書かなくて良いアニメーション.fadeIn()でフェードイン、.fadeOut()でフェードアウト.animate()で動かす（移動編）.animate()で動かす（透明度編）.animate()で動かす（横幅・縦幅編）.delay()でアニメーションを遅延させる省略できる命令閉じカッコに気をつける「;」や「,」に気をつけるロールオーバー・クリック.hover
コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか？ 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら
短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
jQuery の animate で、アニメーションのステップごとに関数を実行
アニメーションの各ステップの後に関数を実行するには、jQuery の animate( properties, options ) メソッドの2つ目の引数のoptions（オプション）内で、 step （ステップ）に、実行したい関数を指定することで可能。 実装例（サンプル） step 実装例（サンプル）の動作について 「step」ボタンをクリックすると、オレンジ色のブロックが、不透明度100%から不透明度25%へアニメーション変化する。アニメーション中、「step」ボタンの右横に、■ が出現し増えていく。アニメーションが完了すると、■ は全て消える。 実装例（サンプル）のソースコード JavaScript <script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-api-animate-step'
jQueryを使うなら知っておきたいjQueryプラグインの作り方｜クロノドライブ
現在、JavaScriptのライブラリであるjQueryは多くのWebサイトで使われ、フロントエンドのコーディングを支えています。ただ、様々な関数が用意されているとはいえ、デフォルトで用意されている関数だけでは実現できない処理があったり、処理をコンパクトに記述したいことがあると思います。 そのような場合はjQueryのプラグインを作ってしまい、処理をjQueryの関数の一つとして使うことをお勧めします。 本コラムでは、jQueryプラグインの作り方と基本的なサンプルをお伝えします。 jQueryプラグインの例 それでは、早速jQueryプラグインの例を見てみましょう。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
.queue() | jQuery 1.9 日本語リファレンス | js STUDIO
$("#test").queue(function(next) { // Do some stuff... next(); }); デモ 登録されているキューの数を表示します。 <!DOCTYPE html> <html> <head> <style>div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:60px; background:green; display:none; } div.newcolor { background:blue; } p { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>キューの登録数: <span><
【jQuery】背景いっぱいにYouTube動画を表示させる［jQuery Tubular］を紹介します。
【jQuery】背景いっぱいにYouTube動画を表示させる［jQuery Tubular］を紹介します。 ウェブサイトにアクセスしたとき、背景全面に大きく動画が流れていると大変インパクトが強く、印象に残ります。 そこで今日は、サイトの背景にYouTubeの動画を表示・再生させることができるjQueryプラグイン［jQuery tubular］を紹介します。 プラグインのダウンロード まずは下記の公式サイトより、［jQuery Tubular］のプラグインをダウンロードしてきます。 jQuery Tubular：ダウンロード 使い方 まずは HTML の <head>〜</head> 内にて、先にjQuery本体を、続いてダウンロードしてきた［jquery.tubular.js］を読み込みます。 続けて、［jQuery Tubular］の設定も記述します。 <script src="jqu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
脱jQueryのためにしたこと - Qiita
Windowリサイズ完了時のコールバックを設定できるようにするjQueryプラグイン「Resize End」:phpspot開発日誌