$(function(){
floatBox("#headerFixedBox");
floatBox("#asideFixedBox", 1);

//ele=固定する要素、flag=サイドバーに固定する要素があり、フッターにかぶらないようにする場合に「1」を指定
function floatBox(ele, flag) {
	//固定する要素を取得
	var box = $(ele);
	//固定する要素の位置を取得
	var fixed_box_offset = box.offset();
	//固定する要素のサイズを取得
	var box_size = {"width": box.width(), "height":  box.height()};
	//フッター要素の位置を取得
	var footer_box_offset = $("#footer").offset();
	//スクロールイベントが発生したら実行
	$(window).scroll(function() {
		//スクロール位置を取得
		var scroll_val = $(this).scrollTop();
		//固定する要素の位置よりスクロール位置が大きくなれば...
		if(scroll_val > fixed_box_offset.top) {
			//固定する要素にtop:0が指定されていなければ...
			if(box.css("top") != 0) {
				//スタイルを追加
				box.css({
					"position": "fixed",
					"z-index": 999,
					"width": box_size.width,
					"height": box_size.height,
					"top": 0,
					"bottom": "auto"
				});
			}
			//フッターがあり、横メニューがかぶらないようにする場合は...
			if(flag == 1) {
				//フッターの位置よりスクロール位置が大きくなれば...
				if(scroll_val > (footer_box_offset.top - box_size.height)) {
					//スタイルを追加
					if(box.css("bottom") != 0) {
						box.css({
							"position": "absolute",
							"z-index": 999,
							"width": box_size.width,
							"height": box_size.height,
							"top": "auto",
							"bottom": 0
						});
					}
				}
			}
		//固定する要素の位置よりスクロール位置が小さければ...
		} else {
			//固定する要素のstyle属性を削除
			box.removeAttr("style");
		}
	});
}
});

/*
#headerFixedBoxのもととなる要素
*/
#wrap {
	position: relative;
	margin: 0 auto;
	width: 900px;
}
/*
#asideFixedBoxのもととなる要素
*/
#aside {
	position: relative;
	float: right;
	width: 280px;
	min-height: 1600px;
	background: #111;
	color: #eee;
}

	//フッター要素の位置を取得
	var footer_box_offset = $("ここを書き換え").offset();

■ 要素選択の記述を見直す

<script>
$(function(){
	○○○.text("■■■ 書き換えたよ ■■■");
});
</script>

<div id="wrap">
	<div id="content">
	<h1>タイトル</h1>
	<p class="text">テキスト..................</p>
	<div class="text">※ ここを見つける ※</div>
	<div class="text">テキスト..................</div>
	</div>
</div>

<script>
$(function(){
	$("p + div").text("■■■ 書き換えたよ ■■■"); //0.679秒
	$("p").next().text("■■■ 書き換えたよ ■■■"); //0.693秒
	$("#content").find("div").first().text("■■■ 書き換えたよ ■■■"); //0.746秒
	$("#content div").eq(0).text("■■■ 書き換えたよ ■■■"); //0.767秒
	$("div.text").first().text("■■■ 書き換えたよ ■■■"); //0.762秒
	$("#content div").first().text("■■■ 書き換えたよ ■■■"); //0.778秒
	$("p").next("div").text("■■■ 書き換えたよ ■■■"); //0.808秒
	$("div#content").find("div").first().text("■■■ 書き換えたよ ■■■"); //0.945秒
	$("div.text:contains('※ ここを見つける ※')").text("■■■ 書き換えたよ ■■■"); //1.164秒
	$("div.text:first").text("■■■ 書き換えたよ ■■■"); //1.803秒
	$(".text").eq(1).text("■■■ 書き換えたよ ■■■"); //0.697秒
	$("div.text").eq(0).text("■■■ 書き換えたよ ■■■"); //0.753秒
});
</script>

	$("div.text:first").text("■■■ 書き換えたよ ■■■"); //1.803秒
	$("#content div:first").text("■■■ 書き換えたよ ■■■"); //1.815秒

	$("#content").find("div").first().text("■■■ 書き換えたよ ■■■"); //0.746秒
	$("div#content").find("div").first().text("■■■ 書き換えたよ ■■■"); //0.945秒

	$("#content").find("div").first().text("■■■ 書き換えたよ ■■■"); //0.746秒
	$("#content div").first().text("■■■ 書き換えたよ ■■■"); //0.778秒

	$(".text").eq(1).text("■■■ 書き換えたよ ■■■"); //0.697秒
	$("div.text").eq(0).text("■■■ 書き換えたよ ■■■"); //0.753秒

