【jQuery】HTML要素とCSSプロパティの操作

jQuery

ファイルを準備しよう！！

jQueryはJavaScriptファイル（拡張子.js）に記述します。前回勉強したJavaScriptの関数化を使い、外部ファイルに記述し操作していきます。


以下のHTMLを用意します。
jquery.html

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery：HTML要素とCSSプロパティの操作</title>

<!-- 先にjquery.jsライブラリーを読み込む！！ -->
<script type="text/javascript" src="JS/ext/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/app/sw04.js"></script>
</head>

<body>
<p>タグにアクセスする</p>
<p id="msg2">テキスト２</p>
<p class="msg3">テキスト３</p>
<h3 class="msg3">テキスト４</h3>
<br />
<p>タグの操作</p>
<p id = "msg4">文章</p>
<p id = "msg5">画像の差し替え</p>
<br />
<p id="msg6"><a href="http://yahoo.co.jp" title="link">リンク</a></p>
<br />
<p>スタイルの操作</p>
<p id = "style1">スタイル</p>
<br />
<p>イベント</p>
<p onclick="alert('クリックイベント')">クリックイベント</p>
<p onclick="eventClick()">クリックイベント２</p>

</body>

</html>

HTML要素の操作

jQueryを使うための文法は以下のようになります。function文にある中括弧｛ ｝の部分を改行して使います。

$(function( ){ });  //先頭の$記号を忘れずに！！


jQueryを使ってHTML要素を呼び出してみます。

$(function(){
	
	alert("jQuery");
	var msg1 = $("p").text(); //pタグのテキストを取得する
	var msg2 = $("#msg2").text(); //id = "msg2"のテキストを取得する
	var msg3 = $(".msg3").text(); //class = "msg3"のテキストを取得する
	var msg4 = $("h3.msg3").text(); //タグ.クラスの組み合わせ（タグ.id）
	
	alert(msg1);
	alert(msg2);
	alert(msg3);
	alert(msg4);
	
});


HTMLタグや属性を操作してみます。

$(function(){
	$("#msg4").text("文章1を書き換えました"); //$("タグ、クラス、ID要素").text("テキストの置き換え");
	$("#msg5").html("<img src='http://www.google.co.jp/intl/en_com/images/srpr/logo1w.png' />" ); //画像データの挿入
	$("#msg6 a").attr("href","http://google.co.jp"); //リンク要素の置き換え
});

CSSプロパティの操作

jQueryを使ってCSSプロパティを操作することができます。

$(function(){
	$("#style1").css("background-color","#0f0"); //スタイルの操作(CSSの操作)
});

イベントの操作

jquery.html上の「クリックイベント」は、onclick="alert('文字列')"を使ってイベントを発生させています。それではjQueryでマウスイベントを操作してみます。

function eventClick(){ //eventClickを関数化、アクションが起こった場合に実行する
	alert("クリックイベント２")
}

まとめ

ポイントとしては、途中経過でプログラムが正常に実行されているか確認します。$(function( ){ });がalert( );を使って正常に実行されているかを確認してみましょう。もし動かないときは関数が間違っている可能性があります。