jquery – よくつかうメソッドのメモ

備忘です、よくつかう基本メソッドをメモしておきます～

 

.ready()メソッド

htmlの読み込み（画像を除く）が終わってから、タグ、要素、属性などに対して処理をしたい時によく使ったりします。読み込み途中で動いてしまうと予期せぬ動きになってしまうので、そのためですね。

$(document).ready(function(){
    //実行したい処理
}

 

.each()メソッド

複数の要素などに繰り返し処理をしたい場合に使います。以下にサンプルプログラムを。

<div class="example_box">なんかの箱１</div>
<div class="example_box">なんかの箱２</div>
<div class="example_box">なんかの箱３</div>

$(document).ready(function(){
    //classがexample_boxの要素全てに対して処理する
    $('.example_box').each(function(){
        //その要素のテキストをコンソールに出力する
        console.log($(this).text());
    });
});

出力結果はこんなです

 

.attr()メソッド

属性の値を取得したり書き換えたりする場合に使います。

以下は属性の値を取得してコンソールに出力するサンプル

<p id="attr_id">attrの例</p>

$(document).ready(function(){
    //pタグのid属性の値をコンソールに出力
    console.log($('p').attr('id'));
});

出力結果です

 
 
お次はhrefの値を書き換えます、第一引数に属性、第二引数に書き換え後の値を渡します

<a href="none">attrでリンク書き換え</a>

$(document).ready(function(){
    //aタグのhref属性を書き換え
    $('a').attr('href','./example.php');
});

htmlを表示すると以下のようになっています

<a href="./example.php">attrでリンク書き換え</a>

 

.addClass()メソッド

クラス属性に追加したい場合に使います、追加したいクラスにcssを定義しておいて、画面を変化させる時とかに使ったりします

<div class="example_box">クラスを追加する要素</div>

$(document).ready(function(){
    //example_boxクラスにadd_exampleを追加
    $('.example_box').addClass('add_example');
});

htmlを表示すると以下のようになっています

<div class="example_box add_example">クラスを追加する要素</div>

 

.removeClass()メソッド

addClassとは逆に、クラスを削除したいときに使います、こいつもcssと併せて変化させたりします

<div class="example_box remove_example">クラスを削除する要素</div>

$(document).ready(function(){
    //remove_exampleを削除
    $('.example_box').removeClass('remove_example');
});

htmlを表示すると以下のようになっています

<div class="example_box">クラスを削除する要素</div>

 

.wrap()メソッド

要素を探してhtmlの構造的に囲むように要素を追加します、追加した要素にaddClassでクラス名を追加したりもできます

<div class="example_box">囲まれる箱</div>

$(document).ready(function(){
    //example_boxをdivタグで囲って、parent_wrapperのクラス名をつける
    $('.example_box').wrap($('<div>').addClass('parent_wrapper'));
});

htmlを表示すると以下のようになっています

<div class="parent_wrapper">
    <div class="example_box">囲まれる箱</div>
</div>

 

.parent()メソッド

親要素に対して処理します、せっかくなんで、さっきのwrap()と組み合わせて、wrap()した親要素に対して処理してみます

さっきとhtmlは同じでjsにちょっと加えます

<div class="example_box">囲まれる箱</div>

$(document).ready(function(){
    //example_boxをdivタグで囲って、parent_wrapperのクラス名をつける
    $('.example_box').wrap($('<div>').addClass('parent_wrapper'));

    //親要素のclass属性値をコンソールに出力
    console.log($('.example_box').parent().attr('class'));
});

コンソールには以下のように出ます～

 

.append()メソッド

wrap()と違って、単純に指定要素の中に子要素を追加します
こちらもせっかくなんで、さっきのwrap()のサンプルをいじって、wrap()した親要素の下に要素を追加してみます

<div class="example_box">囲まれる箱</div>

$(document).ready(function(){
    //example_boxをdivタグで囲って、parent_wrapperのクラス名をつける
    $('.example_box').wrap($('<div>').addClass('parent_wrapper'));
        
    //追加されたparent_wrapperの子要素としてdivタグを追加する
    $('.example_box').parent().append($('<div>').addClass('append_child').html('子要素が追加されました'));
});

htmlを表示すると以下のようになっています

<div class="parent_wrapper">
    <div class="example_box">囲まれる箱</div>
    <div class="append_child">子要素が追加されました</div>
</div>