Neo-IT



Week: 3
Uw ip adres is: 54.234.45.10

Jquery

Een jQuery plugin maak je op de volgende manier
$.fn.greenify = function() {
this.css( "color", "green" );
};
//test:
$( "a" ).greenify();


Selector op inhoud van een element
$('.google:contains("Nieuws")').fadeOut(3000)

Performance tips
Voor hide() en show() kun je beter een klasse maken bijvoorbeeld .verberg{display:none;} en dan addClass('verberg') removeClass('verberg') gebruiken.
Door deze animatie in css onder te brengen, ontlast je de javascript engine.

$.map om array's te maken
aArr = $.map($('selector'), function(waarde, index, array){ iets doen met de parameters});

forEach array doorlopen
aArr.forEach(function(waarde, index, array){ iets doen met de parameters});

.holdReady
.holdReady zet het ready event in de wacht totdat de plugin is geladen
$.holdReady( true );
$.getScript( "myplugin.js", function() {
$.holdReady( false );
});


.ajaxSetup()
Hiermee kun je de variabelen instellen voor een AJAX request.
Bijvoorbeeld de URL opgeven voor alle AJAX requests:
$.ajaxSetup({
  url : '/AJAX_bla.php'
});


Arrays
Met .grep()  kun je zoeken in een array en met .merge() kun je ze samenvoegen

Controleren of een element zichtbaar is
$('element').is(':visible');//Geeft boolean waarde terug

Effect (css) tijdens een delay
$('#tip') .delay(800) .queue( function(next){ $(this).css('display','none'); next(); });

Het verschil tussen attributes/attr() en properties/prop() (jQuery 2.0+)
attr() heeft betrekking op het HTML element (HTML) is dus statisch
prop() heeft betrekking op de geparste pagina (DOM) en is dynamisch
<[input type=text value=testTEXT name=test]>
[type] en [value] zijn attributen 
zodra de browser deze html verwerkt/rendert dan krijgt het properties zoals: align, alt, autofocus etc.
En wanneer er de value veranderd wordt door het intikken van tekst in de input en je vervangt testTEXT door AAP dan 
krijg je de volgende resultaten:
$('input[name=test]').prop('value') ---> "AAP"
$('input[name=test]').attr('value') ---> "testTEXT"
Bij checked moet je dus .prop("checked") gebruiken of natuurlijk .is(':checked')

Selelectors
Using $("[class^=main]") will select all elements whose classname starts with 'main'. Take a look athttp://api.jquery.com/category/selectors/, there are a lot of other variations you can use, for example:

[class*=main] will select elements whose classname contains 'main'
[class~=main] will select elements whose classname has the word 'main' (delimited with spaces)
[class$=main] will select elements whose classname ends in 'main'
werkt ook op id

Live is nu on geworden en heeft de volgende vorm
$(selector).on( "click", "deContext.cssKlasseEtc", function() { alert( "Hallo!" ); });

Selecteer op de tekst van een option
$("[name=product_id] :contains('BMW')")

Meer dan 1 event binden aan dezelfde actie
$('.bla').on('click mouseover',function(){});
Welk event getriggerd is kun je dan eventueel opvragen met event.type

Specifieke parent 
.parents(SELECTOR) = de eerst voorkomende SELECTOR als parent
.parent().eq(0) = vader
.parent().eq(2) = grootvader

De content van een iframe laten bepalen welke functie er aan een knop hangt van de parent
in de parent: definieer je de functie en verwijs je als volgt naar de iframe
($('iframe').contents().find("body").html()); 
in de iframe:
var printenDefaultFunction = $('#uPrint',window.top.document).attr("onClick");
$('#uPrint',window.top.document).attr("onClick","printIets()");
 $(window).unload(function(){$('#uPrint',window.top.document).attr("onClick",printenDefaultFunction);});

Het popup venster raadplegen vanuit een iframe window
Doe je met opener.top.document

Datum vandaag dd-mm-yyyy
var now = new Date();
var vandaag = ('0' + now.getDate()).slice(-2) +'-'+ ('0' + parseInt(now.getMonth()+1)).slice(-2) +'-'+ now.getUTCFullYear();

Voor automatisch instellen van de hoogte van een iframe moet in de bovenliggende parent een functie aanwezig zijn waarin in ieder geval dit staat:    
function hoogteIframe(){
$('iframe').height($('iframe').contents().height());
}
Daarna roep je vanuit de iframe en op het moment van laden de functie aan waarin dit in de parent staat
setTimeout('parent.hoogteIframe()',100);   
De scrollbalk moet wel uitgezet worden in de code met scrolling="no"

Set de selected value
$('select[name=eenNaam]').find("option[value="+$('#bla').val()+"]").prop("selected", true)

Selected index tekst
$('select[name=product_id]>option:selected').text();

Vanuit iframe naar parent traversen
$(‘body’, window.top.document).css(‘z-index’,’0’)
de tweede parameter geeft de "zoek" context aan
 
Aan de hand van de title van een img,  de parent td’s een style meegeven
$(‘img[title=Afgehandeld]’).parent().prevAll(‘td’).css(‘opacity’,0.4);

Plaatjes aan de hand van de src verbergen
$(‘img[src=”/eenPad/images/up.png”], img[src=”/eenPad/images/down.png”]’).hide();

.promise()
Geeft een promise object terug zodra alle acties van een bepaald type (en collectie) zijn afgerond. Ongeacht of deze in een queque staan.

Debug code voor AJAX
$.post(‘/eenPad/AJAX_checkHVP.asp’,{iets_id:525, nogiiets_id: 315}).done(function(data) {alert(“Data Loaded: “ + data);})

Filter een nummer uit de querystring
$(this).attr(“href”).match(/d+/);

Second child selector en append text
$("ul li:nth-child(2)").append(" - 2nd!")

Om de li een ol plaatsen
$(‘div.picklist’).wrap(‘<li>’)

Kijken of een checkbox is aangevinkt of afgevinkt--- geeft true of false terug
$(‘input[name=”casus”]’).is(‘:checked’)

Toggle functie
                var klik = 1;
                $('.eenSelector').on('click',function(){
                               if(klik==1){
                                               overzicht1();
                                               klik++;
                               } else if(klik==2){
                                               overzicht2();       
                                               klik++;                                 
                               } else if(klik==3){
                                               overzicht3();
                                               klik = 1;
                               }             
                });

Each functie
$( "li" ).each(function( index ) {
  console.log( index + ": " + $(this).text() );
});
A message is thus logged for each item in the list:
0: foo 
1: bar


Gebruik van variabelen kan de performance aanzienlijk verbeteren
var someDivs = $('#container').find('.someDivs'),
      contents = [];
someDivs.each(function() {
    contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

Gebruik de find() functie, dit geeft ook snelheidswinst
//Snel:
$( "#container div.robotarm" );
// Super-snel:
$( "#container" ).find( "div.robotarm" );
De .find() benadering is sneller omdat de eerste selectie wordt afgehandeld zonder gebruik te maken van de zgn. "Sizzle selector engine" – ID selectors gebruiken achter de schermen alleen document.getElementById(), dit is de snelste manier omdat dit in de browser zelf zit verweven.

Hoogte instellen van een element afhankelijk van de inhoud 
$('#element').height($('.elementDiv:last').offset().top +$('.elementDiv:last').height())

In een each lus de nth element (bv. td) krijgen
var nthIndex = $(this).index(); //begint bij 1
nthIndex = nthIndex -1;
Handig om kolommen op te tellen bijvoorbeeld.