*JQueryのよく使うメソッドとイベントの一覧(メモ用)

2015.5.10 0Comments jQuery

 

css

<style>
.clickTest{
  background:#ccfdbd;
  padding:20px;
  margin:0 0 5px;
}
.font-border{
  border:solid 5px #000000;
}
</style>

script

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
jQuery(function(){


  //読み込み後になにかする。function()
  $(function(){
    //alert('読み込み完了');//コメントアウトを消してね
  });
 
  //変数に格納
  var div1 = $('#div1').show();
 
  //id='div1'を表示
  $('#div1').show();
  $('#div1 biv').show();//#div1の中のbiv要素を表示
  $('#div1').find('.classname');//#div1の中の.classnameを全て検索して表示
 
  $('#div2').hide();//非表示
  $('#div2').empty();//要素を空にする
  $('#div2').remove();//要素を削除

  $('#div3').css('font-size','30px');//CSSを適応
 
  $('#div4').text('<b>要素をテキストベースに変更</b>');//要素をテキストベースに変更
  $('#div5').html('<b>要素をHTMLベースに変更</b>');//要素をHTMLベースに変更

  $('a#name1').attr('href','http://www.yahoo.co.jp/');//属性値を変更
  $('input#name1').val('はひふへほ');//入力値を変更

  $('#div8').addClass('font-border');//classを追加する
  $('#div9').removeClass('font-border');//classを削除する

  $('#div10').append($('#append'));//id="append"の要素を#div10の中の後の方に入れる
  $('#div11').prepend($('#prepend'));//id="appendTo"の要素を#div11の前の方に入れる

  $('#div12').mouseenter(function(){
    $('#div12').html('<b>マウスがのったらなにかをする。</b>');//マウスがのったらなにかをする。
    $('#div12').css('font-size','30px');//マウスがのったらなにかをする。
  });

  $('#div12').mouseleave(function(){
    $('#div12').html('マウスがはなれたらなにかをする。');//マウスがはなれたらなにかをする。
    $('#div12').css('font-size','12px');
  });

  $('#div13').hover(function(){
    $('#div13').css('font-size','30px');//マウスがのったらなにかをする。
  },function(){
    $('#div13').html('<b>マウスがはなれたらなにかをするをセットで。</b>');//マウスがはなれたらなにかをする。
    $('#div13').css('font-size','12px');//マウスがのったらなにかをする。
  })

  $('input#name2').focus(function(){
    $('input#name2').addClass('font-border');//input要素にフォーカスしたときになにかする。
  });

  $('input#name2').blur(function(){
    $('input#name2').removeClass('font-border');//input要素にフォーカスから外したときになにかする。
  });

  $('#div15').click(function(){
    $('#div15').addClass('font-border');//クリックされたらなにかする。
  });
  $('#div15').mouseleave(function(){
    $('#div15').removeClass('font-border');
  });

  $('#div').fadeIn(5000);//5秒後フェードイン
  $('#div').fadeOut(5000);//5秒後フェードアウト
 
  $('#div').height(100);//要素のサイズ変更
  $('#div').width(100);//要素のサイズ変更


});
</script>

html

<div class="clickTest" id="div1">テキスト<div>div1の中のbiv要素を表示</div><span class="classname">#div1の中の</span><span class="classname">.classnameを全て検索して表示。</span></div>
<div class="clickTest" id="div2">テキスト</div>
<div class="clickTest" id="div3">CSSを適応</div>
<div class="clickTest" id="div4">テキスト</div>
<div class="clickTest" id="div5">テキスト</div>
<div class="clickTest" id="div6"><a id="name1" href="https://www.google.co.jp/">属性値を変更</a></div>
<div class="clickTest" id="div7"><input id="name1" type="text" name="name" value="あいうえお"></div>
<div class="clickTest" id="div8">classを追加する</div>
<div class="clickTest font-border" id="div9">classを削除する</div>
<div class="clickTest" id="div10">id="append"の要素を</div><div id="append">#div10の中の後の方に入れる</div>
<div class="clickTest" id="div11">id="prepend"の要素を</div><div id="prepend">#div11の中の前の方に入れる</div>
<div class="clickTest" id="div12">マウスがのったらなにかをする。</div>
<div class="clickTest" id="div13">マウスがのったらなにかをするをセットで。</div>
<div class="clickTest" id="div14"><input id="name2" type="text" name="name" value="あいうえお"></div>
<div class="clickTest" id="div15">クリックされたらなにかする。</div>