jQuery|コンテンツと属性の取得と設定

取得
DOMとは?DOM=Document Object Model(文書オブジェクトモデル)は、HTMLおよびXML文書へのアクセス基準を定義します.
DOM操作
非常に重要な部分は、DOMを操作する能力です.jQueryはDOMに関連する一連の方法を提供し、要素と属性へのアクセスと操作を容易にする.
コンテンツ-text()、html()およびval()を取得する3つの方法
DOM操作のための3つの単純で実用的なjQueryメソッド:

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

を設定または返す.

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

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

を設定または戻します.
例:jQuery text()メソッドとhtml()メソッドでコンテンツを取得する方法を示します.
左右スライド可能

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




            。
    
   HTML
    

jQuery val()メソッドで入力フィールドの値を取得する方法を示します.

$(document).ready(function(){
  $("button").click(function(){
    alert("  : " + $("#test").val());
  });
});




  : 
   

属性取得用attr()メソッド
jQuery attr()メソッドは、属性値を取得するために使用されます.
リンクのhrefプロパティの値を取得する方法:

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});




チュートリアル
   href     

コンテンツと属性の設定
プロパティの設定-attr()メソッド
jQuery attr()メソッドは、属性値の設定/変更にも使用されます.例:リンクのhrefプロパティの値を変更(設定)する方法を示します.

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

attr()メソッドでは、複数のプロパティを同時に設定できます.
例:hrefとtitleのプロパティを同時に設定する方法を示します.

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery   "
    });
});

attr()のコールバック関数
コールバック関数の役割?
Queryメソッドattr()は、コールバック関数も提供する.実際の業務に基づいてコールバック関数において、情報を加工処理して加工後の結果を返すことができる.
コールバック関数には、2つのパラメータがあります.選択された要素リストの現在の要素の下付き文字と、元の(古い)値です.次に、使用する文字列を関数の新しい値で返します.
コールバック関数付きattr()メソッドを示します.

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

設定内容-text()、html()およびval()
前章の3つの同じ方法を使用して、次のように設定します.

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

を設定または返す.

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

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

を設定または戻します.

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

text()、html()およびval()コールバック関数設定内容
上の3つのjQueryメソッド:text()、html()およびval()は、同様にコールバック関数を有する.コールバック関数には、2つのパラメータがあります.選択された要素リストの現在の要素の下付き文字と、元の(古い)値です.次に、使用する文字列を関数の新しい値で返します.
コールバック関数付きtext()とhtml()のデモ:

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "   : " + origText + "    : Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "  html: " + origText + "   html: Hello world! (index: " + i + ")"; 
    });
});