Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

2014-04-15から1日間の記事一覧

[ 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>…

[ 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>…

[ jQuery ] クラスセレクタ -

jQuery 授業

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

[ 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>…

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