jquery/js＜思い出し編＞

練習場

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

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;
}

結果を見る

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; 
}

結果を見る

3.CSS()

html

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

js

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

結果を見る

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;
}

結果を見る

5.scrollTop()

開発中1

開発中2

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

次回にご期待ください。