close

DOM მანიპულირება jQuery-ით -ტექნიკები და მაგალითები

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

აქ მოცემულია თითოეული განყოფილების განმარტება კონკრეტულ მაგალითებთან ერთად:

 

ელემენტების შერჩევა

  • $("p"): აირჩიეთ ყველა <p> ელემენტი გვერდზე.
  • $(".myClass"): აირჩიეთ ყველა ელემენტი კლასთან myClass.
  • $("#myElement"): აირჩიეთ ელემენტი ID-ით myElement.
  • $("parentElement").find(".childElement"): აირჩიეთ ყველა ბავშვის ელემენტი childElement კლასში parentElement.

მაგალითი:

$("p").css("color", "red");

 

შინაარსის შეცვლა

  • $("#myElement").html("<b>Hello World</b>"): დააყენეთ HTML კონტენტი ელემენტისთვის ID-ით myElement.
  • $("p").text("New text"): დააყენეთ ტექსტის შინაარსი ყველა <p> ელემენტისთვის.

მაგალითი:

$("p").text("New paragraph");

 

ელემენტების დამატება და ამოღება

  • $("ul").append("<li>New item</li>"): დაამატეთ <li> ელემენტი უწესრიგო სიის ბოლოს( <ul>).
  • $(".myClass").remove() myClass: გვერდიდან წაშალეთ კლასის ყველა ელემენტი .

მაგალითი:

$("ul").append("<li>Item 4</li>");

 

ატრიბუტებისა და კლასების შეცვლა

  • $("img").attr("src", "new-image.jpg"): შეცვალეთ src ატრიბუტის მნიშვნელობა ყველა <img> ელემენტისთვის.
  • $("#myElement").addClass("newClass"): დაამატეთ კლასი newClass ID-ით ელემენტს myElement.
  • $("#myElement").removeClass("oldClass"): ამოიღეთ კლასი oldClass ID-ის მქონე ელემენტიდან myElement.

მაგალითი:

$("img").attr("alt", "New Image");

 

ღონისძიების მართვა

$("button").click(function() { }): დაარეგისტრირეთ მოვლენის დამმუშავებლის ფუნქცია <button> ელემენტზე დაწკაპუნებისას.

მაგალითი:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

ეფექტები და ანიმაციები

  • $("#myElement").hide(): ელემენტის დამალვა ID-ით myElement.
  • $("#myElement").show(): ელემენტის ჩვენება ID-ით myElement.
  • $("#myElement").fadeOut(): შეასრულეთ გაქრობის ეფექტი ელემენტზე ID-ით myElement.
  • $("#myElement").fadeIn(): შეასრულეთ Fade-in ეფექტი ელემენტზე ID-ით myElement.

მაგალითი:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});