タグ: jQueryの使い方・活用方法

jQueryはHTML・CSSで実現できない振る舞いを指定することが可能なスクリプト。活用することにより、ページの内容を操作でき、予め表示されるページ内容を動的に表現することが可能。

  • HTMLは要素の定義
  • CSSは要素の装飾
  • JavaScriptは準備された要素や装飾に変化を与える(振る舞い)

    jQueryプラグインのinstafeed.jsを使って、インスタグラムのフィードを表示する

    Instagramに投稿されたデータをAPIを使用して、取得し表示する。 Instagramのデベロッパーにアクセスする アプリを登録する、日本語で内容を入力してOK Disable implicit OAuth: チェックを外す これを外しておかないと、アクセストークンが取得できない 下記のようなURLにアクセスすると、アクセストークンがURLに表示される 書式:https://api.instagram.com/oauth/authorize/?client_id=【CLIENT ID】&a...

    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...

    flexsliderを使って景色写真のフェードを行うアイデア

    フェードイン・フェードアウトの機能はjQueryプラグインのbxsliderを利用すれば実現可能。 フェードイン・フェードアウトというのは画像をふわっと半透明にさせていき、次の画像と半透明になり重なりながら次の画像に変化するというエフェクト。 デフォルトのフェードイン・フェードアウトでも、画像を4枚ほど使用すればかなり良い物に仕上がる。 簡単なフェードイン・フェードアウト 画像を複数枚用意する ...