脱jQuery $.ajax() | q-Az
Ajax 関係の jQuery の命令は全て $.ajax() を元に出来ています。$.get や $.post もこれをベースにした短縮命令です。これをネイティブに書き換えます。 $.ajax は jQuery のバージョンによって書き方が色々ありますが、おそらく一番使われているだろう書き方で対応していきます。 詳しくは 脱jQuery その1 をご覧ください。 $.ajax()（GET） $.ajax({ url: "test.php", type: "GET", data: {id: "aaa", id2: "bbb"}, success: function(data, status, xhr) { alert("OK"); //通信成功時 }, error: function(xhr, status, error) { alert("NO"); //通信失敗時 }, complet
jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。 · DQNEO日記
eachのキホン：要素を１個ずつ処理する まずおさらい。 このようなHTMLがあるとします。 <ul> <li>foo</li> <li>bar</li> </ul> eachを使うと、要素１個ずつに対して順繰りに処理を行うことができます。 <script> $(function(){ $('li').each(function(){ alert( $(this).text() ); // 'foo', 'bar'と表示 }); }); </script> これがキホンです。 変形してみる 上のeach式は、下のように変形できます。 (一番外側のブロック$(function(){....})は省略します) $.each( $('li'), function(){ alert($(this).text()); }); さらに変形してみます。 グローバル変数 "$" はグローバル変数 "jQu
JavaScript/jQueryでDOM要素が存在するか確認する方法
if ( document.getElementById("selector") != null ) { console.log("exist!"); } if ( $("selector")[0] ) { console.log("exist!"); } if ( $("selector").get(0) ) { console.log("exist!"); } if ( $("selector").length ) { console.log("exist!"); } if ( $("selector").size() ) { console.log("exist!"); } if ( $("selector").is('*') ) { console.log("exist!"); }
Chrome の userscript （とConsole）で jQuery を使う方法 - 弘法にも筆の誤り
Chrome の userscript は @require を使えないので自前で呼ばないとダメらしい。 知らなかったのでメモメモ。 From:How can I use jQuery in Greasemonkey scripts in Google Chrome? - Stack Overflow で、上記サイトのコードだと関数がグローバルスコープなので即時関数で囲います。 即時関数については以下のサイトが分かりやすかったです。 知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て - 三等兵 こんな感じ。 ちなみに Chrome の Console 内で jQuery 読み込むには上記のコードから jQuery 読み込みの部分だけ抜き出して Console で以下を実行します。 追記：Chrome のスニペットでもっと楽に！ Ch
「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ
「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ JavaScriptのライブラリとして人気のあるjQueryは現在、モダンブラウザのみサポートすることで、より小さく速く安定したjQuery 2.x系と、古いバージョンのWebブラウザを含む幅広いWebブラウザをサポートするjQuery 1.x系の2つが存在しています。 この2つのバージョン表記を、次のリリースから変更することが、jQueryのブログにポストされた記事「jQuery 3.0: The Next Generations」で発表されました。 バージョンは3.0に統一 現在のjQuery 1.9系とjQuery 2.0系は、前述のようにサポートするブラウザが異なるだけで、APIは基本的に互換性があります。 そこで、次のリリースからこの
レスポンシブにも対応！jQueryカルーセル「bxSlider」が使いやすい | design Edge
JavaScript Web コーディング とある案件でカルーセル（スライドショー）を使うことになったので、これを機会に使いやすいjQueryプラグインを探してみましたのでご紹介します。 まずはネットで口コミを見てまわり、評価の高そうなものの中から探してみました。 できればこの先しばらく使っていきたいという思いもあったので、いくつか条件を設けました。 レスポンシブ対応 スマホなどでのスワイプ操作対応 オプションをカスタマイズしやすい IE7対応 Owl Carousel いろいろ見ていく中で、最初に有力候補に上がったのが「Owl Carousel」でした。 上の条件にも当てはまり、CSS3 Transitionに対応したブラウザであれば、スライドだけでなく様々なエフェクトで見せることが可能です。 ただ、検証してみるとChromeとIE11でエフェクトが効きません。FirefoxやSafar
ページが見つかりませんでした | Stronghold Archive
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
jQuery で自分自身のHTMLを取得する - それマグで！
jQuery.html()だと innerHTMLなので、内側しか取得できない。 もし、出来るならば、自分そののものHTMLタグを取得したい outerHTML 的なものがほしい element.outerHTML があるんだけど。。。パパっと使いたい 自分自身のHTML(self html) を取得するには outerHTMLが使えるんだけどouterhtmlって名前は好きじゃない。 jQueryに無いっぽいので作ることにした。clone()を使うのもいいけど。まぁ簡単な方法で (function($) { $.fn.selfHtml = function(options){ if($(this).get(0)){ return $(this).get(0).outerHTML; } } })(jQuery);
jQuery を高速に使う CSS セレクタの書き方
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
jQueryでコンテンツをランダムに入れ替える
ページのコンテンツをランダムに表示する機能をjQueryを使って作成しました。最初にHTMLには要素の記述が全部書いてある状態なので、JavaScriptがオフでも順序が入れ替わらないだけで表示はされます。 HTML サンプルに例として以下のHTMLを用意しました。 <ul class="contentBox"> <li> <div class="box"> <h2>見出し1</h2> <p class="img"><a href="http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%81%E3%82%B4" target="_blank"><img src="01.jpg" width="220"height="150" alt="いちご"></a></p> <p>イチゴ（苺、莓、Fragaria）はバラ科の多年草。食用として供されている部分は花托（
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
スクロールで順に画像読み込みLazy Load Plugin for jQuery
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
greasemonkey内でjQueryを使う - $shibayu36->blog;
久々にuserscript書こうと思って、greasemonkey辺りを触ってた。最近chromeではjsshellとか言うのがあるらしいけど、firefoxだったら今もgreasemonkeyで書いたらいいんだろうか。いまいちよくわかってない。 それはともかくuserscript内でjQueryとjQuery UIを使いたかったのでいろいろ調べた。 基本 userscriptでは最初の部分にいろいろ書くと、どんなURLで読み込むかとか設定できる。そこで@requireを使っておけばとりあえず、jQueryを読み込んで使うことができる。 // ==UserScript== // @name Script Name // @description Script Description // @namespace http://saficion.com/ // @include http://
jQuery 2.0.1とjQuery 1.10.0が同時リリース。jQueryの2バージョン並行リリースが開始
jQuery 2.0.1とjQuery 1.10.0が同時リリース。jQueryの2バージョン並行リリースが開始 jQueryは、モダンブラウザに最適化し、Internet Explorer 6/7/8のサポートを廃止したjQuery 2.x系と、過去のブラウザも幅広くサポートするjQuery 1.x系の2つのバージョンがあります。基本的には機能はどちらのバージョンも同じで、互換性があります。 この2バージョン体制になったのは、4月にjQuery 2.0の正式版がリリースされたときからです。今後jQuery 2.0にはjQuery 1.10が、jQuery 2.1にはjQuery 1.11が相互に対応するバージョンとしてペアでリリースされることが発表されていました。 そして5月24日付けで、初めてjQuery 2.x系とjQuery 1.x系の並行リリースが行われました。jQuery 2.
とほほのjQuery入門 - とほほのWWW入門
コア コア(基本) セレクタ セレクタ(基本) セレクタ(継承) セレクタ(属性) セレクタ(基本フィルタ) セレクタ(コンテンツフィルタ) セレクタ(ビジビリティフィルタ) セレクタ(子要素フィルタ) セレクタ(フォームフィルタ) トラバース トラバース(親子関係) トラバース(フィルタリング) トラバース(その他) イベント イベント(イベントハンドラ) イベント(ブラウザイベント) イベント(読み込み) イベント(フォーム関連) イベント(キーボード関連) イベント(マウス関連) イベント(イベントオブジェクト) 属性・値 属性・属性値 HTML・テキスト・値 クラス スタイルシート スタイルシート(基本) エフェクト エフェクト(表示) エフェクト(フェードイン) エフェクト(スライドアップ) エフェクト(カスタム) 操作 操作(DOM挿入(内側)) 操作(DOM挿入(外側)) 操
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
jQuery で5秒後とかに addClass したいとき · Issue #61 · shikakun/tips
jQuery swfobject params as variable