Edited at

jquery/js<思い出し編>

More than 3 years have passed since last update.


練習場

ペペロンのことも思い出してあげて下さい。


1.slideToggle()

ほぼjs書く機会のない人でも1度は使うことがあるんじゃないか系。


toggle基本


html

<p id="btn">昨日、jqueryの勉強しようと思ったんだけどね・・</p>

<p id="memo">頭が痛くて出来なかったポヨ・・</p>


js

$(function(){

$("#btn").click(function(){
$("#memo").slideToggle("slow");
$("#memo").toggleClass("show");
});
});


css

#btn {

cursor: pointer;
}

#memo {
display: none;
background: #eee;
}



結果を見る

http://jsfiddle.net/jackotonashi/89xyh/


2.toggleClass()

ほぼjs書く機会のない人でも多用する方法。


html

<p>下の変身ボタンでスーパーペペロンに変身しますが、

もう一度クリックすると元に戻ります。</p>
<div>q _ q</div>
<button>変身ボタン</button>


js

$(function(){

$("button").click(function(){
$("div").toggleClass("henshin");
});
});


css

div {

color: #666;
padding: 10px;
border-radius: 5px;
border: 1px solid #666;
width: 35px;
height: 35px;
}

button {
margin-top: 20px;
}

.henshin {
color: #ff8400;
background: #fffd56;
border: 1px solid #ff8400;
}



結果を見る

http://jsfiddle.net/jackotonashi/kLPG8/


3.CSS()


html

<div>p _ p</div>

<button id="hoge">CSSで簡易変身</button>


js

$(function(){

$('#hoge').click(function(){
$('div').css("color","#ff0000");
});
});


結果を見る

http://jsfiddle.net/jackotonashi/Mqt7x/


4.if文を使おう


html

<div id="mes">本物の宝箱を当ててね。</div>

<p class="hako1">box</p>
<p class="hako2">box</p>
<p class="hako3">box</p>
<p class="hako4">box</p>
<div id="result">結果</div>


js

$(function(){

$('p').click(function(){
if($(this).hasClass('hako3')){
$('#result').text('当たり');
}else{
$('#result').text('はずれ');
}
});
});


css

p {

width: 80px;
height 80px;
background: #eee;
border: 1px solid #999;
float: left;
margin-left: 10px;
padding: 2px 4px;
cursor: pointer;
}

#result, #mes {
clear: left;
}



結果を見る

http://jsfiddle.net/jackotonashi/aJ26L/


5.scrollTop()


開発中1

http://jsfiddle.net/jackotonashi/UC224/


開発中2

http://jsfiddle.net/jackotonashi/9t8mP/

参考:http://iwb.jp/jquery-scrolltop/


次回にご期待ください。