OTEGARA.COM 今日八つの感謝

HTML-基本-1

  • HOME »
  • HTML-基本-1

DLしたjQuery本体をサーバー内の適当な場所にアップロードしたら、headタグ内に以下のように記述すればOK。
jQueryのコードは、headタグ内

<head>
(中略)
<script type="text/javascript" src="ライブラリをアップロードした場所/jquery-1.8.2.min.js"></script>
(中略)
</head>

更に簡単なのがこちらの方法。

<head>
(中略)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
(中略)
</head>

↑このように記すだけ。ワーオ、簡単ですね。細かい説明は割愛だ!
本体のDLの必要がありませんこちらの方法。それだけに実装は簡単ですが、ネット環境のある場所でないとjQueryが動きませんので注意してください。

<head>
(中略)
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="ライブラリをアップロードした場所/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<div class="hoge1">
このテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキサスは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなりますこのテキストは青くなります
</div>

(セレクタは「“」(ダブルクォーテーション)、もしくは「’」(シングルクォーテーション)で囲うのを忘れずに。)

CSS

.hoge1{
color:#333;
}
//サンプル2A
$(function(){
$(".hoge2A").click(function(){
$(this).css("background-color","green")
});
});
//サンプル3A
$(function(){
$(".hoge3A").hover(
//マウスオーバー時の処理
function(){
$(".red").css("background","red")
},
//マウスアウト時の処理
function(){
$(".red").css("background","#FC9")
});
});
PAGETOP
Copyright © OTEGARA.COM 今日八つの感謝 All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.