はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
汎用性を重視したテーブルフィルタリング系の jQuery プラグインです。 実装の基本思想は以前書いた「jQuery によるシンプルなテーブルフィルタリング処理の実装を考えてみる」に基づいてます。 変更履歴 v0.5 フィルタ条件の入力フィールドを自動生成する機能を追加しました。 Excel のオートフィルタのようなプルダウン、ラジオボタン、チェックボックスによる条件入力フィールドの自動生成機能を追加しました。 QueryString によるフィルタリング機能を追加しました。 Bootstrap3 対応。 使用手順の説明、デモを大幅刷新しました。 v0.4 １つの条件入力フィールドを複数カラムに対し適用した場合、当該フィールドについては OR 条件でフィルタされるようにした。 v0.3 プラグインの実行時、パラメータ名を指定ぜずフィルター要素のみを指定できるようにした。 $(‘table’
Browser/OS detection with jQuery As I wrote in my recent post I simply use the PPK BrowserDetect object to find out the browser/OS of the client. Actually I’m pretty sure there’s a similar jQuery plugin based again on that code from Quirksmode.org, but however I decided to write a simple plugin for jQuery wrapping it into a closure and exporting it in the “$” object. Demo You can see full working
jQueryのフィルタ機能を使って、HTML中に書かれた全てのリンクを下記の条件で検索し、 リンク先URLにドメイン(hostname)が記述されている 現在閲覧中のドメインと異なるドメインへのリンクである onClick時にGoogle Analyticsの計測用の関数(_trackPageview)を自動実行するイベントをセットしています。 jQueryのfilter機能を使ったこの書き方だと、特定のドメインへのリンクのみ、指定したclassやidの中のリンクのみ、などと他の条件を指定できるのでオススメです。 また、body内のタグをすべてロードし終わってから（＝HTMLが確定してから）この処理を実行しないと、リンクを検知できない場合があるのでご注意。 関連記事 Google Analyticsのクロスドメイン対応を自動化 解析タグを一元管理する「ulTracker」とは
規約ってほどでもないけど、jQuery でコード書くときは以下みたいな感じで書くことが多くなった。 どう書こうが好みだろうけど、jQuery オブジェクトに $ を付けるくらいはしといたほうがよい。
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使いたい人向けのプラグインを集めました。 TIPS/チュートリアル プラグイン/animateメソッドの拡張など プラグイン/単体で使えるものなど プラグイン/スクロール系 TIPS/チュートリアル animate(params, options) http://semooh.jp/jquery/api/effects/animate/params,+options/ まずはjQuery animateの基本を押さえましょう。 Using jQuery Stop http://css-tricks.com/examples/jQuery
d="M21.99 12.055C21.99 6.49775 17.5122 2 11.995 2C6.47776 2 2 6.49775 2 12.055C2 17.0725 5.65817 21.2304 10.4358 21.99V14.9635H7.89705V12.055H10.4358V9.83608C10.4358 7.31734 11.925 5.92804 14.2139 5.92804C15.3033 5.92804 16.4528 6.12794 16.4528 6.12794V8.6067H15.1934C13.954 8.6067 13.5642 9.38631 13.5642 10.1759V12.065H16.3328L15.8931 14.9735H13.5642V22C18.3418 21.2504 22 17.0825 22 12.065L21.99 1
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
jQuery 1.6 が既にリリース されていますが、1.5 で追加された Deferred を勉強する意味で、Script Junkie から Creating Responsive Applications Using jQuery Deferred and Promises を翻訳してみましたので、共有したいと思います。著者の Julian Aubourg は、jQuery のコアチーム・メンバーとして、Ajax モジュールの書き換えと Deferred 導入を指揮した方だそうです。 記事の途中、各メソッドの説明部分は、jQuery ドキュメントの翻訳に差し替えていますので、リファレンスとして使ってもらうのも良いかと思います。 Deferred や Promise は、概念や用語が少々分かりにくいところがあるかと思いますので、読んでくださった方の、少しでも理解の助けになれば幸いです
jQueryを利用する際の高速化記述方法のメモ。 セレクタにid属性を指定できないか検討する classだとすべての要素をチェックしなければならないから処理効率がよくない。idが使えるならばidを使うべし。 セレクタに要素名とclass属性を追加する $(“.nav”)ではなくて、$(“div, nav”)とそれば、JavaScriptのgetElementsByTagNameで精査する要素を絞り込むことができる。 findメソッドを利用する $(“#nav a”)より$(#nav).find(“a”)のほうが早い。これはまったく逆だと思ってた･･･。jQueryのセレクタは「右から左」に解釈されるため、$(“#nav a”)だとa要素を検索して、その中から#navが先祖要素にあたるa要素をjQueryオブジェクトとする。findを使えば、#navを検索してからa要素をjQueryオブジェ
Toggle Button = $('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast'); Download This Lab This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>. This is the first list item (<li>) in an unordered list (<ul>). This is the second list item. It has a link in it. This is the third list item. It has a class of "my
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
先月の社員PVランキングは91番目でした。agoです。 たまに他言語開発者から「JSは何となくわかるけど、jQueryが特殊すぎてよくわからない」という声を聞きます。 個人的にjQueryを使う場合、「JSの中でjQueryを使う」と言うより、「jQueryの中でJSを使う」と考えた方が理解しやすいと思うので、今日は"jQuery言語"の書き方を紹介したいと思います。 文法 Traversing methodでインデントを下げて、.end()でインデントをあげます。 （Traversing以外のmethodはインデントを維持します） そして、末尾には開始行と同じ位置に「;」を置きます。 $('body') .find('a') .filter('.permlink') .attr('href', function () { return $(this).attr('href').repla
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 2009年08月05日- jquery-week-calendar - Project Hosting on Google Code GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」。 次のような、ドラッグ＆ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグインとして公開されました。 なんと、次の１行で初期化という簡単っぷりです。 $("#calendar").weekCalendar(); 当然、コールバックを設定して、イベント追加時のコードをかけたりします。 プロジェクトページのリファレンスも充実しているようで、カスタマイズも簡単でしょう。 関連エントリ とても洗練さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
