jQueryで要素の高さ・幅を取得する：width(), height()など
jQueryには、要素の高さ・幅を取得するメソッドが複数用意されています。これらの違いなどを含めて説明します。 jQueryで高さ・幅を取得する４タイプ８つのメソッド HTMLの要素の高さを取得するメソッドには、height(), innerHeight(), outerHeight()の３つがあり、同じく幅を取得するメソッドにはwidth(), innerWidth(), outerWidth()の３つがあります。 これらのメソッドの違いは、paddingやmargin、borderの値を含めるかにあります。 図で説明する各メソッドの違い 高さを取得するメソッドについて、図で説明すると以下のようになります。 次から、より詳しく説明していきます。 取得する値：コンテンツ CSSなどで指定したwidthとheightの値を取得します。また、他のメソッドとは異なりwidthとheightを指定
function(e)のeってなんだ？ - 旧gaaamiiのブログ
最近、週１くらいのペースでミニアプリを作りながらjQueryを教わってる。 教えていただいたことをメモしておく。 jQueryを書くとき、基本はこう書くってことは知ってた。 $(セレクタ).イベント(function(){ // 処理 }); 意味がしっかりわからなくてもこれが書ければなんとなくでできちゃうことがけっこうある。たとえば、ページの先頭に戻るボタンの実装とか。文字をすっと消したりとか。 んで、こうやって書くのも見かけることがある。 $(セレクタ).イベント(function(e){ こう書く場合の、(e)はなんなんだ？引数？ え？何を持ってるんだこのeは？ というわけで教えてもらったのが、「コンソールに出せばわかるよ」ということ。 こう書いて、 $("#sample").click(function(e){ console.log(e); }); コンソールを見ると jQuer
jQueryを利用してselected、checkedで選択状態に - matsukaz's blog
jQueryを利用してコンボボックスを選択状態にできないかなって思って調べていたら、selectで指定のものを選択状態にってエントリを発見。早速試してみました。 <select id="col1" name="col1"> <option value="val1">値1</option> <option value="val2">値2</option> <option value="val3">値3</option> </select> ってHTMLに対して $("#col1").val("val2"); って記述でほんとに選択状態にできました。素敵過ぎです。 checkboxとかradioとかはどうなのかと思ったら、こっちは $(".col2[@value=val2]").attr("checked","checked"); って記述でいけるみたい。これまたシンプル！ HTML中にsel
jQueryでのif文の書き方（else,else ifなども）
結果（コンソール） 福岡です。 上記のように表示されます。 コンソールについては下記ページでご紹介しています。 参考：jQueryでコンソールログを使ったデバッグ方法 if文の構文 if文は以下のような構文になります。 if (条件式) { trueの場合の処理 } 条件式 if文の条件式で、分岐の条件を決めます。 ifに続く()（カッコ）内に条件式を書きます。 先ほどのサンプルでは、変数の値と指定した値が等しかったら…という条件式になっています。 このように左辺と右辺を比較し、等しかったら、等しくなかったら、大きかったら、小さかったらなど、さまざまな条件式を設定できます。 else で falseの処理も指定 先程はtrueの場合のみの処理でしたが、今度はfalseの処理も併せて指定してみましょう。 成人か未成年かを判定
val(val) - jQuery 日本語リファレンス
<select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> ra
ｊQueryのセレクタに変数を使うメモ
parts = $(this).val(); $('img[src*= ' + parts + ']').show(); 変数名「parts」を除いて「''」で括るだけではうまくいかなくてどうしようかなーと思ったんだけど、「+」で連結しないと一つの文字列にならないから駄目だったんですね。
jQuery リファレンス：parent
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 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で子から親に向かってセレクタを利用するには？
既にparentsメソッドが紹介されていますが、用途によってはclosestも便利です。 HTMLが下記のような構成だとします。 <div class="hoge"> <div class="hoge fuga"> <div> <button>ボタン</button> </div> </div> </div> parents()は親方向に向けて、セレクタにマッチする全ての要素を返すため、下記のコード(parents)は<div class="hoge">と<div class="hoge fuga">の2つを返します。 $('button').parents('.hoge'); 一方、closest()も同じく親方向に探しに行くのですが、こちらは最も近い要素だけを返すので、下記のコードは<div class="hoge fuga">だけを得られます。 $('button').closest
jQuery リファレンス：[ 属性名 *= '値' ]
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 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でフェードイン、フェードアウトをするには
ここで使っているのが $("セレクター").fadeIn(スピード) $("セレクター").fadeOut(スピード) スピードは slow・何も書かない・fast で 600・400・200ミリ秒 スピードを変更でき 数字を入れることで？ミリ秒で表示、非表示スピードを調整できます。 プレビューはslowで0.6秒です。 html <button id="fadeIn">表示</button> <button id="fadeOut">非表示</button> <p><img src="img.jpg" /></p> $(function(){ $("button#fadeIn").click(function(){ $("img:not(:animated)").fadeIn("slow"); }); $("button#fadeOut").click(function(){ $("im
JQueryで読み込み時とリサイズ時にブラウザサイズに横幅を合わせる - Qiita
レスポンシブデザインとかの横幅100%をJQueryで処理 こんな時に便利 video要素ではwidthおよびheight属性は、パーセントでの値指定が出来ない レスポンシブデザインされていないページを処理する場合 読み込み時とリサイズ時を同時に処理する 読み込み時だけで処理するとブラウザサイズを変更した時に対応出来ないので、 JQueryではloadとresizeを合わせて記載すればOK!
要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
jQuery逆引きリファレンス 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
jQuery：マウスオーバーやクリックで背景画像を入れ替えてみる
jQueryを使って、マウスオーバーやクリックをしたときに、 背景画像を変更するという案件が入りそうだったので、 実験的に作ってみました。 マウスオーバーしたときや、クリックした時に、 背景の画像が変わります。 jQueryを使えば基本的な事だけでできることです。 背景画像が変わるサンプル とりあえず作ってみたのでサンプルをみてください。 サンプルのソースは重要部分だけ抜粋してのせておきます。 ■ HTML <div id="content"> <ul> <li><a href="images01.jpg"><img src="m_images01.jpg" alt="背景" /></a></li> <li><a href="images02.jpg"><img src="m_images02.jpg" alt="背景" /></a></li> <li><a href="images03.
パララックスの仕組み〜jQuery – IT工房｜Webデザイン入門
主な仕組み スクロールイベントを使用してスクロールした量だけオブジェクトを移動させます。 スクリプトで使用する主なメソッド スクロールイベントはscroll( )メソッドを使用します。 スクロール量を取得する方法は$(window).scrollTop( )で取得できます。 オブジェクトの現在の座標を取得するにはoffset( )を使用します。 オブジェクトの現在の座標は offset().top でy 軸、offset().left でx 軸の値がとれます。 HTML要素を動かす 動かす対象のオブジェクトをブロック要素でマークアップして、CSS でその要素をposition:fixedとして固定します。 スクロールするとテキストAを動かすサンプル HTMLコード <p id="no1">A</p> CSSコード #no1{ position:fixed; right:30px; top:
script.aculo.us の slider.js による逆向き縦スライダー
script.aculo.us ライブラリの slider.js による縦方向のスライダーは、通常、上が最小値、下が最大値だが、これを逆にし、上が最大値、下が最小値にする。 スライダーのハンドルをドラッグし上下に動かすと、現在の値を動的に表示し、最終的には、移動後の位置の値を表示する。スライダーのハンドルを上端に移動すると、最大値となり、スライダーのハンドルを下端に移動すると、最小値となる。 実装例 実装例の動作について スライダーの初期値は、「70」を指定してある。 スライダーのハンドル（黒い部分）をドラッグし上下に動かすと、スライダー下の「70」の数字が変化する。スライダーのハンドルを下端に動かすと「0」になる。スライダーのハンドルを上端に動かすと「100」になる。その間は、0より大きく、100より少ない、整数になる。 スライダーのトラック部分（グレーの部分）をクリックすると、瞬時に、
.fadeToggle() | jQuery 1.9 日本語リファレンス | js STUDIO
型：PlainObject メソッドに渡すオプションのマップになります。 duration 型：Number or String 初期値：400 アニメーションがどれぐらいの時間、実行されるのかを決定する値を指定します。 easing 型：String 初期値：swing トランジション(移り変わり)に使用されるイージング(easing)関数を表す文字列を指定します。 queue 型：Boolean or String 初期値：true エフェクトのキューに、アニメーションを追加するか否かを示す真偽値を指定します。 falseの場合は、そのアニメーションは即座に開始されます。 jQuery1.7から、文字列で表現されるアニメーションをキューに追加するケースで、 queueオプションが文字列も受け付けることが可能になりました。 カスタムのキュー名が使用されている場合、アニメーションは自動的に
jQueryのスライドメニューmmenuの使い方｜Gimmick log
<link rel="stylesheet" href="jquery.mmenu.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="jquery.mmenu.min.js"></script> htmlの記述 メニューとして表示させたい部分を任意のidを付与して囲います。ここでは id=”menu” の部分です。 htmlの記述のポイントは、メニューを表示させるためのボタンと、メニューが同じ親要素（ここでは#wrap）で囲われているかです。 また、その親要素の外に要素があると、メニューを表示した時に下の方に見切れたりする場合があるので、フッターなども含めて囲う要素がありそうです。 <div id="wrap"> <hea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://chibinowa.net/note/js/fixedsidebar.html
jQueryでDOM要素を削除する：remove(), empty(), unwrap(), detach()
https://cdbk.tokyo/post/jquery-snowfall-up-down
