Kodavsnitt 2025, September

Ställ in / rensa standardinmatningsvärde - CSS-tricks

Ställ in / rensa standardinmatningsvärde - CSS-tricks

$ ('. standardvärde'). varje (funktion () (var default_value = this.value; $ (this) .focus (function () (if (this.value == default_value) (this.value = '' ;))); "

Serialisera formulär till JSON - CSS-tricks

Serialisera formulär till JSON - CSS-tricks

$ .fn.serializeObject = function () (var o = (); var a = this.serializeArray (); $ .each (a, function () (if (o) (if (! o.push) (o = );) o.push (this.value "

Välj endast listobjekt om det inte innehåller en annan lista (och är på toppnivå) - CSS-tricks

Välj endast listobjekt om det inte innehåller en annan lista (och är på toppnivå) - CSS-tricks

Jag inser att detta är ganska specifikt, men jag var tvungen att skriva den här väljaren tidigare för att åtgärda ett problem och jag använde jQuery eftersom väljaren är ganska avancerad "

Välj endast element om barn inte är animerade - CSS-tricks

Välj endast element om barn inte är animerade - CSS-tricks

Var myChildrenBehave = $ (". element"). filter (function () (var filtered = $ (this) .children (). not (": animated"); return filtered;)); Detta väljer elementet "

Kör JavaScript först efter att hela sidan har laddats - CSS-tricks

Kör JavaScript först efter att hela sidan har laddats - CSS-tricks

$ (fönster) .bind ("ladda", funktion () (// kod här)); "

Sök / ersätt - CSS-tricks

Sök / ersätt - CSS-tricks

JQuery (funktion () (jQuery (": innehåller (HITTA)"). inte (": har (: innehåller (HITTA))"). vardera (funktion () (var att = $ (detta), html = det. html (); html = "

Deluppdatering av sidan - CSS-tricks

Deluppdatering av sidan - CSS-tricks

Uppdatera vissa element på en sida med jQuery efter en viss tid, kan användas med vilket element som helst med ett ID. Jag ändrade exemplet med "

Ta bort specifikt värde från array - CSS-tricks

Ta bort specifikt värde från array - CSS-tricks

Var arr =; var removeItem = 2; arr = $ .grep (arr, funktion (värde) (returvärde! = removeItem;)); "

Gör hela div-klickbara - CSS-tricks

Gör hela div-klickbara - CSS-tricks

Uppdatering november 2020: Jag tror att den bästa möjliga tekniken för detta är metod 4 i den här artikeln.

(eller vad som helst omslagselement) förblir "

Ihållande rubriker på tabeller - CSS-tricks

Ihållande rubriker på tabeller - CSS-tricks

När du rullar ner på en sida med en lång tabell, rullar vanligtvis tabellens rubrik bort och blir värdelös. Den här koden klonar tabellhuvudet "

Klistra in händelser - CSS-tricks

Klistra in händelser - CSS-tricks

$ .fn.pasteEvents = funktion (fördröjning) (om (fördröjning == odefinierad) fördröjning = 20; returnera $ (detta). varje (funktion () (var $ el = $ (detta); $ el.on ("klistra in) ", funktion ()"

Lösenordsstyrka - CSS-tricks

Lösenordsstyrka - CSS-tricks

$ ('# pass'). keyup (funktion (e) (var strongRegex = ny RegExp ("^ (? =. (8,)) (? =. *) (? =. *) (? =. *) (? =. * \ W). * $ "," G "); var mediumRegex = ny"

Flytta klickade listobjekt till toppen av listan - CSS-tricks

Flytta klickade listobjekt till toppen av listan - CSS-tricks

Om vi ​​antar HTML så här: en två tre Så om "Två" klickas, flytta den till toppen av listan. $ ("li"). klicka på (funktion () ("

Öppna externa länkar i nytt fönster - CSS-tricks

Öppna externa länkar i nytt fönster - CSS-tricks

$ ('a'). varje (funktion () (var a = ny RegExp ('/' + window.location.host + '/'); om (! a.test (this.href)) ($ (detta ) .click (funktion (händelse) ("

Flytta markören till slutet av textarea eller inmatning - CSS-tricks

Flytta markören till slutet av textarea eller inmatning - CSS-tricks

Kod för att flytta markören till slutet av den aktuella texten i inmatningen, snarare än standard (markera texten). Plugin-format "

Yttre HTML jQuery-plugin - CSS-tricks

Yttre HTML jQuery-plugin - CSS-tricks

InnerHTML () är infödd och returnerar innehållet i en DOM-nod (t.ex. jag bor i en div .. yttre HTML () är inte, vilket skulle inkludera den aktuella DOM-noden "

Gör jQuery: innehåller skiftlägeskänsliga - CSS-tricks

Gör jQuery: innehåller skiftlägeskänsliga - CSS-tricks

NY väljare jQuery.expr.Contains = funktion (a, i, m) (returnera jQuery (a) .text (). ToUpperCase () .indexOf (m.toUpperCase ())> = 0;); // ÖVERSKRIVAR gamla "

En jQuery hasAttr () Motsvarande - CSS-tricks

En jQuery hasAttr () Motsvarande - CSS-tricks

JQuery har inte riktigt en .hasAttr () -funktion. Du kan anta att det gör det, men tyvärr gör det inte. En StackOverflow-tråd har några ganska bra "

Ladda bara en del av en sida - CSS-tricks

Ladda bara en del av en sida - CSS-tricks

Använd fall Du vill AJAX ladda en del av en annan sida på din webbplats till den aktuella sidan. Anta att ditt e-handels-CMS-system skapar en dynamisk meny med "

Bläddra sida horisontellt med mushjulet CSS-tricks

Bläddra sida horisontellt med mushjulet CSS-tricks

1) Ladda jQuery och plugin för mushjul finns här. 2) Fäst mushjulshändelsen på kroppen "30" representerar hastighet. preventDefault säkerställer "

Ladda jQuery endast om det inte finns - CSS-tricks

Ladda jQuery endast om det inte finns - CSS-tricks

Anta att du skulle göra en inkludering på en hel massa sidor, och inuti den skulle du vilja göra några jQuery-specifika saker. Den sidan kan eller "

Laddar jQuery - CSS-tricks

Laddar jQuery - CSS-tricks

Ladda med Google API Direktlänk till Google Kontrollera om laddad, ladda endast om olastad var jQueryScriptOutputted = false; funktion initJQuery () (// om "

Konami-koden - CSS-tricks

Konami-koden - CSS-tricks

Var kkeys = (), konami = "38,38,40,40,37,39,37,39,66,65"; $ (dokument) .keydown (funktion (e) (kkeys.push (e.keyCode); om (kkeys.toString (). indexOf (konami ")

JQuery klibbig sidfot - CSS-tricks

JQuery klibbig sidfot - CSS-tricks

I allmänhet är CSS Sticky Footer det bästa sättet att gå, eftersom det fungerar perfekt smidigt och inte kräver JavaScript. Om den önskade markeringen helt enkelt inte är

JQuery Zebra Stripe a Table - CSS-tricks

JQuery Zebra Stripe a Table - CSS-tricks

$ ("tr: udda"). addClass ("udda"); Använd sedan CSS: .odd (bakgrund: #ccc;) "

Länk Nudging - CSS-tricks

Länk Nudging - CSS-tricks

$ ("a"). hover (function () ($ (this) .stop (). animera ((paddingLeft: "10px"), 200);), function () ($ (this) .stop (). animera ((paddingLeft: "0px"), 200);)); Göra"

Håll synkroniserade textinmatningar - CSS-tricks

Håll synkroniserade textinmatningar - CSS-tricks

Var $ ingångar = $ (". exempel-ingång"); $ inputs.keyup (funktion () ($ inputs.val ($ (detta) .val ());)); Exempel"

JQuery Tweetify Text - CSS-tricks

JQuery Tweetify Text - CSS-tricks

Funktion $ .fn.tweetify = funktion () (this.each (function () ($ (this) .html ($ (this) .html () "

Mall för plugin för jQuery - CSS-tricks

Mall för plugin för jQuery - CSS-tricks

Ersätt instanser av "yourPluginName" med ditt faktiska plugin-namn. Saker om "radie" är bara ett exempel på ett alternativ (parameter för att skicka plugin). "

JQuery JSON får med felhämtning - CSS-tricks

JQuery JSON får med felhämtning - CSS-tricks

JQuery har en inbyggd funktion som heter getJSON () för att underlätta AJAX-förfrågningar om JSON-data. Det fungerar normalt bra, men om den funktionen blir "