Onko oikein ladata jquery-kirjasto. Kuinka piilottaa tai näyttää elementin? Kuinka yhdistää jQuery-kirjasto sivullesi

jQuery-kirjasto

Jos kuvailet lyhyesti, mitä jQuery-kirjasto tekee, se kuulostaa melko arkipäiväiseltä: tämä kirjasto mahdollistaa HTML-dokumenttien sisällön muuttamisen manipuloimalla selainten HTML-koodin käsittelyn aikana luomia malliobjekteja (ns. DOM-manipulaatio).

Olet varmaan joutunut manipuloimaan DOM-objektit(Dokumenttiobjektimalli - objektimalli asiakirja) käyttämällä muita JavaScript-kirjastoja tai sisäänrakennettuja API (Application Programming Interface) -toimintoja, joita useimmat tukevat nykyaikaiset selaimet. Kirjasto kuitenkin jQuery työtä se on paljon parempi. Se tekee DOM-objektien käsittelemisestä hauskaa ja toisinaan melkein hauskaa.

jQueryn kanssa työskentelyssä on jotain niin eleganttia ja houkuttelevaa, että tehtävät, jotka vaativat normaalisti paljon tylsää rutiinitoiminnot, tulee yhtäkkiä erittäin yksinkertaiseksi, joten kun aloitat jQueryn käytön, et voi lopettaa sen käyttöä. Mitä tulee itseeni, käytän jQueryä ohjelmistoprojekteissani. seuraavista syistä:

jQuery-työkalut epätavallisen ilmeikäs. Tämän kirjaston avulla voit saavuttaa paljon enemmän pienemmällä koodilla kuin käyttämällä selaimen DOM-ohjelmointirajapintoja.

jQuery Methods koskee kokonaisia ​​elementtiryhmiä. DOM:n vakiovalinta-toista-muokkaustapaa ei enää tarvita. Tämän seurauksena määrä vähenee silmukoille koodissa, mikä tarkoittaa virheiden esiintymisen todennäköisyyden vähentämistä siinä.

jQuery-kirjasto käsittelee eroja DOM-toteutuksessa eri selaimet(selaimien väliset ongelmat). Minua ei esimerkiksi pitäisi häiritä ajatus tämän tai toisen keinon tukemisen erityispiirteistä, joista se on pahamaineinen Internet-selain Explorer (IE). Sinun tarvitsee vain muotoilla toiveesi jQuerylle, ja kirjasto varmistaa itsenäisesti yhteensopivuuden tietyn selaimen kanssa.

jQuery-kirjasto on avoimen lähdekoodin lähde. Jos työkalun toimintaperiaatteet eivät ole minulle täysin selvät tai saatu tulos ei vastaa odotettua, voin siirtyä suoraan JavaScript-kirjastokoodiin ja tarvittaessa tehdä tarvittavat muutokset.

Tässä käsitellään myös jQuery-käyttöliittymäkirjastoa - tämä on joukko työkaluja, joka on suunniteltu luomaan universaalia käyttöliittymät ja sitä voidaan käyttää kaikilla laitteilla.

Kuvaus jQuery-kirjastosta:

• 1. jQueryn perusteet, työskentely DOM-mallin kanssa
  • Lapsi-, sisar- ja vanhemman elementtien lisääminen

Melnikova 620000 Venäjä, Sverdlovskin alue, Jekaterinburg. +7 953 039 559 1 info@verkkosivusto

Kuinka sisällyttää JQuery-kirjasto

JQuery

CDN:n plussat

Huomautus

CDN:n miinukset

Huomautus

Osoitteesta jquery.com/download

1. Avaa code.jquery.com selaimessasi.

jQuery on JavaScript-kirjasto, joka mahdollistaa vuorovaikutuksen JavaScriptin ja HTML:n välillä. JQueryn ansiosta pääset mihin tahansa DOM-elementti ja manipuloida sitä. Kehittäjät tarjoavat useita versioita tästä kirjastosta:

