JQueryを学習時に学んだ備忘録

文法

ネットで調べたサンプルコードに改造を加えたコードを記載します。

属性と要素を指定して内容を取得

サンプルコード

index.html

    <ul class="pref_list">
        <li data-id="1">北海道</li>
        <li data-id="2">青森県</li>
        <li data-id="3">岩手県</li>
        <li data-id="4">宮城県</li>
        <li data-id="5">秋田県</li>
        <li data-id="6">山形県</li>
        <li data-id="7">福島県</li> 
    </ul>

main.js

$(function(){
    $('.pref_list [data-id]').click(function(){
        if($(this).data('id')){
            var id = $(this).data('id');
            //クリックした都道府県を標準出力する
            console.log($('[data-id="' + id + '"]').text());
        }
    });
});

プログレスバーと進捗率を表示する

サンプルコード

index.html

    <div class="box">
        <div>進捗率：</div>
        <div class="progress-bar">
            <span class="meter-num">0</span>%
        </div>
    </div>
    <input type="button" class="animation_exe" value="アニメーションを実行する">

main.js

$(function(){
    //100%になるまでの時間（ミリ秒）
    var total_time = 10000

    //パーセントの表示 //setIntervalでカウントアップさせる
    //$('.meter-num')内の数字からmetarNumまでカウントする
    function numCount() {
        var num = 0;
        var speed = total_time / 100; //1%あたりの進捗の速さ
        var count = setInterval(function() {
        $('.meter-num').text(num);
        num++;
        if (num > 100) {
            clearInterval(count);
        }
        }, speed);
    }

    //ボタンクリックされたら
    $('.animation_exe').click(function(){
        //1秒かけて青いバーの横幅を300pxに変更
        $('.progress-bar').animate({
            //プログレスバーの横幅
            width:  '500px'
        }, {
            duration: total_time,
            complete: function(){
                //完了したら緑色に変更する
                $('.progress-bar').css('background-color', 'green');
            }
        });
        //ボタンがクリックされた時に進捗率のカウント処理を発火させる
        numCount();
    });
});

main.css

.progress-bar{
    background-color: red; 
    width: 0px; 
    height: 50px; 
    color: white; 
    text-align: center;
    padding: 25px 0px 0px;
}
.meter-num{
    font-weight: bold;
}

トラブルシューティング

Access Control-Allow-Origin

Ajax通信でURLを指定しGETした際に発生したエラー。
以下のいずれかで解決できる。

1. Chromeでセキュリティの変更
2. 「Access Control-Allow-Origin」という拡張機能を追加し一時的にセキュリティを無効にする

テキストボックスを無効から有効に変更する

サンプルコード

index.html

    <input type="text" name="test_input" disabled>
    <input type="button" class="test_btn" value="disabledを削除する">

    <script>
    $(function(){
        $('.test_btn').click(function(){
            //$('[name="test_input"]').removeProp('disabled'); //こちらも試したが無効のままだった
            $('[name="test_input"]').prop('disabled', false);
        });
    });
    </script>

参考

キノコログ

サンプルコードベースで関数を勉強することができる。