bxSlider

jQuery

おすすめのスライダーを紹介します。それは、bxSliderです。とても加工が簡単ですしIEでも表示されるのでとてもおすすめです。 ①ファイルをダウンロード bxSliderの公式サイト(http://bxslider.com/)の右上の「Download」ボタンから必要なファイルをダウン…

2014-04-18

[ jQuery ] Lightbox風モーダルウィンドウ - テキスト p217~222 -

授業 jQuery

画像をクリックすると下記のように拡大表示する。 <body><div id="container"><h1>jQueryを利用したモーダルウィンドウの作成</h1><ul> <li><a href="img/01.jpg" class="modal"><img src="img/th01.jpg" alt="シャンデリア"></a></li> <li><a href="img/02.jpg" class="modal"><img src="img/th02.jpg" alt="バラ"></a></li> <li><a href="img/03.jpg" class="modal"></a></li></ul></div></body>

2014-04-17

[ jQuery ] eqセレクタを使ってリスト画像を表示させる -

jQuery 授業

2014-04-15

[ jQuery ] 四角をクリックしてalertを表示

授業 jQuery

jQueryで四角をクリックしてalertを表示させる <style>#box { width: 100px; height: 100px; background-color: #F90; cursor: pointer;}</style> ※cursor: pointer; はマウスが四角の上に来たときに矢印から指にかわる。<body><div id="box"></div><script>$('#box').click(function( ) { alert('クリックされ</script></body>…

2014-04-15

[ jQuery ] 子孫セレクタ -

jQuery 授業

複数のセレクターをスペース区切りで指定する事により、特定の要素の内側にある要素をさらに絞り込めることが出来ます。 <script> $(function( ) { $('.first strong').css('color', 'red'); });</script><body><h1>jQueryの練習(子孫セレクタ)テキストp30</h1><ul><li class="first"><strong>いぬ</strong>いぬいぬいぬいぬいぬ</li><li class="second"><strong>ねこ</strong></li></ul></body>…

2014-04-15

[ jQuery ] クラスセレクタ -

jQuery 授業

クラスセレクタは、特定のclass属性を持つ要素に対して命令を実行します。 class属性の値に .(ドット) を付けたものをセレクターとして利用します。 <script> $(function( ) { $('.second').css('color','red'); });</script><body><h1>jQueryの練習(クラスセレクタ)テキストp29-30</h1><ul><li class="first">いぬ</li></ul></body>…

2014-04-15

[ jQuery ] IDセレクタ -

jQuery 授業

IDセレクタは、特定のid属性を持つ要素を対象にします。 <script> $(function( ) { $('#first').css('color','red'); $('li#second').css('color','blue'); });</script><body><h1>jQueryの練習(IDセレクタ)テキストp28</h1><ul><li id="first">いぬいぬいぬいぬいぬいぬ</li><li id="second">ねこねこねこねこねこねこ</li><li id="third">さるさるさるさ</li></ul></body>…

2014-04-15

[ jQuery ] h1を赤く liを青く

jQuery 授業

jQueryを使って h1を赤く liを青くしました。 <script> //jQueryの命令をここに記述 $(function( ) { $('h1').css('color', 'red'); $('li').css('color','blue'); });</script><body><h1>jQueryの練習</h1><ul><li>いぬ</li><li>ねこ</li><li>さる</li><li>きじ</li></ul></body>

2014-04-14

[ jQuery ] 文字を赤くする

jQuery 授業

jQueryを使って文字を赤くなるように記述しました。 <html lang="ja"><head><meta charset="utf-8"><title>jQueryの練習</title><script src="js/jquery-1.11.0.min.js"></script><script> //jQueryの命令をここに記述 $(document).ready(function( ) { $('h1').css('color', 'red'); }); </script></head><body><h1>jQueryの練習</h1></body></html>