要素を指定した他の要素の後に挿入する。 例えば $(A).after(B) とした場合にAの後にBが挿入されるのに対して、$(A).insertAfter(B) ではBの後にAが挿入される。 両方のサンプルを見て、違いに注意すること。
insertAfter(content) - jQuery 日本語リファレンス
要素を指定した他の要素の後に挿入する。 例えば $(A).after(B) とした場合にAの後にBが挿入されるのに対して、$(A).insertAfter(B) ではBの後にAが挿入される。 両方のサンプルを見て、違いに注意すること。
jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita
はじめに jQueryでの要素追加メソッドをよく忘れるので、それのメモです。 似たような記事はもう沢山あると思いますが、すぐに思い出せるようコードベースで動きを確認できるようにしています。言葉での説明はあえて省きます。Don't think feel ! なお実際の動作は↓で確認ができます http://nekoneko-wanwan.github.io/demo/jquery/dom/ とりあげるメソッド append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() wrap() wrapInner() wrapAll()
CSS3 Animation Cheat Sheet - Justin Aguilar
How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about posi
Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ | ARAKAZE NOTE
JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい！」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 （まあ、そんな簡単な動
jQueryで複数セレクタを and 条件と or 条件で指定するときの指定方法の違いをメモする - 雑想空間
はまったのでメモ。 jQuery でセレクタを複数条件で指定したい場合などがある。 例えばこんな場合 <table> <tr> <td class="a" id="1">a-1</td> <td class="a" id="2">a-2</td> <td class="a" id="3">a-3</td> </tr> <tr> <td class="b" id="4">b-4</td> <td class="b" id="5">b-5</td> <td class="b" id="6">b-6</td> </tr> </table>こんなテーブル構造があった場合。 classが"a"、idが"5"のカラムの色を変えたい場合。 $(function() { $(".a,#5").css("backgroundColor", "red"); });これでOK。 これは or 条件ですね。 cl
【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES
HTMLで特定の要素を全て取得して回したい場合はJavaScriptなどで繰り返し処理をしますが、jQueryを使った場合の方法をまとめます。 対象としてはこのようなHTMLの場合です。 <div class="comment">コメント1</div> <div class="comment">コメント2</div> <div class="comment">コメント3</div> ... .each()メソッド jQueryで繰り返しといえばeach()メソッドです。基本的な構文は以下の通り。 $('セレクタ').each(function(index, element){ 〜 }); 第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が参照されます。2つの引数はどちらも省略可能です。このメソッドを使えば要素数分、繰り返して指定した関数を実行してくれるわけですね。簡
PACE — Automatic page load progress bars
What is Pace? Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Download If you’re a developer, download Pace directly here: Pace.js Themes Enter a color:
コピペで完了！12種類のプログレスバーを簡単に導入できるPACE.js | co-jin
すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画面右上にパーセンテージが表示されます。 プログレスバーです。 ページの読み込みが完了して、100%になると消えていきます。 このプログレスバーはPACE.jsをいうプラグインを利用しています。 これがとってもお手軽だったのでご紹介します。 もしよろしければどうぞ。 PACE.jsは、プラグインを読み込んで、CSSだけで12種類のプログレスバーを表示できる、超お手軽なプログレスバーです。 PACE — Automatic page load progress bars PACE.jsの使い方：jQueryを読み込む jQueryを読み込んでいない方はjQueryをまずは読み込んでください。
Saba note | jQuery | jQueryでの出力方法
どのプログラム言語もそうですが、現在変数に入っている値を出力してみてなんぼという世界観がありまして、開発中においてもデバックにおいても欠かせないものがあります。jQueryで出力するにはどうするのかというと、Attributes/APIのhtml()やtext()を利用します。Javascriptの開発中ではdocument.write()を使用したりalert()使用したりする方もおられると思いますが、jQueryはDOM要素に直接アクセスできるので非常に楽ちんです。console.log()も使えますが。 htmlタグを表示する 文字列を表示する 既存の文字列の前に表示する 既存の文字列の後に表示する 既存のタグの前に表示する 既存のタグの後ろに表示する スカラー変数を出力する 配列を出力する 連想配列を出力する 文字列などをとりあえず出力する html内に出力領域をタグで確保しておけ
jQueryであとから追加した要素にもイベントを関連付ける方法 | NeGiMeMo.net
bell賞味期限切れコンテンツ この記事は公開または最終更新から1694日くらい経過しています。 このメッセージが表示されている記事（特にプログラミング系）は情報が古くなっている可能性があるので注意して下さい。 jQueryで例えば #switch をクリックしたら、#nav_wrap の中にあるメニュー( ul 要素)をフェードインさせたいなんて場合は、
チェックマークが記入されたら取り消し線を引く
ToDo 管理ツールでチェックマークが記入されると取り消し線が引かれるものがあるが、CSS で表現する場合、text-decoration を使う。チェックボックスの変化の監視はクリックイベントを通じて行う。 <table> <tr> <td><input type="checkbox"></td><td>テスト</td> </tr> <tr> <td><input type="checkbox"></td><td>テスト2</td> </tr> <tr> <td><input type="checkbox"></td><td>テスト3</td> </tr> </table> <script> $(":checkbox").click(function() { if ($(this).is(":checked")) { $(this).closest("tr").css("text-dec
jQuery：セレクタや要素指定に関する備忘録 - NxWorld
jQueryで何かしたい時にまずセレクタで該当要素を指定すると思いますが、要素にidやclassがついていなくても特定の条件を持つ要素として指定できたり、奇数・偶数・n番目の要素を指定できたりと、セレクタには様々な指定方法があります。 ただ中には利用頻度が低くていざ使える場面がきても忘れしてしまっていたり、未だに使う度にググったりするものも幾つかあるので、セレクタに関しての復習兼ねた備忘録です。 また、併せて同じく使用する機会が多いthisに関することやセレクタで指定した要素の親要素や子要素を指定する方法も書いておこうと思います。
jQueryのcss()プロパティで使うcssプロパティ名について - web制作の現場で使うjQueryデザイン入門を読ん... - Yahoo!知恵袋
jQueryの css()プロパティで使うcssプロパティ名について web制作の現場で使うjQueryデザイン入門を読んでjQueryの勉強をしているのですが css()でcssを追加する時の説明に 「cssとはルールが少し違います cssプロパティ名にハイフンが含まれる場合はハイフンを削除し、その後に続く最初のアルファベットを大文字に変更する必要があります」 とありました。 しかし $("p").css( "font-weight","bold" ) としてもpタグがboldになります。 これは、 この本の執筆時のjQUeryのバージョンだとハイフンを使えない仕様で それ以降のバージョンのどこかで cssと同じ書き方でも認識するようになったのでしょうか？ それともたまたま上記の記述(font-weight)でもboldになっているだけしょうか？
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
ページ読み込み後にjavascript(jQuery)を実行する方法
こんにちは。まりもです。 ひさしぶりにweb系の備忘録です。 わざわざ記事にすることじゃないかもしれませんが、javascriptなんて全然理解してなくてjQueryもなんとな〜く使ってる無能コーダーな僕には有用な事で、しかも物忘れが激しいので残しておきます。 jQueryのプラグインを多用してると、その実行のタイミングが思い通りに行かなくてイラッとする事ってあると思う。 例えば、ブロックの高さを揃えるプラグインや、画像のサイズを一定にして並べてくれるギャラリーなど。 他にも、CSSでブロックの大きさを制御しているのに、html・CSS・javascriptの読み込みタイミングが微妙にずれてレイアウトが崩れることもある。 ハイスペックなマシンで高速インターネット接続だと大丈夫だったりするけど、汎用スペックマシンの共有ネットワークだったり、スマホやタブレット端末だと処理が追いつかないから崩れ
【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。
【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。 ［jQuery Masonry］を使う際、Webkit系のブラウザ（Safari、Chrome）によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。 巷のブログでは、その不具合を解決するために「<img>要素に［width］［height］属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。 しかし実際には、その方法では問題を解決しきれません。 そこでお勧めするのは、同じjQueryプラグインの［imagesLoaded］を併用するワザです。 ［imagesLoaded］を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。 この特性を利用して、［Masonry］側の計
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found - NxWorld
jQueryでCSSの値を複数設定するときの記述 - Qiita
