jQuery-ის ძირითადი სინტაქსი მოიცავს სელექტორის(CSS სტილის სელექტორი) და მეთოდებს არჩეული ელემენტების მანიპულირებისთვის. აქ მოცემულია jQuery-ის რამდენიმე ძირითადი სინტაქსის მაგალითი:
ელემენტების შერჩევა
-
ელემენტების შერჩევა HTML ტეგის სახელის მიხედვით:
$("tagname")მაგალითი:$("p")ირჩევს ყველა<p>ელემენტს გვერდზე. -
ელემენტების შერჩევა CSS კლასის მიხედვით:
$(".classname")მაგალითი:$(".myClass")ირჩევს ყველა ელემენტს კლასის "myClass". -
ელემენტების შერჩევა ID-ით:
$("#idname")მაგალითი:$("#myElement")ირჩევს ელემენტს ID-ით "myElement". -
ელემენტების შერჩევა ატრიბუტის მიხედვით:
$("[attribute='value']")მაგალითი:$("[data-type='button']")ირჩევს ელემენტებს ატრიბუტითdata-typeდაყენებული "ღილაკით". -
არჩევანის შერწყმა:
$("tagname.classname"),$("#idname .classname"), ...
არჩეული ელემენტების მანიპულირება
-
ელემენტის შინაარსის შეცვლა:
.html(),.text()მაგალითი:$("#myElement").html("New content")ადგენს ელემენტის HTML შინაარსს ID "myElement". -
ელემენტის ატრიბუტების შეცვლა:
.attr(),.prop()მაგალითი:$("img").attr("src", "newimage.jpg")ცვლისsrcყველა<img>ელემენტის ატრიბუტს. -
ელემენტის CSS კლასებით მანიპულირება:
.addClass(),.removeClass(),.toggleClass()მაგალითი:$("#myElement").addClass("highlight")ამატებს კლასს "highlight" ელემენტს ID "myElement". -
ელემენტების დამალვა/ჩვენება:
.hide(),.show(),.toggle()მაგალითი:$(".myClass").hide()მალავს ყველა ელემენტს კლასში "myClass". -
მოვლენების მართვა ელემენტებზე:
.click(),.hover(),.submit(), ... მაგალითი:$("button").click(function() { ... })აღრიცხავს დაწკაპუნების ღონისძიების დამმუშავებელს
ელემენტების კოლექციებთან მუშაობა
-
გამეორება კოლექციის მეშვეობით:
.each()მაგალითი:$("li").each(function() { ... })იმეორებს<li>გვერდზე თითოეულ ელემენტს. -
კოლექციის გაფილტვრა:
.filter(),.not()მაგალითი:$("div").filter(".myClass")ფილტრავს<div>ელემენტებს და ირჩევს მათ კლასის "myClass". -
ელემენტების ჩასმა კრებულში:
.append(),.prepend(),.after(),.before()მაგალითი: ელემენტს$("#myElement").append("<p>New paragraph</p>")ანიჭებს ახალ<p>ელემენტს ID "myElement".
ეფექტები და ანიმაციები
-
FadeIn/fadeOut ეფექტების შესრულება:
.fadeIn(),.fadeOut()მაგალითად:$("#myElement").fadeIn(1000)ქრება ელემენტში ID "myElement" 1 წამის განმავლობაში. -
slideUp/slideDown ეფექტების შესრულება:
.slideUp(),.slideDown()მაგალითი:$(".myClass").slideUp(500)ასრიალებს ყველა ელემენტს კლასით "myClass" 0,5 წამის ხანგრძლივობით. -
მორგებული ანიმაციების შესრულება:
.animate()მაგალითი:$("#myElement").animate({ left: '250px', opacity: '0.5' })აცოცხლებს ელემენტს ID "myElement"-ით მისი მარცხენა პოზიციის და გამჭვირვალობის შეცვლით.
ეს მაგალითები აჩვენებს, თუ როგორ გამოვიყენოთ jQuery-ის ძირითადი სინტაქსის სხვადასხვა ასპექტები ელემენტების შესარჩევად, მათი თვისებების მანიპულირებისთვის და ეფექტების ან ანიმაციების გამოსაყენებლად. jQuery გთავაზობთ მეთოდებისა და ფუნქციების მდიდარ კომპლექტს ვებ განვითარების ამოცანების გასამარტივებლად და გასაუმჯობესებლად.