3.jQueryを使用する
jQueryの使い方について、見ていきます。
jQueryのソースはscriptタグの中に記述します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="jquery-1.9.1.min.js"></script> <script type=”text/javascript”> // ここにjQueryの処理を記述します </script> <title>Insert title here</title> </head> <body> </body> </html>
main.jsを読み込んで、main.js内で、javascriptのソースを記述していくこともできます。（当たり前ですが)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="jquery-1.9.1.min.js"></script> <script src="main.js"></script> <title>Insert title here</title> </head> <body> </body> </html>
jQueryで、cssの要素を変更する。
それでは、jQueryを使用して、htmlの要素を変換してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").css("color","red");
});
</script>
</head>
<body>
<p>pタグの中の文字色を赤に変換</p>
</body>
</html>
まずは、$(document).ready(function(){}から見ていきます。
$はjQueryの関数であることを意味しています。なので、$がついているとjQueryを使っているということがわかります。
そして、documentオブジェクトに対して、ready関数を呼んでいます。
ready関数は、いったんhtmlを読み込んでから実行する関数です。
また、ready関数は、
$(function(){
});
と書いても同じことになります。
次は、$("p").css("color","red");を見ていきます。
このプログラムは、html上で書かれた全てのpタグのcolor要素をredに書き換えるものです。
設定したcss上のpタグで、color要素が記述されていなくとも、color要素がredに変わります。
このようにcssの要素を指定すれば、要素の値を簡単に変更することができます。
先程は、pで指定された要素すべてを変更しましたが、特定のクラスや、idに対しても変更することができます。
classの場合は、$("p.クラス名").css("color","red");
idの場合は、$("p#id名").css("color","red");
これで、特定の要素を変更することができます。