■ 繰り返す記述を見直す

	$("#content").append("<p>書き換え済み</p>");
	$("#content").find(".text").css("color","red");
	$("#content").find(".text").text("■■■ 書き換えたよ ■■■");

	var content = $("#content");
	var content_text = content.find(".text");
	content.append("<p>書き換え済み</p>");
	content_text.css("color","red").text("■■■ 書き換えたよ ■■■");

	for(var i=0; i<10; i++){
		$("#content").append("<p>テキストを追加しました。</p>");
	}

	//new Array() = データを入れる配列を生成
	var add_data = new Array();
	for(var i=0; i<10; i++){
		//.push データを配列に入れる
		add_data.push("<p>テキストを追加しました。</p>");
	}
	//add_data.join('') 配列を結合
	$("#content").append(add_data.join(''));

■ 最後に処理時間の計り方

<script>
$(function(){
	//繰り返す回数
	var end_count = 1000;
	var start_time = new Date();
	for (var start_count=0; start_count<end_count; start_count++){
		//実行する処理を書く
	}
	var end_time = new Date();
	var msec = (end_time - start_time)/1000;
	alert("結果："+ msec +"秒かかりました");
});
</script>

<script>
$(function(){
	var now = new Date(); //現在の日時を取得
	var h1Class = $("h1").attr("class"); //h1のclassを取得
	var aDate = h1Class.replace("new","").split("-"); //取得したclassを整形
	var add_date = new Date(aDate[0], aDate[1], aDate[2]); //Dateオブジェクトに変換
	//もし現在が日時がclassで指定した日時より前なら画像を表示
	if(now < add_date) $("h1.new2011-12-21").append('<img src="new.gif">');
});
</script>
<!-- class名に画像の表示年月日を付ける -->
<h1 class="new2011-12-21">新色 ふかふか手編みマフラー</h1>

[ DOM操作（Manipulation) ]

[ セレクタ ]

[ トラバース ]

<div>
	<ul>
		<li>兄</li>
		<li>この要素から見て....ul要素は親、div要素は先祖</li>
		<li>弟</li>
	</u/>
	ul要素からみるとli要素は子、div要素は親ということになります。
</div>

carouselPanel("#carouselwrap", "left", 1);

/* Copyright (c) 2011 detelu (http://www.detelu.com)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * carouselPanel.js
 * Version: 2011-11-18
*/
//id=ターゲットになる要素のid名、posmove=横に動かしたい場合はleft,縦はtop、limove=スライドさせるliの数を引数として設定
function carouselPanel(id,posmove,limove) {
	var carousel_size,ul_size,ul_w_size,ul_h_size,li_move_top,li_move_left;
	//ターゲットになる要素を変数 tgt に代入
	var tgt = $(id);
	//tgtの要素の中に戻る、進むボタンを追加
	tgt.append('<div class="prev hide"></div><div class="next show"></div>');
	//tgtの要素の中からulタグ要素を抜き出し変数 tgt_ul に代入
	var tgt_ul = tgt.find("ul");
	//tgtの要素の中からliタグ要素を抜き出し変数 tgt_li に代入
	var tgt_li = tgt.find("li");
	var li_move = limove;
	var li_w_size = tgt_li.outerWidth();
	var li_h_size = tgt_li.outerHeight();
	var li_num = tgt_li.size();
	//引数 posmove に left が指定されていたら 横に動かすのに必要な値を変数に代入していく
	if(posmove == "left") {
		carousel_size = tgt.width();
		ul_w_size = li_w_size*li_num;
		ul_h_size = li_h_size;
		ul_size = ul_w_size;
		li_move_top = 0;
		li_move_left = li_w_size*li_move;
	//引数 posmove に top が指定されていたら 縦に動かすのに必要な値を変数に代入していく
	}else if(posmove == "top") {
		carousel_size = tgt.height();
		ul_w_size = li_w_size;
		ul_h_size = li_h_size*li_num;
		ul_size = ul_h_size;
		li_move_top = li_h_size*li_move;
		li_move_left = 0;
	}
	tgt_ul.css({position: 'absolute',top: '0',left: '0', width: ul_w_size+'px', height: ul_h_size+'px'});
	var tgt_prev = tgt.find("div.prev");
	var tgt_next = tgt.find("div.next");
	tgt_prev.click(function(){
		//クリックされた要素（ここではclass名 prevの要素）にclass名 hideが指定されていなければ以下を実行
		if(!$(this).hasClass('hide')){
				tgt.find('ul:not(:animated)').animate(
				{top:'+='+li_move_top, left:'+='+li_move_left},
				600,
				function(){
					var ul_pos = boxPosition(tgt_ul, posmove);
					//tgt_next に代入されている要素のclass hide を取り除き、class show を追加
					tgt_next.removeClass("hide").addClass("show");
					if(ul_pos === 0) {
						tgt_prev.removeClass("show").addClass("hide");
					}
				}
			);
		}
	});
	//クリックされた要素（ここではclass名 nextの要素）にclass名 hideが指定されていなければ以下を実行 以下略
	tgt_next.click(function(){
		if(!$(this).hasClass('hide')) {
			tgt.find('ul:not(:animated)').animate(
				{top:'-='+li_move_top, left:'-='+li_move_left},
				600,
				function(){
					var ul_pos = boxPosition(tgt_ul,posmove);
					tgt_prev.removeClass("hide").addClass("show");
					if(carousel_size >= (ul_size + ul_pos)) {
						tgt_next.removeClass("show").addClass("hide");
					}
				}
			);
		}
	});
	function boxPosition(ele,pos) {
		var position = ele.position();
		return position[pos];
	}
}

