カレンダー

S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728   
<< February 2018 >>

カテゴリー

アーカイブ

スポンサードリンク

【よく使うメソッドを覚える】jQueryの使い方を詳しく解説する Part2


0

    さて、今回は前回に言ったとおりメソッドをやりましょう。

     

    jQueryのメソッドはたくさんあるので一度に全部は覚えられないので、

    使えるものを自分なりに厳選して説明します。

     

    text():要素内のテキストを取得・変更

    $(function(){
      console.log($("#text").text());
     );

    textというIDのテキスト情報をコンソールに出力させます。

    $(function(){
      $("#text").text('テスト');
    });
    

    textというIDのテキスト情報を「テスト」に変更させます。

     

    html():要素の内のHTMLの取得・変更

    $(function(){
      console.log($("#text").html());
    });
    

    textというIDの要素のHTML情報をコンソールに出力させます。

    $(function(){
      $("#text").html('テスト');
    });
    

    textというIDの要素のHTML情報を「テスト」に変更させます。

     

    before():要素の前にHTMLを追加

    $(function(){
      $("#text").before('テスト');
    });
    

    textというIDの要素の前に「テスト」というHTML情報を追加させます。

     

    after():要素の後にHTMLを追加

    $(function(){
      $("#text").after('テスト');
    });
    

    textというIDの要素の後に「テスト」というHTML情報を追加させます。

     

    prepend():要素内の先頭にHTMLを追加

    $(function(){
      $("#text").prepend('テスト');
    });
    

    textというIDの要素の中の先頭に「テスト」というHTML情報を追加させます。

     

    append():要素内の後尾にHTMLを追加

    $(function(){
      $("#text").append('テスト');
    });
    

    textというIDの要素の中の後尾に「テスト」というHTML情報を追加させます。

     

    insertBefore():他の要素の前に指定した要素を移動

    $(function(){
      $("#text").insertBefore("#text2");
    });
    

    textというIDの要素をtext2というIDの要素の前に移動させます。

     

    insertAfter():他の要素の後に指定した要素を移動

    $(function(){
      $("#text").insertAfter("#text2");
    });
    

    textというIDの要素をtext2というIDの要素の後に移動させます。

     

    wrap():指定した要素を他の要素で包む

    $(function(){
      $("#text").wrap('<div class="aaa" />')
    });
    

    textというIDの要素を<div class="aaa">のタグで囲みます。

     

    remove():要素を削除

    $(function(){
      $("#text").remove();
    });
    

    textというIDの要素を削除します。

     

    attr():要素に指定した属性の値を取得・変更

    $(function(){
      $("p").html($("#text").attr('id'));
    });
    

    p要素に#textのID情報を表示させます。

    $(function(){
      $('span').attr('id', 'read');
      $('p').html($("#read").attr('id'));
    });
    

    span要素にreadというIDを設定させ、

    p要素に#readのID情報を表示させます。

     

    addClass():要素にclass属性を追加する

    $(function(){
      $('span').addClass('read');
    });
    

    span要素全てにreadというclass属性を追加させます。

     

    css():指定したCSSのプロパティの値を設定・取得

    $(function(){
      $('span').css({'color': 'red', 'font-size': '20px'});
    });
    

    全てのspan要素の文字を赤色且つ20pxに変更させます。

     

    こんな感じですかね?

    これくらい覚えとけば一々調べなくてもすぐに使うことができると思います。

     

    次回は、イベントですね?マウス操作とかやっていきましょう。

     

    では(^_^)/~

    このエントリーをはてなブックマークに追加

    スポンサードリンク



    << | 2/9PAGES | >>