close

Pagrindinė jQuery sintaksė – pasirinkimas, manipuliavimas ir efektai

Pagrindinė jQuery sintaksė apima parinkiklio(CSS stiliaus parinkiklio) ir metodų, skirtų manipuliuoti pasirinktais elementais, naudojimą. Štai keletas pagrindinių jQuery sintaksės pavyzdžių:

 

Elementų pasirinkimas

  • Pasirinkite elementus pagal HTML žymos pavadinimą: $("tagname") Pavyzdys: $("p") pasirenka visus <p> puslapio elementus.

  • Elementų pasirinkimas pagal CSS klasę: $(".classname") Pavyzdys: $(".myClass") pasirenka visus elementus su klase "myClass".

  • Elementų pasirinkimas pagal ID: $("#idname") Pavyzdys: $("#myElement") pasirenkamas elementas, kurio ID „myElement“.

  • Pasirinkti elementus pagal atributą: $("[attribute='value']") Pavyzdys: $("[data-type='button']") pasirenka elementus, kurių atributas data-type nustatytas į "button".

  • Pasirinkimų derinimas: $("tagname.classname"), $("#idname .classname"), ...

 

Pasirinktų elementų manipuliavimas

  • Elemento turinio keitimas: .html(), .text() Pavyzdys: $("#myElement").html("New content") nustato elemento, kurio ID „myElement“, HTML turinį.

  • Elementų atributų keitimas: .attr(), .prop() Pavyzdys: $("img").attr("src", "newimage.jpg") pakeičia src visų <img> elementų atributus.

  • Manipuliavimas elemento CSS klasėmis: .addClass(), .removeClass(), .toggleClass() Pavyzdys: $("#myElement").addClass("highlight") prideda klasę "highlight" prie elemento su ID "myElement".

  • Elementų slėpimas/rodymas: .hide(), .show(), .toggle() Pavyzdys: $(".myClass").hide() paslepia visus elementus su klase "myClass".

  • Įvykių tvarkymas elementuose: .click(), .hover(), .submit(), ... Pavyzdys: $("button").click(function() { ... }) registruoja paspaudimų įvykių tvarkyklę

 

Darbas su elementų kolekcijomis

  • Iteravimas per kolekciją: .each() pavyzdys: $("li").each(function() { ... }) kartojama per kiekvieną <li> puslapio elementą.

  • Kolekcijos filtravimas: .filter(), .not() Pavyzdys: $("div").filter(".myClass") filtruoja <div> elementus ir pasirenka tuos, kurių klasė yra „myClass“.

  • Elementų įterpimas į kolekciją: .append(), .prepend(), .after(), .before() Pavyzdys: prie elemento, kurio ID „myElement“, $("#myElement").append("<p>New paragraph</p>") pridedamas naujas elementas. <p>

 

Efektai ir animacijos

  • FadeIn/fadeOut efektų atlikimas: .fadeIn(), .fadeOut() Pavyzdys: $("#myElement").fadeIn(1000) išnyksta elemente su ID „myElement“ per 1 sekundę.

  • Atliekant slideUp/slideDown efektus: .slideUp(), .slideDown() Pavyzdys: $(".myClass").slideUp(500) per 0,5 sekundės slenka visi elementai su klase "myClass".

  • Pasirinktinių animacijų vykdymas: .animate() pavyzdys: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animuoja elementą su ID „myElement“, pakeisdamas jo kairiąją padėtį ir neskaidrumą.

 

Šie pavyzdžiai parodo, kaip naudoti skirtingus pagrindinės jQuery sintaksės aspektus norint pasirinkti elementus, valdyti jų savybes ir taikyti efektus ar animacijas. „jQuery“ siūlo daugybę metodų ir funkcijų, skirtų supaprastinti ir pagerinti žiniatinklio kūrimo užduotis.