var tgt = $(id);

var tgt_ul = tgt.find("ul");

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="carouselPanel.js"></script>
<script>
$(function(){
	//carouselPanel("カルーセルパネルのid名", "left(左右に動かす) or top(上下に動かす)", 戻る、進むでスライドさせるliの数);
	carouselPanel("#carouselwrap", "left", 1);
});
</script>

<div id="carouselwrap">
<div id="prev" class="hide"></div><div id="next" class="show"></div>
<div id="carousel">
<ul>
	<li><a href="#"><img src="img/1.gif"></a></li>
	<li><a href="#"><img src="img/2.gif"></a></li>
	<li><a href="#"><img src="img/3.gif"></a></li>
	.......
</ul>
</div>
</div>

<style>
* {
	margin: 0;
	padding: 0;
}
#carouselwrap {
	position:relative;
	margin:40px auto;
	width:900px;
	height:155px;
	background: #efefef;
}
#carouselwrap #carousel {
	position:relative;
	width:100%;
	height:100%;
	overflow: hidden; //はみでた部分を隠す
}
#carouselwrap ul{
	list-style-type:none;
}
#carouselwrap ul li {
	float:left; // liを横並びにする
	width: 270px;
	height:100%;
	padding-left: 23px;
	display:inline;
}
#carouselwrap ul li img {
	border:none;
}
#carouselwrap #prev,
#carouselwrap #next {
	position: absolute;
	top: 0;
	width: 20px;
	height:100%;
}
#carouselwrap #prev {
	left: -20px; //戻るボタンを左端に配置
	background-image: url(./img/prev.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#carouselwrap #next {
	right: -20px; //進むボタンを右端に配置
	background-image: url(./img/next.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
// ボタンがアクティブなときは「show」、使えないときは「hide」
#carouselwrap .show {
	cursor: pointer;
	background: #FF3399;
}
#carouselwrap .hide {
	background: #ccc;
}
</style>

