恥知らずのウェブエンジニア -web engineer, shameless

これは一歩を踏み出すことができない者たちのブログ

jqueryセレクター、取得・変更、イベントまとめ

業務では基本あまりフロント周りを触らないので、
管理画面とかでちょろっとフロント周りも書くときにいつも忘れちゃうのでまとめメモ。

セレクタ

  //タグ
  $("div")
 //ID
  $("#targetId")
  //クラス
  $(".targetClass")

 //組み合わせ
  $("div .targetClass")
 //複数まとめて
  $("#targetId1, #targetId2")

値の取得、変更系

  //text取得、変更
  $("div").text()
  $("div").text('変更')
  //html取得、変更
  $("div").html()
  $("div").html(<p>変更</p>)

  //要素の取得、変更
  $("a").attr('href', 'http://google.co.jp')
  $("a").attr('href')

  //class追加、削除
  $("#targetId").addClass('Class')
  $("#targetId").removeClass('Class')

フォーム系

  //value取得,変更
  $("select").val()
  $("select").val('すた丼')
  $('input[name='postName']').val()  
  //値の変更時
  $("select").change(){}
  //submit実行
  $("select").submit(){}

  //チェックボックス選択中
  $(:checked)
  //セレクトボックス選択中
  $(:selected)

イベント系

  //クリック
  $("#targetId").click(){}
  //ダブルクリック
  $("#targetId").dbclick(){}
  //マウスup,down
  $("#targetId").mouseup(){}
  $("#targetId").mousedown(){}
  //マウスオーバー、アウト
  $("#targetId").mouseover(){}
  $("#targetId").mouseout(){}


ほかにも使うごとに追加していこう。



感謝致します。

f:id:ogataka50:20141103105147j:plain