• julkaisua varten (pakattu versio, jossa kaikki kommentit ja välilyönnit on poistettu - sillä on vähemmän painoa);
• kehittämiseen (pakkaamaton versio kehittäjille, joilla on säilynyt rakenne ja tilat - on enemmän painoa)

On kaksi tapaa yhdistää JQuery sivustoon, jotka eroavat merkittävästi toisistaan ​​ja joilla on hyvät ja huonot puolensa. Tarkastellaan ensin yksinkertaisinta menetelmää ja siirrytään sitten monimutkaisempaan.

Yhdistetään JQueryä käyttämällä CDN:ää

CDN (Content Delivery Network) - maantieteellisesti hajautettu verkkoinfrastruktuuria toimittaa sisältöä käyttäjille. CDN:n avulla voit nopeuttaa sisällön toimittamista loppukäyttäjälle.

CDN:n plussat

• parantaa sivustosi suorituskykyä lataamalla kirjaston Internetistä eikä paikallisesta tallennustilasta.

Huomautus: jos käyttäjä vieraili toisella sivustolla, joka myös käyttää CDN:ää, siirtymällä sivustollemme JQuery-kirjasto ladataan selaimen välimuistista.

CDN:n miinukset

• Jos CDN-palvelin ei jostain syystä ole käytettävissä, JQuery-kirjastoa ei yhdistetä sivustoosi.

Huomautus: CDN-infrastruktuuripalvelimia ei ole saatavilla vain hyvin vähän.

jquery.com/download-sivulla meille tarjotaan useita CDN-palvelimia (Google CDN, Microsoft CDN, CDNJS CDN ja JsDelivr CDN), joista voimme ladata ja yhdistää kirjaston. Käytämme tavallista JQuery CDN:ää. Yhdistä JQuery noudattamalla muutamia yksinkertaisia ​​ohjeita:

1. Avaa code.jquery.com selaimessasi.

2. Valitse vaadittava versio ja kirjaston tyyliin.

3. Lisää seuraava koodi sisällyttääksesi kirjaston johonkin sivustosi alueeseen.

Integrity- ja crossorigin-attribuutteja käytetään tiedoston eheyden tarkistamiseen. Näin selaimet voivat varmistaa, että tiedostot isännöidään osoitteessa kolmannen osapuolen resurssit niitä ei peukaloitu.

4. Kirjasto on yhdistetty sivustoosi onnistuneesti.

Yhdistetään paikalliseen JQuery-kirjastoon

Paikallinen kirjasto on kirjasto, jonka latasit viralliselta verkkosivustolta ja liitit sen sitten sivustosi juurihakemistosta.

Paikallisen kirjaston plussat

• JQuery-kirjasto on aina sivustosi vierailijoiden käytettävissä, koska se ladataan juurihakemistosta.

Paikallisen kirjaston miinukset

• Kun vierailija vierailee sivustolla, selain lataa automaattisesti JQuery-kirjaston välimuistiin. Tämä puolestaan ​​vaikuttaa sivuston suorituskykyyn.

Liitä kirjasto tällä tavalla noudattamalla useita vaiheita seuraavien ohjeiden mukaisesti:

1. Avaa jquery.com/download selaimessasi.

2. Etsi JQuery-otsikko ja valitse haluamasi versio.

3. Aseta ladattu kirjastotiedosto juurihakemisto sinun sivusi.

4. Lisää seuraava koodi sisällyttääksesi kirjaston johonkin sivustosi alueeseen.

Ensimmäinen kysymys, joka herää aloitettaessa työskennellä jQuery-kirjaston kanssa, on kuinka se liitetään? On outoa, etten kirjoittanut tästä aiemmin ja nyt päätin täyttää tämän aukon.

Tässä artikkelissa kerron sinulle, kuinka jQuery lisätään oikein tavalliselle html-sivustolle ja suosittuihin moottoreihin.

Yhdistetään jQuery verkkosivustosi sivulta

