Johdatus Cheatsheet JQueryyn
Jquery on käyttöympäristöjen välinen javascript-kirjasto, joka jatkaa ensisijaista aikomustaan helpottaa verkkokehityksen koodaamista. On todistettu lausunto, että Jqueryn käyttöönotto on melko lyhentänyt javascript-koodien pituutta. Siksi jopa monirivinen javascript-koodi voidaan helposti saavuttaa pienellä lohkolla tai jopa yhdellä rivillä JQuery-käskyä.
Tässä Cheatsheet JQuery -artikkelissa keskustellaan siitä, mikä on Jquery ja tämän kehyksen PTP:
Internetissä on lukuisia aktiivisia verkkosivustoja, ja markkinoihin kuuluu laaja valikoima kieliä, jotka suorittavat näiden verkkosivustojen ja online-tuotteiden rakentamisen. Jotkut kuuluisista ovat seuraavat,
- HTML, CSS
- Javascript ja JQuery asiakaspään komentosarjoille
- PHP palvelimen loppukomentosarjoille
- MYSQL tietokannan kyselyihin
- jne.
JQuery-kehyksen käytön edut muihin verrattuna,
- Siihen kuuluu valtava yhteisö ja joukko siihen liitettyjä laajennuksia.
- kevyt
- tehokkaat ketjutusominaisuudet
- Lyhyt dokumentaatio ja oppaat
- Kyky kehittää Ajax-komponentteja helposti
- Se on kyky tehdä koodista yksinkertainen ja uudelleen käytettävä
- Selainystävällinen
JQuery-huijaussivun perussisältö ja syntaksi:
Sisällytä: Jqueryn sisällyttäminen nykyiseen suoritusskriptiin
Syntaksi: JQueryn syntaksirakenne
Valitsin valitse HTML-komponentit
$(Selector).action() Valitulle komponentille suoritettu toiminto
Määrittää JQueryn käytön
Huijausarkki Jquery-valitsijoille:
| Valitsin | KUVAUS |
| $ ( ”*”) | Valitsee kaikki HTML-elementit |
| $ ( ”P.demo”) | valitsee
tag-elementit |
| $ ( ”: Painike”) | Valitsee painikkeen ja syöttöelementit |
| $ ( ”Tr: jopa”) | Valitsee tasaisen |
| $ ( ”Tr: pariton”) | Valitsee parittoman |
| $ ( ”Span: emo”) | Valitsee elementit, joihin liittyy alaelementti |
| $ ( ”(Section)”) | Valitsee kaikki elementit, joilla on href-määrite |
| $ ( ”: Input”) | Valitsee kaikki lomakeelementit |
Huijarilehti Jquery-tapahtumille: Tapahtuma on jonkinlainen verkkosivun toiminta, Tärkeimmät tapahtumat ovat seuraavat.
| Hiiretapahtumat | Hiiritapahtumamenetelmä | Näppäimistötapahtumat | Näppäimistötapahtumamenetelmä | Lomaketapahtumat | Lomaketapahtuman menetelmä |
| hiiren Enter | .mouseenter () | näppäinpainalluksen | .keypress () | muuttaa | .muuttaa() |
| Tuplaklikkaus | .dblclick () | Keydown | .keydown () | fokus | .focus () |
| klikkaus | .klikkaus() | keyup | .keyup () | hämärtää | .hämärtää() |
| hiiren lähteä | .mouseleave () | Selaintapahtumat | Selaintapahtumamenetelmä | Asiakirjatapahtumat | Asiakirjatapahtumien menetelmät |
| hiiri alas | .mousedown () | Virhepopulaatio | .virhe() | purkaa | .purkaa() |
| hiiri ylös | .mouseup () | vierittää | .scroll () | ladata | .ladata() |
Esimerkki:
$("p").dblclick(function()(
$(this).hide();
));
Huijarilehti Jquery-vaikutukset:
Perusteet: .hide (), .show (), .toggle () - Mahdollistaa valittujen elementtien piilottamisen, näyttämisen ja vaihtamisen.
Esim:
$("p").hide();
Mukautettu: .animate (), .delay (), .dequeue (), .stop ()
- animaatiomenetelmä () valmistaa mukautettuja animaatioita
- viive () -menetelmä sallii kohteiden viivästyneen suorittamisen.
- dequeue () suorittaa jonossa seuraavan toimintosekvenssin.
Esimerkki:
$("element1").animate(
(
opacity : 0.50
left: "+=27"
)
Häivytys: fadeTo (), fadeOut (), fadeIn (), fadeToggle ()
- fadeIn () Poistaa piilotetun elementin
- fadeout () antaa näkyvän elementin haalistua
- fadeTo () häviää tiettyyn opasiteettiin
- fadeToggle () antaa elementin siirtyä fade in- ja fade out -menetelmiin.
Esimerkki:
$("button").click(function()
(
$("#div2").fadeOut("slow");
));
Dia: slideDown (), slideUp (), slideToggle ()
- slideDown () Näyttö liukuvalla liikkeellä, jotka eivät ole sopivia
- slideToggle () Näyttää tai piilottaa liukuvalla liikkeellä yli sovitetut elementit
- slideUp () Piilottaa liukuvalla liikkeellä ylittämättömät elementit
Ilmaiset vinkit ja vinkit huijauslehden jQuery käytöstä
1) Pidä kontekstiparametri, joka sallii suorituksen aloittaa syvemmältä DOM-haaralta sen sijaan, että kutsutaan juurista.
2) Tarkista onko elementti olemassa ja työnnä sitten eteenpäin koodin suorittamiseksi.
Syntaksi :
if($("#element").length)
(
// DOM element exists
)
else
(
//DOM element dont exists
)
3) jQuerys-datamenetelmä sitoo DOM-elementtejä ja tietoja muuttamatta DOM: ta.
4) Tarkista, onko jokin elementeistä piilotettu.
Esimerkki:
if($(element).is(":visible") == "true")
(
//The element is Visible
)
5) Pidä laskelma välittömästi edeltävistä lapsielementeistä.
6) Kuvien lataaminen ennen optimoi kyselyn suorituskyvyn.
7) On parempi tarkistaa, että kysely on ladattu onnistuneesti ennen sen suorittamista.
Esim:
if (typeof jQuery == 'undefined')
(
console.log('jQuery not loaded');
)
else
(
console.log('jQuery loaded');
)
8) Murtuneet kuvan linkit voidaan korvata helposti suorittamalla alla oleva koodiosa,
Esim:
$('img').on('error', function ()
(
if(!$(this).hasClass('broken-image'))
(
$(this).prop('src', 'img/broken.png.webp').addClass('broken-image');
)
));
9) Kehys on aina varmistettava, että se sopii sivun sisältöön.
10) Omat valintasuodattimet voidaan lisätä Jqueryyn. kuten kaikki kirjaston valintasuodattimet voidaan myös räätälöidä. $ .expr (':') -objektin lisääminen tekee tämän.
Esimerkki:
(function($)
(
var random = 0
$.expr(':').random = function(a, i, m, r)
(
if (i == 0)
(
random = Math.floor(Math.random() * r.length);
)
return i == random;
);
))(jQuery);
// how to utilize this piece of code.
$('li:random').addClass('glow');
11) Poistamalla käytöstä määritetty arvo syötteeseen antaa syöttökentän pitää käytöstä, kunnes tietyt suhteelliset kentät on täytetty.
Esim:
$('input(type="submit")').prop('disabled', true);
12) Muista määrittää virheenkäsittelyosasto ajax-virhepalautusten käsittelemiseksi. Kun osuma 400 tai 500 tapahtuu, tämä osa laukaistaan automaattisesti.
Esim:
$(document).on('ajaxError', function (e, xhr, settings, error)
(
console.log(error);
));
Huijarilehti JQuery - johtopäätös
Jquery vähentää ylimääräistä monimutkaisuutta, joka javascriptilla on sen mukana. useiden jquery-osastoihin liittyvien yksiköiden kanssa markkinoiden suosituimmista verkkosivustojen kehittämistyökaluista. sen kevyt ja tehokas ketjutusominaisuus ovat tehneet web-koodauksen oikeudenmukaisesti kehittäjille helposti.
Suositeltava artikkeli
Tämä on ollut opas Huijauslehden JQuerylle. Tässä olemme keskustelleet Huijauslevyn JQueryn sisällöstä ja komennosta sekä ilmaisista vinkistä ja temppuja. Voit myös lukea lisätietoja seuraavasta artikkelista -
- jQuery -haastattelukysymykset
- Huijari arkki C ++: lle
- Huijari arkki SQL: lle
- JavaScript vs. JQuery
- Paras huijauskortti UNIX: lle
- Cheat Sheet JavaScript: Mitkä ovat edut
- 8 parasta jQuery-valitsinta koodin toteutuksella