พื้นฐานการใช้งาน jQuery ตอนที่ 3 สร้าง DOM

สร้างส่วนของ DOM ขึ้นมาใหม่
แบบที่ 1 สร้างง่ายๆโดยสร้าง tag ส่วนที่ต้องการ
    $("<p>");
    $('<p class="blue">New Paragraph</p>')
แบบที่ 2 สร้างโดยผ่านตัวแปร JSON
    $("<p>",{
        "class":"blue",
        "text":"New Paragraph"
});

ใส่ส่วนที่สร้างขึ้นลงใน DOM ส่วนที่เลือก
ใส่ตรง ๆ ให้ส่วนที่เลือก
$('#p4').append('New text');   
$('#p4').prepend('<span class="blue">New span</span>');
$('<span class="blue">New span</span>').prependTo("#p1");
$('<span class="blue">New span</span>').appendTo("#p1");

นำส่วนที่สร้างไว้แล้วมาใส่ให้ส่วนที่เลือก
var el1 = $('<p class="blue">New Paragraph</p>');
var el2 = $("<p>",{"class":"blue","text":"New Paragraph"});

$("#next").append(el1);
$("#next").append(el2);

el1.prependTo("#child");
el2.appendTo("#child");

แต่ถ้าต้องการใส่ก่อน หรือหลังส่วนที่เลือกใช้
$("#p1").before(el1);
$("#p2").after(el2);


el1.insertBefore("#p1");
el2.insertAfter("#p2");

การครอบส่วนที่เลือก ด้วย tag ที่ต้องการ
ครอบส่วนที่เลือก ด้วย tag ที่ต้องการ
$("span").wrap("<strong />");
$("span").wrap("<strong><em></em></strong>");

ทำแบบให้มีตัวเลือก
$("span").wrap(function(){
    return $(this).is(".blue") ? "<strong>":"<em>";
});

เอาส่วนที่ครอบออกหนึ่งชั้น
$("span").unwrap();

ถ้าต้องการครอบส่วนที่เลือกทั้งหมดทุกอันด้วย tag ที่ต้องการ
var div = $("<div>",{"css":{"background-color":"gold"}});
$("p").wrapAll(div); /* ครอบ div ให้ p ทั้งหมด */

ครอบส่วนเนื้อหาภายใน tag
$("p").wrapInner("<em />"); /* ครอบเนื้อหาใน p ด้วย em */

การลบส่วนที่ต้องการ
มีให้ใช้สองแมธอดคือ
.remove() ทำการลบส่วนที่เลือก
$("#p1").remove();
var el1 = $("#p1").remove(); /* เก็บส่วนที่ลบในตัวแปร el1 */

.detach() ทำการลบส่วนที่เลือก แต่ยังคงเหลือข้อมูล (.data) ของ jQuery อยู่
$("#p1").data("data1","data of p1");
var p = $("#p1").detach();
console.log("data stored:" + p.data("data1"));

การเข้าถึงและแก้ไข คุณสมบัติ (attributes) และสไตล์ (CSS)
$("p:last").attr("id"); /* เข้าถึง id */
$("p:last").attr("id","newid"); /* เข้าถึงแก้ไข id เป็น newid */

แก้ไขทีละหลายคุณสมบัติโดยใช้ JSON
$("p:last").attr({
    "id" : "newid",
    "class" : "blue"
});

ลบคุณสมบัติที่ไม่ต้องการ
$("p:last").removeAttr("id");

เปลี่ยนสไตล์ CSS
$("p:last").css({
    "color" : "blue",
    "background" : "yellow"
});

เรียกดูสไตล์
$("p:last").css("color");

ดูเนื้อหาภายในส่วนที่เลือก
ข้อความ (text)
$("#p1").text(); /* ดูข้อความในส่วนที่เลือก */
$("#p1").text("Hello World"); /* แก้ข้อความในส่วนที่เลือก */

ดูแบบ html โค้ด ภายในส่วนที่เลือก
$("#p1").html(); /* ดูโค้ด html */
$("#p1").html('<span class="blue"> New text </span>'); /*แก้ไข */

เข้าถึงและแก้ไข เนื้อหาในส่วนของฟอร์ม (Form)
$(":submit").val(); /* ดูเนื้อหา */
$(":submit").val("Username"); /* แก้ไขเนื้อหา */

ข้อมูล(.data) ของ jQuery Object
การเพิ่มข้อมูล
$("p:eq(0)").data("name","first")
$("p:eq(1)").data({
    "name":"Myname",
    "my pet":{
        "dog":"dogo",
        "cat":"cato"
    }
});

เรียกดูข้อมูล
$("p:eq(1)").data("name");

เพิ่ม ลบและ สลับคลาส (class)
$("#p1").addClass("blue");
$("#p1").removeClass("blue");
$("#p1").toggleClass("blue red");

ตรวจสอบคลาสในส่วนที่เลือก
$("span:first").hasClass('blue'); /* คืนค่า true หรือ false */

ความสูง กว้าง หน่วยเป็น pixel
$("#p1").height();
$("#p1").width();

แก้ความสูง ความกว้าง
$("#p1").height(30);
$("#p1").width(100);

$("#p1").height(30).css("background","red");

ความสูง กว้างภาพในไม่รวมขอบ (border)
$("#p2").innerHeight();
$("#p2").innerWidth();

ความสูง กว้างภาพในรวมขอบ (border)
$("#p2").outerHeight();
$("#p2").outerWidth();

การจัดการรูปแบบส่วนที่เลือกด้วยรูปแบบที่ต่างกัน ในแต่ละส่วนแยกกัน
ใช้ map ไม่คืนค่า object เมื่อผ่านแมธอดแล้วจึงไม่สามารถ นำไปใช้ต่อได้
$("p,.blue").map(function(index,ele){
    $(this).append(" "+ele.tagName+" #"+index)
});

ใช้ each คืนค่า object เมื่อผ่านแมธอดแล้วจึงไม่สามารถ นำไปใช้ต่อได้
$("div").each(function(index,ele){
$(this).append(" "+ele.tagName+" #"+index)})
.find("span.blue").css({
            "background":"gold"
});