Webの勉強～JQuery1日目～
こんにちはメグルです！！
昨日までJavascriptを学びましたが、今日からjQueryを学んでいきます！！
とはいっても、jQueryもJavascriptであり、
ｊQueryとは、
・ライブラリ
です。
代表的なのが、lightboxですね！！
本来、Javascriptで作るととてつもなくたくさんのプログラムを書かなければならないのですが、読み込むだけで取り入れられてしまうという便利なものです！！
こういったものを、「プラグイン」といいます！！
さて、jQueryを使うには、
javascriptのコードがたくさん書いてあるコードがあるので、そこから引き出して使っていく。
それを、読み込ませて使っていくのですが、方法は2パターンあり、一つ目が、jqueryのサイトに行きます。
１だけコピーして、headの中に貼り付けます。
だだ、loaclの環境で動かすには、赤文字の部分を追加します。
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
2つ目がgoogleから取得する方法です。
Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers
から、jqueryをクリック！！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
を読み込ませるという方法です。
では、実際に使っていきます！！
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background: red;
display: none;
}
</style>
</head>
<body>
<button>表示・非表示</button>
<div></div>
</body>
これがベースです。
ここからjqueryのコードを書いていきます。
<script>
$(function() {
$("button").click(function() {
$("div").show ("slow");
});
});
</script>
こう書くと、
ボタンができて、
クリックすると下のようになる。
ただ、これだけですが、javascriptで書くと、10行以上のコードが必要になります。
もうちょっと改造してみましょう！！
<script>
$(function() {
$("button").click(function() {
$("div").show ("slow", function() {
$(this).css("background", "yellow");
});
});
});
</script>
初めは、赤で出てきて、出終わったら、黄色になりました。
$(function() { ←ＨＴＭＬがロードされた時
});
上の中にjqueryを書いていきます。
これは省略した形です。
元々は、
$(document).ready(function {
});
このような形です。
<body>
<h1>おはようございます！</h1>
<p>今日は2月6日です。</p>
<ul>
<li id="first">リスト１</li>
<li id="second">リスト２</li>
<li class="third">リスト３</li>
<li>リスト４</li>
</ul>
</body>
<script>
$(function() {
$("h1").css("background-color","blue");
$("p").css("background-color","pink");
$("#first").css("color","red");
$("#second").css("font-weight","bold");
$(".third").css("background-color","yellow");
$("#second, .third").css("text-decoration","underline");
$("li:first").css("font-size","30px");
$("li:last").css("font-size","50px");
});
</script>
文字の変更です。
$("#first").text("文字を変更しました。");
で、
リスト１が文字を変更しました。に変わりました。
$("#second").text($("#first").text());
リスト２がリスト１に変わりました。
prependはその要素の最初に入れることができます。
appendが後に入れることができます。
$(".third").prepend("<b>←を変更しました</b>");
$(".third").append("<b>←を変更しました</b>");
before<li> prepend リスト append </li>after
に入ります。
次は、.prependTo
$("p").prependTo("h1");
pがh1タグに変わりました。
.appendTo()
insertBefor()
insertAfter()
次は属性の変更です。
<a href="http://www.yahoo.co.jp">ヤフージャパン</a>
$("a").attr("href","http://facebook.com");
.atterでヤフーから、フェイスブックに属性を変更しました。
()を空欄にすると
$("a").text($("a").attr("href"));
次に
$("a").removeAttr("target");
次に、
$("a").text($("a").attr("href"));
$("a").removeAttr("target");
を一つのコードにします。
メソッドチェーンというらしいです。
$("a").text($("a").attr("href")).removeAttr("target");
こう書くと続けて書けますし、処理も早くなるみたいなので、メソッドチェーンで繋げて書いていきましょう！！
イベント
・click()
・dblclick()
・mousedown()
・mouseup()
・mouseover()
・mousecount()
$(function() {
$("li").hover(function() {
$(this).css("color","blue");
},
function() {
$(this).css("color","black");
});
});
