数値を含む値にマッチするセレクタ
ありません。 http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。 Attribute values must be CSS identifiers or strings. そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。 ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。 追記: 気になってしま
jQueryの$.loadと$.ajaxを使って他のページの内容を読み込む方法
書き方の例 $('読み込ませたい場所').load('読み込ませたいファイル idなどの箇所の指定'); ファイル全体を読み込ませたい場合は”idなどの箇所の指定”はなくて大丈夫です。こちらの方法だと、 記述方法がシンプルでわかりやすい 一気に特定の箇所まで指定できる というのが良い点かなと思います。 jQuery辞書：load .load() | jQuery API Documentation 書き方の例 $.ajax({ type: 'GET', url: '読み込ませたいファイル', dataType: 'html', success: function(data) { $('読み込ませたい場所').html($(data).find('idなどの箇所の指定')); } }); こちらはパッと見た感じ複雑になりました。その分エラーの時の処理などの様々なプロパティが設定出来ます。 j
jQuery Mobileページでハイパーリンクを設置するには？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。 jQuery Mobileページにハイパーリンクを設置することは、何ら難しいことはありません。おなじみのアンカータグ（＝<a>タグ）を記述するだけです。もっとも、裏側ではjQuery Mobile固有の挙動も絡んでおり、ただ表向きの構文を理解しておけばよいというものではありません。本稿では、前半でjQuery Mobileにおけるリンクの挙動を解説するとともに、後半ではリンクに関連して、ページ遷移
[jQuery] 異なるバージョンのjQueryを共存させる | un-T factory! Interactive blog
un-T factory!のインタラクティブチームのブログです。こんにちわ、榎戸です。 先日とある案件でフロントエンドの実装をおこなっていたときの話です。 ひと通り実装を終え明日はクライアント確認という段階で ステージングサーバにデータをアップしたところ動きません… 弊社テストサーバでは問題なく動いていたものが なぜかステージングサーバだと動かないのです。 時は刻一刻と過ぎていき 空が白み始めたころ原因がわかりました。 jQueryの競合がエラーの原因だったのです。 実装を担当したページでは ほかにも様々なモジュールが読み込まれていたのですが、 モジュールごとに違うバージョンのjQueryを読み込んでいて それが私の書いたスクリプトと衝突していたのです。 調べてみるとこの「jQuery競合問題」には さまざまな解決法がありました。 自分自身の反省をこめて 今
jQueryでキーボードのキーコードを調べる方法｜BLACKFLAG
先日紹介した「jQueryを使ってキーボードからの操作でイベントを実行させる方法」にて、 各キーボードに付与されているキーコードを使って制御しましたが 各キーにはどのキーコードが設定されているか調べるツール（？）を 作ってみた（ほぼ自分用）ので併せて紹介してみます。 キーボード操作からイベントを実行させるサンプルでは 矢印キー「←」「→」「↑」「↓」の4つを使って実装しました。 他のキーから操作を設定する際、下記の入力フォームにカーソルを入れ、 実際にキーボードのキーを押すと、そのキーに設定されているキーコードが表示されます。 jQuery KeyCode Examine 中身は大したことないのですが、 下記の様になっています。 ◆HTML <div id="container"> <p>入力フォームにカーソルを入れ、キーコードを調べたいキーを押してください。</p> キーコード ： <i
【jQuery】GoogleのCDNだけで大丈夫か（Google Libraries API） at softelメモ
問題 Google Libraries API でjQueryなどを読み込んでいるけど、もしGoogleにアクセスできないようなことがあったらどうするの？ 答え 無事jQueryが読み込まれていれば、window.jQuery がちゃんと存在する。逆に window.jQuery がなければ何かおかしい。 そこを判断基準とすると、対策はこうなる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script>!window.jQuery && document.write('<script src="/自分のサーバーの/jquery.js"><\/script>')</script> Google CDN（Google Libraries API）は、いつでも最新のj
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
初めてのjQuery：セレクターAPIを一挙解説（前編） (1/6)
jQueryの具体的な記述方法に入る前に、そもそもJavaScriptでは何ができるかということに少し触れておきましょう。 誤解を恐れずに言えば、JavaScriptは「(X)HTMLとCSS（Cascading Style Sheets）を操作するためのプログラミング言語」です。Webサイトを作成するには、通常、(X)HTMLでコンテンツの構造や内容を、CSSで見た目であるレイアウトや装飾を記述します。これに対してJavaScriptは、ユーザーの操作などが発生したタイミングで(X)HTMLやCSSを動的に変更することにより、Webサイトにインタラクティブな動きを与えます。 たとえば、第1回で紹介したアコーディオンパネルは、「dt要素がクリックされたらdd要素のheightプロパティを変更する」という処理によって、パネル部分が伸び縮みする動きを実現しています。 jQueryに限らず、Ja
jQuery入門道場 - 【セレクター】
2章 セレクター この章で見る主な内容です。 基本的なセレクター 検索する対象（範囲）を指定する書き方 階層構造によるセレクター 基本、子要素フィルター コンテントフィルター フォーム系フィルター .is()フィルター セレクト回数を減らそう 基本的なセレクター jQueryでは、CSSでお馴染みのセレクターを使って、要素を選択（取得）します。ここでは、以下の基本的なCSSセレクターを見て行きましょう。 要素（タグ）セレクター クラスセレクター IDセレクター グループセレクター ユニバーサルセレクター 属性セレクター 要素（タグ）セレクター 要素（タグ）名を元に対象要素を選択します。要素名は、括弧（<>）は付けずに、そのまま書きます。 例えば、
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
クリップボードにコピーの実装は難しい？「zClip」が一発解決 - Noise of Web Programming
ブラウザからクリップボードに文字列をコピーする機能を実装したく調べた結果、便利なJSライブラリがあったので書いておく。 zClip 最初はブラウザからクリップボードにコピーする機能はJSで簡単に実装できるもんだと思っていたが、実はそうではなかった。そのような機能を提供しているのはIEだけであり、他のブラウザではJSのみではコピーすることが出来ないようだ（Chromeでクリップボードにコピーする実装方法という記事をいくつか読んだが、提供しているデモがそもそも動いていなかった...僕の環境のせいかもしれないが）。 そんな意外に難しいクリップボードコピーを簡単に実現してくれるのが「zClip」である。 Flashを使うことでコピー機能を実現しているようだ。このライブラリのみでIE、Firefox、Chromeなどクロスブラウザ対応している。すばらしい。 zClip.jsの使い方 使い方は色々ある
(JavaScript)jQueryを使って外部JavaScriptを動的に読み込む | old_3流プログラマのメモ書き
Ajaxなページを作っていると、JavaScriptファイルも動的に読み込ませたくなります。 jQueryを使うと簡単に外部JavaScriptファイルを読みこませるできます。 こんな感じです。 $.getScript("./test.js", function(){ }); もし、読み込んだ後に、処理したければコールバック関数に処理を書いてやればOKです。 $.getScript("./test.js", function(){ alert("読み込み完了"); hoge(); }); jQueryってほんと便利ですね。 参考: [jQuery] 外部JavaScriptファイル読込みに関する考察｜A Day In The Boy's Life 逆引きjQuery：非同期でJavaScriptのコードを取得するには？ － ＠IT
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
一定時間で繰り返す（setTimeout）－JavaScript入門
HOME JavaScript入門 一定時間で繰り返す（setTimeout） 前のページではsetInterval()を使ったタイマー設定について見ました。 このページではもう一つのタイマー設定方法、setTimeout()について説明していきます。 setTimeout()を使ったサンプルスクリプト setTimeout()は設定時間後に関数を呼び出す命令文で、 それ自体では繰り返しは起こりません。 例えば以下のスクリプトをHTMLのBODY内に書いてみてください。 3秒後にメッセージが表示されて終わりになります。 <form> <input type="button" value="Timer" onclick="setTimeout('mes()',3000)"> </form> <script> function mes() { alert("3秒経ちました！"); } </sc
jQueryのanimateで自由にアニメーションできるようになろう
Posted: 2011.12.27 / Category: javascript / Tag: jQuery, アニメーション jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
親要素のみ削除する方法[jQuery1.4系版]
結構前のエントリーで『jQueryメモ：親要素だけ消すってどうやるんだろう？』という内容を書いたのですが、最新版のjQueryではもっとシンプルな方法で親要素のみ削除できるようになったので、再度試しつつご紹介します。 今回の各でもについて 今回のデモは下記のHTMLをそれぞれ利用します。 利用するHTML <a href="#damy"><span>サンプルデモ</span></a> デモ５だけは子要素にSPANがないものを利用しています。 このうちAタグのみ削除することを目的とします。リンクが外れていたら成功。 プラス、中のSPAN要素には、中のテキストをアラートするクリックイベントを付けておいて、今回の親要素削除後も動作するかをチェックできるようにしてみます（spanを子要素に持たないデモはこのイベントは付けていません。） 子要素(SPAN要素へのイベント) $('span','.pr
![親要素のみ削除する方法[jQuery1.4系版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/32ea6dcbe5d9f2a3bc69fb3f023dc0dc91890670/height=288;version=1;width=512/https%3A%2F%2Fh2ham.up.seesaa.net%2Fimage%2F201003171.png)
jQueryでサムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプトを書いてみた - Wataame Frog
タイトルだけでは分かりにくいですが、ECサイトの詳細画面などでよくあるタイプのものです。 いつもの様に勉強がてら作ってみましたが、意外と使えるのではなかろうかと思っています。 そういうわけで、何らかの商品管理画面を作った際には楽に使えるよう、久しぶりにプラグイン化もしてみました。 そんな感じで、今回もスクリプトを晒してみたいと思います。 動作のイメージ 画像の命名規則 画像ファイル名はメイン画像用は filename1.jpg filename2.jpg とし、サムネイル画像は filename1_thumb.jpg filename2_thumb.jpg という感じの命名規則を設けています。 「_thumb」部分は、プラグイン版では変更できるようにしています。 スクリプトコード HTML ではHTMLから。 <img src="./img/img2.jpg" width="350" he
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
finefinefine.jp