<script>
$(function(){
	// prev,nextをクリックしたときに動かすliの数
	var li_move = 3;
	// prev,nextを追加
	$("#carouselwrap").append('<div id="prev" class="hide"></div><div id="next" class="show"></div>');
	// カルーセルパネルの幅を取得
	var carousel_wid = $("#carouselwrap").width();
	// liのpaddingを含む幅を取得
	var li_wid = $("#carousel li").outerWidth();
	// liの数を取得
	var li_num = $("#carousel li").size();
	// ulの幅を計算(liを全部横に並べた幅)
	var ul_wid = li_wid*li_num;
	// ulにスタイルを追加
	$('#carousel ul').css({
		position: 'absolute',
		top: '0',
		left: '0',
		width: ul_wid+'px'
	});
	$('#prev').click(function(){
		// prevをクリックしたときにclass=hideが指定されていなければ、以下を実行
		if($(this).attr("class") != "hide") {
			// ulのpositionを左に動かすアニメーション(:not(:animated)は動いている最中のクリック防止用)
			$('#carousel ul:not(:animated)').animate(
				{left:'+='+li_wid*li_move},
				600,
				function(){
					// アニメーションが完了したらulのposition-leftの位置を取得
					var ul_pos = boxPosition("#carousel ul","left");
					// nextのclassを「show」に書き換え
					$('#next').attr("class","show");
					// ulのposition-leftが0の場合、prevのclassを「hide」に書き換え
					if(ul_pos === 0) {
						$('#prev').attr("class","hide");
					}
				}
			);
		}
	});
	$('#next').click(function(){
		// nextをクリックしたときにclass=hideが指定されていなければ、以下を実行（以下略）
		if($(this).attr("class") != "hide") {
			$('#carousel ul:not(:animated)').animate(
				{left:'-='+li_wid*li_move},
				600,
				function(){
					var ul_pos = boxPosition("#carousel ul","left");
					$('#prev').attr("class","show");
					if(carousel_wid > (ul_wid+ul_pos)) {
						$('#next').attr("class","hide");
					}
				}
			);
		}
	});
	function boxPosition(ele,pos) {
	 	// 指定されたエレメントのpositionの各値を取得
		var position = $(ele).position();
		// 指定された位置の値をリターン
		return position[pos];
	}
});
</script>

