JQuery宝物庫

最近、Jqueryをよく使います。なかでも便利なものだけをまとめました。


/*----データ取得----*/
//data-系
id = $(this).attr("data-id");

//value
val = $(this).attr("value");

//name
name = $(this).attr("name");

/*----トグルスイッチ----*/

<script>
$(document).ready(function($) {
	$('.toggle_btn').click(function(){
		$(this).next("div").slideToggle("fast");//”slow”、”normal”、”fast”
		if ( $(this).hasClass("closed") ){
	        $(this).text("隠す");
			$(this).addClass('opend');
			$(this).removeClass('closed');
	    }else{
	        $(this).text("表示");
			$(this).removeClass('opend');
			$(this).addClass('closed');
	    }
	});
});
</script>

<style>
.toggle_block {display: none;}
</style>

<a href="javascript: void(0)" class="toggle_btn closed">表示</a>
<div class="toggle_block">
	内容
</div>

/*----トグルスイッチここまで----*/

/*----ページ内リンク----*/
$('.go_link_btn').click(function(){
var target_top = $("#go_link").offset().top;
$('html, body').animate({scrollTop:target_top}, 1500);
}); 


<a class="go_link_btn" href="javascript: void(0)">リンクへ</a>

<div id="go_link">
ここに飛ぶ
</div>
/*----ページ内リンクここまで----*/