jQuery
r-cmsにおけるjQueryの導入方法 [jquery]
投稿日時:2013/09/27(金) 22:44
jQueryは、JavaScriptライブラリで、JavaScriptプログラミングを非常にシンプルにしたプログラムです。
また、r-cmsは、高性能なWebページ制作プログラムです。
素人が、ホームページを作り始める場合基本となる素材が重要です。
そこで、いろいろ情報がひろがっている中、シンプルで基本的でもっとも重要だと思うプログラムを
実践しながら学んで行きましょう。
学習すること:
r-cmsにどのようにjQueryを使用して JavaScriptの効果をWebページに適用するかを学習します。
"試してください" ボタンをクリックし、どの様に動くかを見てください。
また、r-cmsは、高性能なWebページ制作プログラムです。
素人が、ホームページを作り始める場合基本となる素材が重要です。
そこで、いろいろ情報がひろがっている中、シンプルで基本的でもっとも重要だと思うプログラムを
実践しながら学んで行きましょう。
学習すること:
r-cmsにどのようにjQueryを使用して JavaScriptの効果をWebページに適用するかを学習します。
Example,1 |
||
基本jQuery構文 <html> <head> <script type="text/javascript" src="/files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>あなたは私をクリックすると、私は消えます。</p> </body></html> *///////////////////////////// r-cmsのhtmlに記入例 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide() }) }) </script> <p><strong><span style="font-size:130%;">あなたは私をクリックすると、私は消えます。</span></strong></p> <table border="1" cellpadding="1" cellspacing="1" style="width: 150px;"> <tbody> <tr> <td style="text-align: center; background-color: rgb(51, 153, 255);"><strong><a href="http://n-ashikawa.d2.r-cms.jp/blog_top/"><span style="color:#ffffff;">戻る</span></a></strong></td> </tr> </tbody> </table> |
||
試してください |
コメント