※タイトルが長い間「class()」となっていましたが、「css()」の間違いです。。。

フォントの色を変更する場合、HTMLに「style=”color: #CC0000;”」等の記述をします。jQueryでも「class()」style属性を操作できます。

//id=msgの要素のstyle属性のcolorの値を取得する
$("#msg").css("color");
//id=msgの要素のstyle属性にcolor:redを追加する
$("#msg").css("color":"red");
//id=msgの要素のstyle属性にcolor:redとbackground-color:000000を追加する
$("#msg").css({"color":"red" , "background-color":"000000"});

プロパティは一つだけでなく複数設定することができます。
1つの場合は「css(“プロパティ名”,”設定する値”)」
複数の場合は「css({“プロパティ名”:”設定する値” , “プロパティ名”:”設定する値”})」
と指定します。
「 , (カンマ)」「 { } (中括弧)」「 : (コロン)」の使い方に注意しましょう。

jQuery – css サンプル

またjQuery – css サンプルを「IE」と「Firefox」で見比べるとわかるのですが、IEでは値に指定したそのままの値「000000」表示され、Firefoxでは「rgb(0,0,0)」と表示が変わります。いろいろ試してみたのですが短縮プロパティ（border:1px solid #000000等）を指定するとMacのSafariでは値が取得できませんでした。

jQueryにはCSSのクラスを追加・削除できるメソッドも用意されています。「css()」を使うよりも、CSSでスタイルを指定してCSSのクラスを操作した方がいいかもしれませんね。

要素内にあるHTML文字列（HTMLタグが含まれた文字列）を取得・変更する場合は「html()」を使います。

取得する場合は「html()」、変更する場合は「html(”変更後の文字列”)」を指定します。

//id=msg内のHTML文字列を取得します。
$("#msg").html();
//id=msg内のHTML文字列を変更します。
$("#msg").html("<p>文字を変更しました。</p>");

HTML要素が含まれている場合、HTMLタグも扱うことができます。
「text()」と動きが似ていますが、text()の場合はHTMLタグは文字として解釈されます。下記サンプルで両方を用意したので動作を試してみて下さい。

jQuery – html サンプル

また「html()」を使うとき、「 "（ダブルクオート）」に注意して下さい。
例えば下記のように書くとエラーになります。

$("#msg").html("<p class="msg">文字を変更しました。</p>");

これは「 "（ダブルクォート）」で挟んだものが「文字列」として認識されるため、「"msg"」のところで一旦区切れてしまい、それ以下の記述がJavascriptのルールから外れてしまうからです。

そこでこれを回避するために、全体を「 ‘（シングルクォート）」で囲みます。

//中に「 "（ダブルクォート）」がある場合は「 '（シングルクォート）」で囲みます。
$("#msg").html('<p class="msg">文字を変更しました。</p>');

「 ‘（シングルクオート）」で囲むとその中にある「 "（ダブルクォート）」を文字列として扱ってくれるようになります。

自分自身、基本は「 "（ダブルクォート）」を利用するので、上記のような場合「 ‘（シングルクォート）」に変え忘れてしまうことがあります…。注意しましょう。

jQueryでページ内リンクをスムーズに移動（ページトップへ等）するものを作ろうと思いいろいろ調べていたら、いいページを見つけたので早速試してみました。

We Ain’t Seen Nothin’ Yet. : [Rails meets jQuery] jQueryで作るページ内目次とスムーススクロール

上記の記事では「Interface.js」を利用しているようなのですが、動作させるコードを読んでいるとInterface.jsをどこで使っているかわからなかったので、jQueryだけで動作確認すると、とりあへず動きました。jQueryの古いバージョンでは「scrollTop」がjQuery自体に含まれていなかったのかもしれませんが、最近jQueryをいじり始めたため詳しいことはわかりません…。

ということでコードはほぼそのまま利用させていただき、スクロール動作だけを変更しています。
使用ファイルは「jquery-1.2.6.min.js」と「jquery.easing.1.3.js」を利用しています。

使用ライブラリ・プラグインダウンロード先
Downloading jQuery – jQuery JavaScript Library（jquery-1.2.6.min.js）
jQuery Easing Plugin（jquery.easing.1.3.js）

サンプル
jQueryでページ内スムーズスクロール サンプル

Javascritp部分

$(function() {
	$('a[href*=#]').click(function() {
		if (location.pathname.replace(/^€\//,'') == this.pathname.replace(/^€\//,'') &&　location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length && target;
			if (target.length) {
				var sclpos = 30;
				var scldurat = 1200;
				var targetOffset = target.offset().top - sclpos;
				$('html,body')
					.animate({scrollTop: targetOffset}, {duration: scldurat, easing: "easeOutExpo"});
				return false;
			}
		}
	});
});

「var sclpos = 50」で止まる位置にどれぐらい「上に隙間」をあけるか位置を調節できます。「0」を指定すればぴったりの位置、50を指定すると50px余裕を持った位置で停止します。
「var scldurat = 1200」で移動スピードを調節できます。大きい数字ほどゆっくりスクロールします。

HTML部分

… 省略 …
<div id="top">
<h1>jQueryでページ内スムーズスクロール</h2>
<a href="#no1">タイトル1</a>　|　<a href="#no2">タイトル2</a>　|　<a href="#no3">タイトル3</a>　|　<a href="#no4">タイトル4</a>
</div>
<div id="box1">
<h2 id="no1">タイトル1</h2>
… 省略 …
<a href="#top">ページトップへ</a>

リンクに移動先に割り当てたID名を記述するだけです。

ちょこちょこっとMac・Winで動作確認しましたが、動いているようなのでひとまずよしとしておきましょう…。

では今回はこのへんで。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。