クラス操作いろいろ スタイルを変えたいとかそういった理由でクラスを追加したり削除したりといじりたくなる機会がある。 参考:jQuery日本語リファレンス クラスの追加 addClass(class)
こんな感じでタブで選んで中身のコンテンツを入れ替えたい。 わかりづらいがこの上がタブで、下がコンテンツ。 しかも、そのタブは上下にあり、どちらでも中身のコンテンツを入れ替えられる。 ↓下 つまり、 こういう感じ。 で、問題なのは、 ・このコンテンツは1つ目だけが高さが少ない ・このコンテンツをdisplay: blockとdisplay:noneで入れ替えている の2つ。 高さが変わらないのであればdisplayで切り替えても問題ない。 もしくは高さが変わるならばdisplayではなくopacityとvisibilityで消して、コンテンツ自体は一番大きいのは普通に置いてそれ以外をabsoluteで重ねておいておけば良い。が、それだと下のタブからコンテンツまでのマージンがバラバラになってしまう。 であるならばdisplayでコンテンツの存在ごと切り替えてマージンは統一するしかない。 なので
jQueryのメソッドチェーンて、何…? ・jQueryのメソッドチェーンの書き方 ・そもそもjQueryの基本的な書き方 ・jQureyのコードをシンプルで綺麗に洗練した書き方 そんな事について知りたいヨ。
$('a[href^="#"]').click(function(){ var speed = 800, href = $(this).attr("href"), target = $(href === "#" || href === "" ? 'html' : href), position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); 冒頭にやつがいますね。[^="#"]さん。正規表現的な何かなのでしょうか。 ちなみに、jQueryのバージョンによっては#を""で囲まないと動作しないことがあるそうなので、私は無難に"#"としています。 「 ^= 」の名前はビット排他的論理和演算子 「^=」の部分で検索すると、「ビット排他的論理
問題 jQueryだけで、タブっぽいの、たのむ。 解答例 jquery.ui や twitter bootstrap を使えば、美しいタブ切り替えをあっという間に作成可能です。 ただ、比較的よく検索にヒットしている以前書いたこれの内容が古いので、改めてjqueryだけでタブ切り替え風の動きをさせてみます。 出来合いのライブラリを使うと、うまくデザインを変更できなくて困っているときにもどうぞ。 改善点 タブが増えるとスクリプトも変更して増やす必要のある作戦を考え直す。 今は event.preventDefault()なんて使わなくていい。 ソースサンプル <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQueryだけでタブ切り替えサンプル 2</title> <style type="text/css"> /* タブ
こんにちは、ライターのマサトです! 今回は、jQueryで深い階層下にある子要素を効率よく取得できる「find()」メソッドについて学習しましょう! この記事では、 「find()」とは? find()の使い方 each()による複数要素の取得 戻り値「length」とは? find()の検索技 「find()」と「children()」の違いとは? などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、「find()」メソッドをしっかり学習して自分のスキルアップを目指しましょう! 「find()」とは? それでは、まず最初に「find()」メソッドについて基本的な知識を学習していきましょう! 「find()」は、対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッドです。この子要素は「子孫要素」とも呼ばれたりしますが、分かりやす
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される(バブリング) preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く