Yleisin tapa yhdistää kirjasto. Ensin sinun on ladattava uusin versio kehittäjän verkkosivustolta. Lataussivulla on useita kirjastovaihtoehtoja, esimerkiksi sieltä voi nyt ladata "Compressed, production jQuery 3.1.1" ja "Uncompressed, development jQuery 3.1.1". Ensimmäinen vaihtoehto on kirjaston pakattu versio, kaikki kommentit on poistettu siitä, tässä tapauksessa kirjasto vie paljon vähemmän tilaa, joten sivu, johon se yhdistetään, latautuu nopeammin. Toinen vaihtoehto on karkeasti sanottuna kirjaston lähdekoodi, se on jäsennelty helposti luettavassa muodossa kommenteilla ja on tarkoitettu ensisijaisesti kehittäjille. Siksi suosittelen kirjaston pakatun version käyttöä.

Kun kirjasto on ladattu, sinun on sijoitettava se palvelimelle, jossa sivustotiedostot sijaitsevat. Luon yleensä "js"-kansion sivuston juureen, johon kopioin tarvittavat kirjastot ja laitan sinne myös tiedoston funktioistani.

Nyt voit siirtyä suoraan jQuery-yhteyteen. Sen verkkosivun rakenne, johon liität jQueryn, voi vaihdella. Mutta ehdottomasti sisältää HTML-tunnisteet, PÄÄ ja RUKO. Joten jQueryn yhdistämiseksi sinun on lisättävä SCRIPT-tunniste, jossa on linkki kirjastoon HEAD-tunnisteen sisällä.

Sivuston otsikko

Joissakin tapauksissa kirjasto sisällytetään ennen käsittelytilaukseen liittyvää sulkevaa body-tagia html-sivuja selain. Koska selain lukee rivit peräkkäin, kun jQuery yhdistetään tiedoston lopussa, selain näyttää ensin sivuston ja yhdistää sitten dynamiikan. Hitaalla yhteydellä tämä lähestymistapa varmistaa sivuston latausnopeuden kasvun ja vasta sitten liukusäätimien ja muun työn. Tämän yhteyden koodi näyttää tältä:

Sivuston otsikko

Huomio! On suositeltavaa olla muuttamatta jQuery-kirjastotiedoston nimeä (muutetaan usein muotoon jquery.js), koska tulevaisuudessa tallennetaan virallinen nimi tiedosto auttaa sinua näkemään, mitä kirjaston versiota käytät (esimerkissäni versio 3.1.1 on käytössä).

jQueryn yhdistäminen verkkosivustosi sivuille ulkoisista lähteistä

Tämä menetelmä on hyvä, koska kirjasto on yhdistetty verkkosivustolta, eikä se ole kiintolevylläsi. Tämä pätee erityisesti silloin, kun suuria määriä pieniä projekteja ja oppimista varten.

Tätä yhteystapaa kutsutaan "Yhteyden muodostamiseksi CDN:n kanssa". Sisällönjakeluverkko tai kuten sitä yleisemmin kutsutaan CDN (Content Delivery Network) on palvelimien verkosto ympäri maailmaa. Ne auttavat parantamaan verkkopalvelimesi suorituskykyä ja vähentämään liikenteen kuormitusta.

Suosituimmat CDN:t jQueryn yhdistämiseen:

Käytän yleensä Google Developersin yhteyttä. Useita katkelmia on jo valmisteltu meille projektisivulla. Kopioi vain tarvitsemamme rivi ja sisällytä se tiedostoon. Tällä yhteysmenetelmällä koodi näyttää tältä:

Sivuston otsikko

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Sivuston otsikko< / title > < / head > < body > < / body > < / html >

Etu tätä menetelmää, on se, että monet sivustot yhdistävät jQueryn kautta Google API, mikä tarkoittaa, että tämä kirjasto on suurella todennäköisyydellä jo olemassa käyttäjän selaimen välimuistissa, eikä sitä ladata toista kertaa.

jQueryn yhdistäminen WordPressiin

jQuery sisältyy automaattisesti WordPressiin, joten muiden versioiden kirjastoja ei tarvitse sisällyttää manuaalisesti. Tämä tapahtuu mallissa kanssa php:n avulla koodi:

Tämä johtaa jQuery-yhteysmerkkijonoon HEAD-tunnisteen sisällä.

