jQuery HTML

取得
jQueryはHTML要素と属性を操作できる強力な方法を持っています.
取得内容-text()、html()およびval():

text()-選択した要素のテキスト内容

を設定または返す.

html()-選択した要素の内容(HTMLタグを含む)を設定または戻します.

val()-フォームフィールドの値

を設定または戻します.
次の例では、jQuery text()およびhtml()メソッドを使用してコンテンツを取得する方法を示します.

$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  //Text:            (   html  )
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
}); 
  //Text:          

scripts:
$(document).ready(function(){
  $("button").click(function(){
    alert("  : " + $("#test").val());
  });
});
html:
  : type="text" id="test" value="W3Cschool  ">
   

属性値の取得-attr()

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
html:
<p><a href="http://www.w3cschool.cn" id="runoob">W3Cschool  a>p>
<button>   href     button>

コンテンツと属性の設定

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("Hello world!");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

Arr()-属性値を変更します.attr("href","http://www.w3cschool.cn/jquery")

$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr("href","http://www.w3cschool.cn/jquery");
  });
});

要素の追加

append()-選択された要素の内部の最後に指定された内容

を挿入する.

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append("     。");
  });

  $("#btn2").click(function(){
    $("ol").append("
     
");
  });
});

prepend()-選択された要素の先頭に指定する内容

を挿入する.

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("       。 ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("
        
");
  });
});

append()メソッドでいくつかの新しい要素を追加

function appendText()
{
    var txt1="
  。
";              //    HTML       
    var txt2=$("").text("  。");  //    jQuery     
    var txt3=document.createElement("p");
    txt3.innerHTML="  。";               //    DOM      text with DOM
    $("body").append(txt1,txt2,txt3);        //      
}

after()-選択要素の後にコンテンツ

を挿入する.

before()-選択された要素の前にコンテンツ

を挿入する.

function afterText{
    var txt1="I ";                    //    HTML     
    var txt2=$("").text("love ");     //    jQuery     
    var txt3=document.createElement("big");  //    DOM     
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          //         
}

要素の削除

remove()-選択された要素(およびそのサブ要素)を削除する

.

$("#div1").remove();
$("p").remove(".italic"); 
//  class italic   

empty()-選択された要素からサブ要素

を削除します.

$("#div1").empty();

CSSクラス

addClass()-選択された要素に1つ以上のクラス

を追加します.

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important blue");
});

removeClass()-選択された要素から1つ以上のクラス

を削除します.

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

toggleClass()-選択された要素を追加/削除するクラスの切り替え操作(removeClass()はaddClass()と結合)

.

css()-スタイル属性css()メソッドの設定または戻り選択した要素の1つ以上のスタイル属性を返します.構文1:css(「propertyname」)はpropertynameの値

を返します.

$("button").click(function(){
alert("     = " +                 $("p").css("background-color"));
});

構文2:css(「propertyname」,「value」);

$("p").css("background-color","yellow"); 
$("p").css({"background-color":"yellow","font-size":"200%"}); 

サイズ

width()は、要素の幅(内側余白、枠線、または外側余白を除く)を返します.

height()は、要素の高さ(内側の余白、枠線、または外側の余白を除く)を返します.

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth()は、要素の幅(内側の余白を含む)を返します.

innerHeight()は、要素の高さ(内側の余白を含む)を返します.

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

outerWidth()は、要素の幅(内側の余白と枠線を含む)を返します.

outerHeight()は、要素の高さ(内側の余白と枠線を含む)を返します.

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});