განხილვა: DOM-ის შეცვლა jQuery-ის დახმარებით

როგორც კი იპოვით ელემენტების კოლექციას jQuery-ის ფუნქციის გამოყენებით, შეგიძლიათ, მათში შეიტანოთ ცვლილებები სხვადასხვა მეთოდის გამოყენებით.

განსაზღვრეთ მათი შიდა ტექსტი text()-ით:
$("h1").text("ყველაფერი კატების შესახებ"); (იხილეთ მაგალითი)

განსაზღვრეთ მათი შიდა HTML html()-ით:
$("h1").html("მე <strong>მიყვარს</strong> კატები"); (იხილეთ მაგალითი)

განსაზღვრეთ ატრიბუტები attr()-ით:
$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com"); (იხილეთ მაგალითი)

შეცვლაეთ CSS სტილები css()-ით:
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"}); (იხილეთ მაგალითი)

დაამატეთ კლასი addClass()-ით:
$("h1").addClass("warning");

jQuery-ის ფუნქციისთვის HTML-ის სტრინგის გადაცემით შეგიძლიათ, შექმნათ ახალი ელემენტები:
var $p = $("<p>");

თუ გსურთ, შეგიძლიათ, მთლიანი HTML გადასცეთ, ტეგების შიგთავსების, ატრიბუტებისა და სტილების ჩათვლით.
var $p = $('<p style="color:red;">მე მიყვარს ხალხი, ვისაც უყვარს კატები.</p>');

როგორც კი შექმნით ელემენტს, შეგიძლიათ, ცვლილებები შეიტანოთ მასში ზემოთ ჩამოთვლილი მეთოდებიდან ნებისმიერის გამოყენებით:
$p.addClass("warning");

შემდეგ შეგიძლიათ, დაამატოთ ის არსებულ ელემენტს append()-ის:
$("#main-div").append($p); (იხილეთ მაგალითი) გამოყენებით

აგრეთვე შეგიძლიათ, ჩასვათ გვერდში prepend()-ის (იხილეთ მაგალითი) ან appendTo()-ს გამოყენებით (იხილეთ მაგალითი).

ამ მეთოდებზე მეტი დეტალის გასაგებად წაიკითხეთ jQuery-ის დოკუმენტაცია, რომელიც მოჰყვება ზემოთ ბმულად მოცემულ მეთოდთა სახელებს. ჩვენ ყველაფერს აქ ვერ დავფარავთ, ამიტომ, ვინაიდან ვებ დეველოპმენტის საუკეთესო პრაქტიკა სწრაფად იცვლება, მოგიწევთ დოკუმენტაციის წაკითხვაში დახელოვნება, რათა არ ჩამორჩეთ უახლეს მოვლენებს. ამაზე მუშაობის დასაწყებად ახლაც კარგი დროა!