Kirjoitushetkellä WordPress toimitetaan jQueryn versiolla 1.12.4, mutta kuten näet, kirjaston versio on hyvin erilainen kuin yllä olevissa esimerkeissä. Kirjaston uusin versio on mahdollista yhdistää, mutta on olemassa ristiriidan mahdollisuus.

Vältä ristiriita, mutta käytä silti tarvittavaa kirjaston versiota, sinun on käytettävä oikea tapa jQuery-yhteydet functions.php-tiedostossa:

Ensimmäinen kysymys, joka herää aloitettaessa työskennellä jQuery-kirjaston kanssa, on kuinka se liitetään sivustoon? Vaihtoehtoja on kaksi: muodosta yhteys toiselta sivustolta tai lataa se palvelimellesi.

JQueryn yhdistäminen sivustoon1. Ensimmäinen ja helpoin on käyttää tiedostoa toiselta sivustolta. Tätä varten riittää vain yksi rivi ennen sivusi sulkevaa head -tunnistetta:

Tämä koodi osoittaa kirjaston yhdistämisen Google-sovellusliittymään. Tällä menetelmällä on sekä etuja että haittoja. Etuna tulee olemaan se tämä tyyppi yhteyttä käytetään monilla sivustoilla ja esimerkiksi jos käyttäjä on jo käynyt vastaavalla sivustolla, hänellä on kirjasto välimuistissa eikä vaadi uusi lataus. Huono puoli on se, että olet riippuvainen kolmannen osapuolen palvelin- hänen mahdollisia ongelmia lataamisen myötä niistä tulee sinun.

2. Lataat kirjastotiedostosi palvelimelle

Viimeinen jQuery versio voidaan ladata osoitteesta kotisivu Virallinen verkkosivusto: jquery.com.

Lataa tiedosto. Luo palvelimen juurihakemistoon (kansioon) js-kansio (jos sitä ei ole) ja lataa tiedosto sinne. Oletetaan, että tiedostoa kutsutaan jquery-1.10.1.js. Kytkentäesimerkki alla:

Rivin, jolla on yhteys jQuery-tiedostoon, tulee olla ensimmäinen js-tiedostojen luettelossa (jos sinulla on muita js-yhteyksiä).

Haluan myös kiinnittää huomionne siihen, että yhteyden jQueryyn tulee olla kaikilla sivuilla, joilla sitä käytetään. Yhdellä sivulla ei ole tarpeeksi yhteyttä.

Kuten jo mainittiin, monet suosittu CMS tänään ne tulevat jo jQueryn kanssa, eikä WordPress ole poikkeus. Jos kirjastoa ei kuitenkaan sisälly laajennuksiin, jQueryä ei lataudu automaattisesti. Jotta tämä kehys yhdistetään oikein, sinun on käytettävä wp_enqueue_script()-funktiota. Aseta seuraava koodi teemasi header.php-tiedostoon (avaa editorin kautta):

Kuinka sisällyttää jQuery-kirjasto WordPressiin? Nykyään lähes kaikki sisällönhallintajärjestelmät käyttävät sisäänrakennettua jQueryä. Se jää kytkettäväksi erityinen joukkue. Lisäosat eivät aina sisällä kirjastoa automaattisesti, joten jotkin lohkot ja moduulit eivät välttämättä toimi. Yhdistääksesi sinun tulee käyttää wp_enqueue_script()-funktiota.

Alla on koodi, joka on kirjoitettava header.php-tiedostoon (avaa editorin kautta)

Wp_enqueue_script("jquery");
Tämä toiminto tulee sijoittaa väliin pään tunnisteet ENNEN wp_head()-funktion kutsumista. Tämä tilaus säästää aikaa sivun lataamiseen.

Kuinka sisällyttää jQuery-kirjasto Joomlaan? Käsittelijään syötettävä koodi

$dokumentti = JFactory::getDocument();
$document->addScript("http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"); // Tässä ei ole väliä mistä yhteys tulee, se voi olla verkosta.
/* tai muuten */
$document->addScript("http://omasivusto/js/.js");
Jos kyseessä on sivun malliversio, sinun on lisättävä PHP-koodi