タグ: jQuery

jQueryはJavaScriptのファイル。ライブラリとして利用する。配布されているjQueryのファイルを外部読込する記述を行った次の行からjQueryのルールに沿った記述を行えば、簡潔に動き(これを振る舞いという)のあるページを作成できる。

使えるようにするのは次の通り

  1. jQueryのファイル(.jsファイル)をダウンロード
  2. ダウンロードしたjQueryを配置する
  3. 配置したjQueryのファイルを<script src=”jquery.js”></script>のような記述で読み込ませる(ファイル名は変更しても良い)
  4. 読み込み記述の次の行からjQueryのルールでJavaScriptを使用できる
  5. アニメーションやHTMLの操作などを行いたい場所に記述する

    jQueryを使って指定した要素を削除する/HTMLの操作・構造の編集

    クラスやID、または、指定できる位置にある要素をピンポイントで削除したい時。または、まとめてそのタグで囲まれているものを一括削除したいときに利用できる。 remove() remove()という削除関数がある。これは、例えばタグを指定すればそのタグを全て削除することが出来る。クラスを指定すれば、そのクラスの指定されている要素をタグに依存せずに除去できる。 その1 $("p").remove(); <div> <p>あいうえ...

    jQueryを使って、指定した要素のテキストやHTMLを取得する

    うまく2つの特徴を利用して、値を取得すると良いかも。取得する以外にも、テキストを挿入したり、HTMLを挿入することも出来る。 text() sample1Text = $('.sample1 .sample-box').text(); .sample1の子要素「.sample-box」内に入っているテキストを取得して、sample1Textに代入する(セットする)。 HTMLを除去した文字列が代入される。 html() sample2HTML = $('.sample2 .sample-box').text(); .sample2の子要...

    jQueryを使って、指定した要素を囲む・親要素を創る

    wrap---系は、指定したコンテンツを囲む。 wrap() 指定した要素を一つずつバラバラに指定した親要素として囲む。 $('p').wrap('<div class="sample1" />'); 全ての<p>を <p>あああ</p> <p>いいい</p> <p>ううう</p> ↓ <div class="sample1"><p>あああ</p></div> <div class="sample1"><p>いいい</p></div...

    jQueryを使って、指定要素の前や後ろに差し込み、HTMLの操作/構造を編集する

    既存のHTMLだと、うまくカスタマイズできないことがある。jQueryが使用できる環境であれば、ASPでもパーツの位置を変更することができて、オリジナリティあふれるサイトに作り変えることが可能。 after---は指定タグの同階層後ろに挿入。before---は指定タグの同階層前に挿入する。子要素として挿入する時は、appendTo・append/prependTo・prependを使用する。 after() コード例: $(".sample1").after("<p>追加<...

    ★jQueryを使って、コンテンツを差し込み、HTMLの操作/構造を編集する

    既存のHTMLだと、うまくカスタマイズできないことがある。jQueryが使用できる環境であれば、ASPでもパーツの位置を変更することができて、オリジナリティあふれるサイトに作り変えることが可能。 ap---は後ろに挿入。pre---は前に挿入する。 append() コード例 $(".sample1").append("<span>追加</span>"); .sample1に<span>追加</span>を追加する。 AにBを追加するということ。 <u...

    bxsliderのフェードを利用してぼやけた画像をアニメーションで表示

    bxsliderのフェードを利用してアニメーションのスライダーをspeedが500、pauseを0として、ぬるぬると変化させるアニメーションを作ってみた。 工夫すれば、定点カメラの写真を時間経過的に美しく表現することが可能になるのではないかと思う。 CSSのdisplay:table;サンプル ul liでコーディングした場合。 CSS .bxslider ul{ display:table; } .bxslider ul li{ display:table-cell; } JavaScript $(function(){ $(...

    三国大戦スマッシュ!(さんすま!) 公式サイト

    ここまで動きが付いているとびっくりする。一昔まえのFlashくらいの動きはふつうにjQueryで実現しているみたい。 こういった環境下で開発を行っているからこそどんどんギミックなどを作成する技術が向上していくんだろうなぁ。 http://www.sangokutaisen-smash.com/