jQueryのDOM操作メソッド 〜属性編〜

jQueryのDOM操作系のメソッドについてまとめておく

追加していく予定

.addClass - クラスを追加する

.addClass();

$("#addClass").on("click",function(){
  $(this).addClass("add");
  $(this).addClass("add2 add3");//複数指定
});

.attr - 属性の取得

.attr();

$("#attr").on("click",function(){
  alert($(this).attr("id"));
  $(this).attr("id","attr2");//第二引数に変更したい値を指定できる
});

.hasClass - そのクラス名があるかどうか

.hasClass();

$("#hasClass").on("click",function(){
  console.log($(this).hasClass("btn"));//true
  console.log($(this).hasClass("btn2"));//false
});

.prop - プロパティのチェック

.prop();

$("#prop").on("click",function(){
  console.log($("input[name='checked']").prop("checked"));//true
  console.log($("input[name='unchecked']").prop("checked"));//false
  $("input[name='unchecked']").prop("checked",true);//trueに変更
});

.removeAttr - 指定した属性の削除

.removeAttr();

$("#removeAttr").on("click",function(){
  $(this).removeAttr("id");
});

.removeClass - 指定したクラス名の削除

.removeClass();

$("#removeClass").on("click",function(){
  $(this).removeClass("btn");//複数指定で全部消したい場合はからで良い
});

.removeProp

プロパティの削除

.removeProp();

$("#removeProp").on("click",function(){
  $("input[name='removePropTarget']").removeProp("disabled");
});

.toggleClass - 指定したクラスのon/offを切り替える

.toggleClass();

$("#toggleClass").on("click",function(){
  $(this).toggleClass("btn");//複数指定で全部消したい場合はからで良い
  $(this).toggleClass("btn",false);//第二引数にboolでtrueの場合は追加してfalseの場合は削除する
  $(this).toggleClass(false);//第一引数にboolを指定すると追加もしくは削除する
});

---

toggleClassが一番使えそう
おわり