close

Grundläggande syntax för jQuery- Välja, manipulera och effekter

Den grundläggande syntaxen för jQuery innebär att man använder en väljare(CSS-stil väljare) och metoder för att manipulera de valda elementen. Här är några grundläggande syntaxexempel på jQuery:

 

Att välja element

  • Välj element med HTML-taggnamn: $("tagname") Exempel: $("p") väljer alla <p> element på sidan.

  • Välj element efter CSS-klass: $(".classname") Exempel: $(".myClass") väljer alla element med klassen "myClass".

  • Välj element efter ID: $("#idname") Exempel: $("#myElement") väljer elementet med ID "myElement".

  • Välj element efter attribut: $("[attribute='value']") Exempel: $("[data-type='button']") väljer element med attributet data-type satt till "knapp".

  • Kombinera val: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulera valda element

  • Ändra innehållet i ett element: .html() Exempel .text(): $("#myElement").html("New content") ställer in HTML-innehållet för elementet med ID "myElement".

  • Ändra elementattribut: .attr(), .prop() Exempel: $("img").attr("src", "newimage.jpg") ändrar src attributet för alla <img> element.

  • Manipulera CSS-klasser för ett element: , .addClass() Exempel .removeClass(): .toggleClass() lägger $("#myElement").addClass("highlight") till klassen "highlight" till elementet med ID "myElement".

  • Dölja/visa element: .hide(), .show(), .toggle() Exempel: $(".myClass").hide() döljer alla element med klassen "myClass".

  • Hantera händelser på element: .click(), .hover(), .submit(), ... Exempel: $("button").click(function() { ... }) registrerar en klickhändelsehanterare

 

Arbeta med samlingar av element

  • Itererar genom en samling: .each() Exempel: $("li").each(function() { ... }) itererar över varje <li> element på sidan.

  • Filtrera en samling: .filter(), .not() Exempel: $("div").filter(".myClass") filtrerar <div> elementen och väljer de med klassen "myClass".

  • Infoga element i en samling: .append(), .prepend(), .after(), .before() Exempel: $("#myElement").append("<p>New paragraph</p>") lägger till ett nytt <p> element till elementet med ID "myElement".

 

Effekter och animationer

  • Utför fadeIn/fadeOut-effekter: .fadeIn(), .fadeOut() Exempel: $("#myElement").fadeIn(1000) tonar in elementet med ID "myElement" under en varaktighet på 1 sekund.

  • Utför slideUp/slideDown-effekter: .slideUp(), .slideDown() Exempel: $(".myClass").slideUp(500) glider upp alla element med klassen "myClass" under en varaktighet på 0,5 sekunder.

  • Utföra anpassade animeringar: .animate() Exempel: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animerar elementet med ID "myElement" genom att ändra dess vänstra position och opacitet.

 

Dessa exempel visar hur man använder olika aspekter av den grundläggande syntaxen för jQuery för att välja element, manipulera deras egenskaper och tillämpa effekter eller animationer. jQuery erbjuder en rik uppsättning metoder och funktioner för att förenkla och förbättra webbutvecklingsuppgifter.