セレクタ

javascript jquery

セレクタは結構種類があって面倒ですが、正直すべてを覚えなくてもよくて
普段はid指定「$("#id")」がほとんどです。

ですが、二つだけしっかり覚えとかなきゃいけないことがあります。

  1. 日本語でいいので「こんな選び方があったなー」っていうおぼろげな記憶
  2. セレクタを解説したページのURL

そういう意味では今日先生のお話してくださった

  • 40分で覚える！jQuery速習講座

http://ascii.jp/elem/000/000/498/498710/

  • jQuery日本語リファレンス

http://semooh.jp/jquery/

この二つは抑えておくべきかと。

あとよくわからないけど使いたい！って人にはこれお勧めです
昔から使う人は必ずと言っていいほど読んでるんじゃないかと。

笑いも交えて非常に右脳に訴えかけてくるプレゼンです！
個人的にすごく好きです。。。（自分のプレゼンドキュメントのスタイルに似てるからかも＾＾；）

http://higashizm.sakura.ne.jp/jquery_first/

本題！

表示ボタンをクリックするとパネルが表示されるように作成

解答

  • 最短距離
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
 $("div").hide();
 $("#btn").click(function(){
   $("div").toggle(2000);
 });
	
});
</script>
<style>
div{
    width:200px;
    height:200px;
    background:red;
}
</style>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>s
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<input type="button" value="表示"  id="btn"/>
<div></div>	
</body>
</html>

先生もおっしゃっていた通り、最初からcssでdisplay:none;は気持ち悪かったので
先にjqueryで消しておいた。
で、例題とは違いますが、「toggle」を使うと簡単に閉じることも。


  • 課題の意図通りに
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
 $("div").hide();
 $("#btn").click(function(){
	 if($("div").css("display")=="none"){
		 $("div").show(2000,function(){$(":input[type='button']").val("非表示");});
	 }else{
		 $("div").hide(2000,function(){$(":input[type='button']").val("表示");});
	 }
 });
	
});
</script>
<style>
div{
    width:200px;
    height:200px;
    background:red;
}
</style>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>s
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<input type="button" value="表示"  id="btn"/>
<div></div>	
</body>
</html>

一応開閉の両対応。ボタンの表記もその都度変えてます。
ほんとはアニメーションしている間のボタンロックもやろうかと思ったんですが、そこまではまだいいかと。。。