いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

[ jQuery ] よく使うjQuery まとめ

jQueryの基本的な書き方

<script type="text/javascript">
jQuery(document).ready(function() {

ここに中身を書く。

});
</script>

あ、ちゃんとjqueryは読み込んでる状態でね(´・ω・`)

テーブルの行に交互に色をつけたい時

jQuery("tr:odd").addClass("odd");

↑で、.oddの場合のthやtdの背景色を変更すれば楽チン!

画像じゃない外部リンクにクラスをつける

jQuery("a[href^=http]").not('[href*="'+location.hostname+'"]').not(jQuery("a[href^=http]").find('img').parents('a')).addClass("extlink");

画像じゃない外部リンクに画像を挿入する

jQuery("a[href^=http]").not('[href*="'+location.hostname+'"]').not(jQuery("a[href^=http]").find('img').parents('a')).append('<img src="external.png" alt="link" class="external">');

・jQuery挿入の書き方

insertBefore(場所)before(コンテンツ) 指定エレメントの前に挿入
 例)★<p>ほげほげ</p>
insertAfter(場所)after(コンテンツ) 指定エレメントの後に挿入
 例)<p>ほげほげ</p>★
prependTo(場所)prepend(コンテンツ) 指定エレメントの先頭に差し込む
 例)<p>★ほげほげ</p>
appendTo(場所)append(コンテンツ) 指定エレメントの末尾に差し込む
 例)<p>ほげほげ★</p>

・書き方
上記場所の場合
jQuery(‘★’).appendTo(‘#sample’);
上記コンテンツの場合
jQuery(‘#sample’).before(‘★’);

フォームとかで自動入力履歴を参照させないようにする場合

jQuery("form").attr('autocomplete', 'off');

遅らせて実行させる

jQuery("#sample").delay(5000).animate({backgroundColor:'#F1C52E'},5000);

ページURLで分岐させる

if(jQuery(location).attr('href').match('#waribiki') != null){
           location.href = "./#waribiki";
  }

フェードイン・フェードアウトさせる

jQuery(".article a").hover(function() {
	 jQuery("#disturb .article_body").fadeIn();
	}, function() {
	 jQuery("#disturb .article_body").fadeOut();
});

指定要素を指定要素で囲む

jQuery("h2 a").wrapInner("<span></span>");

readonlyクラスのフォーム部品をreadonlyにする(笑)

jQuery(".readonly").attr('readonly', 'readonly');

FAQとかでよく使う開閉

jQuery(document).ready(function() {
	 //Fメニュー
	jQuery(".question").click(function(){
		if(jQuery(this).hasClass("up")){
			jQuery(this).removeClass("up");
		}else{
			jQuery(this).addClass("up");
		}
		jQuery(this).next(".answer").slideToggle("slow");
	});
});

開閉でtoggleClassを使うと楽

jQuery(document).ready(function() {
	 //Fメニュー
	jQuery(".faq dt").click(function(){
		jQuery(this).toggleClass("up");
		jQuery(this).next("dd").slideToggle("slow");
	});
});
例)
開く(1)
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
開く(2)
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
開く(3)
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
開く(4)
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
開く(5)
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

セレクトボックスの値が変わったらの書き方

jQuery("#howto").change(function () {
	jQuery("#howto option:selected").each(function () {
		if(jQuery("#howto").val() == "★★★"){
			内容
		}else{
			内容
		}
	});
}).change();

サブミットする

jQuery("#form_submit")[0].submit();

チェックボックスのチェック状態を調べる

if($("#check1").prop('checked')){
 チェックされた内容
}else{
 チェックされてない内容
}

youtube(iframe)で入れた際、背景の白が「transparent」で消えない場合(IE7とIE8w)

jQuery("iframe").attr("allowtransparency","true");

とかですかね(´・ω・`)<ふぅ