#carouselwrap {
	position:relative;
	margin:40px auto;
	width:270px;
	height:340px;
	background: #efefef;
}
#carouselwrap ul li {
	width:100%;
	height: 155px;
	padding-top: 10px;
}
#carouselwrap #prev,
#carouselwrap #next {
	position: absolute;
	left: 0;
	width: 100%;
	height:20px;
}
#carouselwrap #prev {
	top: -20px;
	background-image: url(./img/top.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#carouselwrap #next {
	bottom: -20px;
	background-image: url(./img/bottom.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

<script>
$(function(){
	// prev,nextをクリックしたときに動かすliの数
	var li_move = 2;
	// prev,nextを追加
	$("#carouselwrap").append('<div id="prev" class="hide"></div><div id="next" class="show"></div>');
	// カルーセルパネルの高さを取得
	var carousel_wid = $("#carouselwrap").height(); //*****書き換え******//
	// liのpaddingを含む高さを取得
	var li_wid = $("#carousel li").outerHeight(); //*****書き換え******//
	// liの数を取得
	var li_num = $("#carousel li").size();
	// ulの高さを計算(liを全部縦に並べた高さ)
	var ul_wid = li_wid*li_num;
	// ulにスタイルを追加
	$('#carousel ul').css({
		position: 'absolute',
		top: '0',
		left: '0',
		height: ul_wid+'px' //*****書き換え******//
	});
	$('#prev').click(function(){
		// prevをクリックしたときにclass=hideが指定されていなければ、以下を実行
		if($(this).attr("class") != "hide") {
			// ulのpositionを左に動かすアニメーション(:not(:animated)は動いている最中のクリック防止用)
			$('#carousel ul:not(:animated)').animate(
				{top:'+='+li_wid*li_move},
				600,
				function(){
					// アニメーションが完了したらulのposition-topの位置を取得
					var ul_pos = boxPosition("#carousel ul","top"); //*****書き換え******//
					// nextのclassを「show」に書き換え
					$('#next').attr("class","show");
					// ulのposition-topが0の場合、prevのclassを「hide」に書き換え
					if(ul_pos === 0) {
						$('#prev').attr("class","hide");
					}
				}
			);
		}
	});
	$('#next').click(function(){
		// nextをクリックしたときにclass=hideが指定されていなければ、以下を実行（以下略）
		if($(this).attr("class") != "hide") {
			$('#carousel ul:not(:animated)').animate(
				{top:'-='+li_wid*li_move},
				600,
				function(){
					var ul_pos = boxPosition("#carousel ul","top"); //*****書き換え******//
					$('#prev').attr("class","show");
					if(carousel_wid > (ul_wid+ul_pos)) {
						$('#next').attr("class","hide");
					}
				}
			);
		}
	});
	function boxPosition(ele,pos) {
	 	// 指定されたエレメントのpositionの各値を取得
		var position = $(ele).position();
		// 指定された位置の値をリターン
		return position[pos];
	}
});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<div class="tabarea">  
<ul class="tabs">  
<li id="tab_1" class="selected">メニュー１</li>  
<li id="tab_2">メニュー２</li>  
<li id="tab_3">メニュー３</li>  
</ul>  
<div id="content_1" class="content">『メニュー１』のコンテンツです。</div>  
<div id="content_2" class="content">『メニュー２』のコンテンツです。</div>  
<div id="content_3" class="content">『メニュー３』のコンテンツです。</div>  
</div>

.tabarea {
	background: #000;
}
ul.tabs {  
	display: box;
	display: -webkit-box;
	display: -moz-box;
	margin:0px;
	padding:0px;
	background: #000;
}
ul.tabs li {  
	list-style:none;
	padding: 20px;
	border: 1px solid #000;  
	border-bottom: 0;
	color: #fff;
}
div.content {
	padding: 20px;
	border: 1px solid #000;  
	border-top: 0;
	background: #fff;
}
.tabarea .selected {
	background: #fff;
	color: #000;
}
#content_2, #content_3 {
	display: none;
} 

$(function(){
	$(".tabarea .tabs li").click(function(){
		var tab = $(this).attr("id"); //クリックされたタブのidを取得
		var num = tab.split("_"); //セパレータで分割
		var con = "#content_" + num[1]; //表示させるコンテンツのid名を生成
		$(this).addClass("selected"); //クリックされたタブのclassにselectedを割り当て
		$(".tabarea li:not(#"+tab+")").removeClass("selected"); //その他のタブのclassにあるselectedを削除
		$(".tabarea div[id^=content]").hide(); //コンテンツをすべて非表示に
		$(".tabarea " + con).show(); //クリックされたタブ対応のコンテンツのみ表示
	});
});

//jquery.fademover.jsの23行目
if(!$(this).attr("class")){

//jquery.fademover.jsの23行目
if(!$(this).hasClass(setting.nofadeOut) && moveUrl.charAt(0) != "#"){

window.onunload = function () {}

$(function(){
	$('フェード処理する要素').fadeMover({'outSpeed':現在のページをフェードアウトするスピード,'inSpeed':ページ読み込み時のフェードインスピード,'effectType':どのエフェクトを利用するか指定,'nofadeOut','クリックしてもフェードアウトさせないアンカーに記述するclass名'});
	$('body').fadeMover();
});

//下記のリンクは動作しません。
<a href="#pagetop">ページの先頭へ戻る</a>
<a href="/img/big.jpg" class="nonmover">画像を開く</a>

/*
jQueryのappendでhead内に対象要素のスタイルに「opacity:0」を追記
IE6〜8対応用に-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 );
$(function(){〜});の外に記述
*/
$('head').append('<style>#content { opacity: 0;-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 ); }</style>');
$(function(){
	$('#content').fadeMover();
});

/* Copyright (c) 2011 detelu (http://www.detelu.com)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * jquery.fademover.js
 * Version: 2012-02-06
*/
(function($){
	$.fn.fadeMover = function(options) {
        var defaults = {
            'outSpeed': 1000,
            'inSpeed': 1000,
			'effectType': 1, // fadeIn only 2, fadeOut only 3
			'nofadeOut' : 'nonmover' //fadeOut no thx (class name)
        };
        var setting = $.extend(defaults, options);
        this.each(function() {
			var pel = this;
			if(setting.effectType == 1 || setting.effectType == 2) {
				$(pel).css("opacity", 0).animate({opacity: 1}, setting.inSpeed);
			}
			if(setting.effectType == 1 || setting.effectType == 3) {
				$('a').click(function(event) {
					var moveUrl = $(this).attr("href");
					if(!$(this).hasClass(setting.nofadeOut) && moveUrl.charAt(0) != "#"){
						event.preventDefault();
						$(pel).animate({"opacity": 0}, setting.outSpeed, function(){
							location.href = moveUrl;
						});
					}
				});
			}
		});
		return this;
	}
	window.onunload = function () {};
})(jQuery);