• JavaScript
Lys – Lag din egen mini-jQuery

22-02-2010

Lys er Puur ter demonstratie. Se jLim for et komplett rammeverk.

Dette er en ekstremt liten og enkel JavaScript-kode. Den kan brukes til små steder hvor ikke alle av funksjonaliteten til de større bibliotekene er nødvendig. Eller bruk den til å lære å designe sitt eget rammeverk.

Med Lys kan du velge hva du ønsker å bruke CSS velgeren motor. Se nedenfor i artikkelen hvordan dette skal.

Slik fungerer det?

// Kjør koden når DOM er lastet
// use the static method
$.ready(funksjon () {

	// put your code here
	var links = $( 'a' ).få(); // få alle elementer (array)
	Var første = $( 'a' ).få(0); // get first element
	var count = $( 'a' ).telle(); // telle utvalgte elementer

	// løpe funksjon for hver valgte element
	$( 'a' ).hvert(funksjon( den ){
		el.target = '_blank';
		// ELLER:
		// $( den ).attr( mål, '_blank' );
	}

}

// andre måter:
$().klar( funk );

// legge til kode som streng:
$().klar( 'alert("Dom er klar")' );

// også chainable
$().klar( func1 ).klar( func2 );

Sett stilen

$( '#act-1' ).css({ bakgrunnsfarge:'#f00' });

Sett flere stiler

$( '#act-2' ).css({ bakgrunnsfarge:'#00f', farge:'#f00', margin igjen:'3em' });

Sett attributt

$( '.ext' ).attr( 'target', '_blank' );

Legge til og fjerne klasser

$( '#act-4' ).addClass( 'btn' );
$( '#act-4' ).removeClass( 'btn' );

Fjern valgte elementer

$( '.remove-btn' ).fjerne();

Endre CSS velgeren motor

Light.selector = Sly; // use Sly  engine
Light.selector = Sizzle; // use Sizzle engine
Light.selector = NW.Dom.select; // use NWMatcher engine
Light.selector = peppy.query; // use Peppy engine
Light.selector = _; // Bruk Yass motor





Lag din egen kode basert på lys

Når du skriver din egen kode basert på lys det ville være trygt å bruke innkapsling blokker.

(funksjon ( $ ) { // start innkapsling, $ stopp

	// sette koden inne i denne blokken

})( Lys ); // end innkapsling, Tenn passere stopp. $ vil være lys inni denne blokken

Last ned

Støtte

Lys werkt i FireFox, Journey, Chrome, Opera, Internet Explorer 6+.
Denne koden er ikke støttet. For forbedret versjon se jLim.

Licentie

Kode faller inn under MIT licentie.

Studiepoeng

Gerelateerde artikelen

Categorie: JavaScript
Tags: , , , , , , , , , , ,

Reacties (2)

  • 08-06-2010 om 06:03 door jlake

    Thank you!
    I like this.

  • 08-07-2010 om 21:18 door Irving Montalvo

    Mini Plugin:

    Light.prototype.addB = function(){
        var b = document.createElement('b');
        b.innerHTML = 'Aquí';
        this.each(function (el){
            el.appendChild(b);
        })
    }

    Use:

    $('a').addB();

Sorry, the comment form is closed at this time.

  • RSS
  • LinkedIn
  • Twitter