close

Podstawowa składnia jQuery — wybieranie, manipulowanie i efekty

Podstawowa składnia jQuery obejmuje użycie selektora(selektor w stylu CSS) i metod manipulowania wybranymi elementami. Oto kilka podstawowych przykładów składni jQuery:

 

Wybieranie elementów

  • Wybierz elementy według nazwy znacznika HTML: $("tagname") Przykład: $("p") zaznacza wszystkie <p> elementy na stronie.

  • Wybierz elementy według klasy CSS: $(".classname") Przykład: $(".myClass") wybiera wszystkie elementy z klasą „myClass”.

  • Wybierz elementy według identyfikatora: $("#idname") Przykład: $("#myElement") wybiera element o identyfikatorze „myElement”.

  • Wybierz elementy według atrybutu: $("[attribute='value']") Przykład: $("[data-type='button']") wybiera elementy z atrybutem data-type ustawionym na „przycisk”.

  • Łączenie wyborów: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulowanie wybranymi elementami

  • Zmiana zawartości elementu: .html(), .text() Przykład: $("#myElement").html("New content") ustawia zawartość HTML elementu o identyfikatorze „myElement”.

  • Modyfikowanie atrybutów elementu: .attr(), .prop() Przykład: $("img").attr("src", "newimage.jpg") zmienia src atrybut wszystkich <img> elementów.

  • Manipulowanie klasami CSS elementu: .addClass(), .removeClass(), .toggleClass() Przykład: $("#myElement").addClass("highlight") dodaje klasę „highlight” do elementu o identyfikatorze „myElement”.

  • Ukrywanie/pokazywanie elementów: .hide(), .show(), .toggle() Przykład: $(".myClass").hide() ukrywa wszystkie elementy z klasą „myClass”.

  • Obsługa zdarzeń na elementach: .click(), .hover(), .submit(), ... Przykład: $("button").click(function() { ... }) rejestruje procedurę obsługi zdarzenia kliknięcia

 

Praca z kolekcjami elementu

  • Iteracja w kolekcji: .each() Przykład: $("li").each(function() { ... }) iteracja po każdym <li> elemencie na stronie.

  • Filtrowanie kolekcji: .filter(), .not() Przykład: $("div").filter(".myClass") filtruje <div> elementy i wybiera te z klasą "myClass".

  • Wstawianie elementów do kolekcji: .append(), .prepend(), .after(), .before() Przykład: $("#myElement").append("<p>New paragraph</p>") dodaje nowy <p> element do elementu o identyfikatorze "myElement".

 

Efekty i animacje

  • Wykonywanie efektów fadeIn/fadeOut: .fadeIn(), .fadeOut() Przykład: $("#myElement").fadeIn(1000) zanikanie w elemencie o identyfikatorze „myElement” przez 1 sekundę.

  • Wykonywanie efektów slideUp/slideDown: .slideUp(), .slideDown() Przykład: $(".myClass").slideUp(500) przesuwa wszystkie elementy z klasą „myClass” w czasie 0,5 sekundy.

  • Wykonywanie własnych animacji: .animate() Przykład: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animuje element o identyfikatorze „myElement”, zmieniając jego lewe położenie i krycie.

 

Te przykłady pokazują, jak używać różnych aspektów podstawowej składni jQuery do wybierania elementów, manipulowania ich właściwościami i stosowania efektów lub animacji. jQuery oferuje bogaty zestaw metod i funkcjonalności upraszczających i usprawniających zadania związane z tworzeniem stron internetowych.