jQuery リファレンス：複数のセレクタ(or)
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン、 2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン、という認識で良いのではないでしょうか。 制作環境に合ったバージョンをダウンロードして下さい。 ダウンロードするファイルは、1.X系2.X系共に Download the compressed, production jQuery ○.○.○ Download the uncompressed, development jQuery ○.○.○ のいずれか。 compressed は圧縮されたファイルで、 uncompressed は非圧縮ファイルです。 特にコアファイルを触らない方は、圧縮ファイルの方を選択で良いと思います。 クリックすると、ズラズラっとコードが表示されますので、 右クリックして名前をつけて保存をクリック
jQueryでチェックボックスのチェック状態を取得するコードと実行結果 | iPentec
とします。 プログラム例 以下のコードを記述します。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jquery-2.0.3.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#Button1").click(function () { if ($("#Checkbox1").prop("checked") == true) { $("#output").
URLを取得したり書き換えたりする
URLを取得したり、書き換えたりするサンプルです。 サンプルコード(URLを取得) JavaScript // 現在のURL全体を取得 document.getElementById('href').innerHTML = location.href; // https://cly7796.net/blog/sample/location-url/index.html?param=abc#hash // 現在のURLのプロトコル部分(「http:」や「https:」)を取得 document.getElementById('protocol').innerHTML = location.protocol; // http: // 現在のURLのホスト情報を取得 document.getElementById('host').innerHTML = location.host; // cly
jQuery入門 - .ready() 関数 - Webkaru
.ready() 関数について解説します。 .ready() とは、HTML（DOM）が読み終わった後に実行される関数です。ready関数は、以下のような3つの形式で記述します。 ①省略なしの形式 $(document).ready(function() { // 実行する処理を記述 }); ②documentを省略した形式 ※ jQuery APIによると、この記述は推奨されていません。 $().ready(function(){ // 実行する処理を記述 }); ③document、readyを省略した形式 $(function(){ // 実行する処理を記述 }); 実際によくみるのは①か③ですね。どちらかを使っておけば問題ないでしょう。 ※ 他のJavascriptライブラリを利用する場合、以下の方法で記述する必要があります。WordPressでjQueryを利用する場合などがこれ
jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う ｜ Tips Note by TAM
JavaScriptでcookieを扱うのは、値のエンコード・デコードや書き込む際の文字列結合、値を取り出す実装など、意外に面倒です。しかし、「jquery.cookie.js」を利用すれば、cookieを簡単に扱えるようになり、シンプルなコードで実装できます。 まずはjQueryとjquery.cookie.jsを読み込みます。 ※jquery.cookie.js は GitHub（https://github.com/carhartl/jquery-cookie）からダウンロードすることができます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> ■cookieの設定 cookieを保存するには
【jQuery】Cookieを使って、モーダルウィンドウの年齢認証を作成する方法 ｜ KLUTCHE
アダルトコンテンツを作る場合に便利なモーダルウィンドウの作り方です。 ※改良版を作りました。 モーダルウィンドウによる年齢認証の作り方 モーダルウィンドウとは？ コンテンツ前面に出てきて、ボタン操作をするまで、ページのコンテンツに触れなくするウィンドウのことです。 年齢認証とは？ アダルトページに入る時にある「18歳以上ですか？」というアレです。 Cookieを使う？ 一度年齢認証を行った後、同じページに訪れた場合に再び年齢認証を表示させないように、ユーザーが訪れた記録をCookieに保存する必要があります。 使用するJavascript jQueryと、そのプラグインであるjquery.cookie.js・jquery.simplemodal.jsを使用します。 jQuery jquery.cookie.js SimpleModal Javascriptの読み込み <script typ
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法｜BLACKFLAG
このところ立て続けに、 Webページ上に初回アクセスのみ動画を表示させたい、 Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、 など、初回アクセス時に処理・制限を変える要望があり、 「jquery.cookie.js」を使ってのクッキー処理にて それらを制御するサンプルを作ってみたので、 メモ書き程度に紹介してみます。 今回のサンプルでは、 初回アクセス時のみページ上に「初回アクセスです。」の メッセージテキストを表示するサンプルです。 jQuery Cookie First Access Control まずは動作サンプルから。 下記のリンクをクリックして表示されるページは、 初回アクセス時のみ、ページ上に「初回アクセスです。」のテキストが表示されます。 ※リロードしてアクセスが2回目以降となるとテキストは非表示になります。 ≫jQuery Cookie First A
heightLine JavaScript Library - Google 検索
2007/07/26 · ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「 ...
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
「WordPressでjQueryのコードが動かない」場合の対処方法
wordpressでサイトを構築中、jQueryを使ったコードを書き込むことがよくあるかと思います。 でも、動かない・・・。 ネットで「このコードをコピペしたら動くよ」っていうのを参考にきちんとやっているはずなのに。 でも、動かない・・・。 そんな時に役立つ「Google Chrome」を利用した原因の特定方法と、一般的な「$の別名定義」エラーに起因するトラブルの解決方法を紹介します。 １．エラー原因の特定 何はともあれコードが実行されない原因の特定を行います。Javascriptのエラーは「Google Chrome」のデベロッパーツール Developer Toolsを利用すると簡単に調べることができます。 以下の手順でエラーをチェックしてみてください。 (1) Developer Toolsを表示する jQueryのコードが実行されないページを表示した状態で、「F12」キーを押します
jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita
// 悪い例 var id = $("#content").data("id"); var itemId = $("#content").data("item-id"); // 良い例 var content = $("#content") var id = content.data("id"); var itemId = content.data("item-id"); // 悪い例 $.each(reallyLongArray, function(count, item) { var newLi = '<li>' + item + '</li>'; $('#ballers').append(newLi); }); // 良い例 : DocumentFragmentを使用 var frag = document.createDocumentFragment(); $.each(reall
bxSliderがInternet Explorerで動かない場合の対処法
jQueryスライドショー bxSlider がInternet Explorerで動かない場合の対処法をご紹介します。 Internet Explorerではjavascriptのコード解釈が他のブラウザと少し違うようで、そこを修正しないとbxSliderが動作しない場合があります。 IEでbxSliderが動かない時は、まずは単純な記載ミスのチェックから始めて、それからjavascriptコードをチェック、それでもダメならjQueryのバージョンを変えてみてください。
jquery.bxslider.jsの使い方やオプションなどのまとめ
スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」の使い方をメモ。 下記からダウンロードできます。 jQuery Content Slider | Responsive jQuery Slider | bxSlider ダウンロード後、必要なファイルを読み込みます。 <link rel="stylesheet" href="jquery.bxslider.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.bxslider.min.js"></script> 使用するオプションによっては、下記ファイルの読み込みも必要になります。 jQuery本体とjquery.bxsl
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた | スターフィールド株式会社
以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、 最近バージョンアップされ、機能もパワーアップされてました。 サイト自体もリニューアルされ、今風になっていました。 それに伴い、今回新しく記事にすることにしました。 以前の記事は以下になります。 コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」 今回のバージョンアップした点は以下になります。 ・レスポンシブに対応 ・スワイプが可能（スマートフォン） ・cssが付いているので、cssの設定が楽になった ・コントロールの画像等も付いている ・カルーセルの設定も変更に(プラグインで設定する) 今回もDEMOを作成しましたが、 レスポンシブになった箇所以外は、あまり以前のと変わってはいません。 DEMO それでは簡単にではありますが、使い方です。 bxSlider
『jQueryがIE9（IE）で動かない時の対処法』
ですから、このコードの下記のように変更します。 [ $(document) ] → [ jQuery(document) ] [ funcution() ] → [ function($) ]
jQuery基礎講座：ウィンドウサイズを取得してブラウザ100%のぴったりHeightを指定する！ | 株式会社パナレア
東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> //開いた画面の高さを取得 var WindowHeight = $(window).height(); //WindowHeightは変数のため任意の名前をつける $(function(){ if(WindowHeight > 320){ //開いた画面が320px以上なら実行 //body要素に高さを書き込む $('body').css('height',WindowHeight+'px'); } }); </scrip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Search
スクロールしても固定されて追尾するサイドバー
finefinefine.jp
