aggiungi DIV vuoto.

Aggiungi DIV pieno.

Codice:

 
    
function nuovoDivVuoto () {
	$("<div />").appendTo("#contenitore"); 
}

function nuovoDivPieno () {
	$("<div><p>Esempio di elementi <strong>nidificati</strong></p></div>").appendTo("#contenitore"); 
}
 

Selettore passato alla funzione evidenzia:

1. "a[target='_blank']"
2. "a[title^='nuova']"
3. "a[title$='pagina']"
4. "a[target!='_blank']"
5. "a[target='_blank'][title='nuova pagina']"

Codice:

function evidenzia (selettore) {
	$("#contenitore *").css("background-color",""); //reset dello sfondo
	$("#contenitore "+selettore).css("background-color","yellow");
}

Selettore passato alla funzione evidenzia:

1. "#menu li:first-child"
2. "#menu li:last-child"
3. "#menu li:only-child"
4. "#menu li:nth-child(even)"
5. "#menu li:nth-child(odd)"
6. "#menu li:nth-child(2)"
7. "#menu li:nth-child(3n)"

Codice:

function evidenzia (selettore) {
	$("#contenitore *").css("background-color",""); //reset dello sfondo
	$("#contenitore "+selettore).css("background-color","yellow");
}

Mostra il valore di:

Click su: campo di testo

Click su: selezione singola

Click su: campo radio

Click su: campo checkbox (ritorna solo il primo selezionato)

Click su: selezione multipla (ritorna tutti i valori in un array)

Codice:

function valore (selector) {
	var value = $(selector).val();

	if ($.isArray(value)) { 
		// se il valore è un array uniamo i valori
		value = value.join(", ")
	}

	alert(value);
}

Evidenzia:

1. $("#inizio").next("li")
2. $("#inizio")prev("li")
3. $("#inizio").nextAll("li")
4. $("#inizio").siblings("li")

Codice:

function test_next () {
	$("#menu, #menu *").css("background-color",""); //reset dello sfondo
	$("#inizio").next("li").css("background-color","yellow");
}

function test_prev () {
	$("#menu, #menu *").css("background-color",""); //reset dello sfondo
	$("#inizio").prev("li").css("background-color","yellow");
}

function test_nextAll () {
	$("#menu, #menu *").css("background-color",""); //reset dello sfondo
	$("#inizio").nextAll("li").css("background-color","yellow");
}

function test_siblings () {
	$("#menu, #menu *").css("background-color",""); //reset dello sfondo
	$("#inizio").siblings("li").css("background-color","yellow");
}

Dimensioni e posizioni di Box1:

1. .width() larghezza (200)
2. .innerWidth() larghezza interna (200+10+10)
3. .outerWidth() larghezza esterna (200+10+10+1+1)
4. .offset() posizione sinistra rispetto al documento (41+30)
5. .position() posizone sinistra rispetto a #contenitore (30)

Larghezza di Box2 .width(valore):

1. aumenta di 10px
2. diminiusci di 10px

#box1 {
width:200px;
height:100px;
top:30px;
left:30px;
border:1px solid #999;
padding:10px;
}

Codice:

function test_width () {
	var dim = $("#box1").width();
	alert(dim);
}

function test_innerWidth () {
	var dim = $("#box1").innerWidth();
	alert(dim);
}

function test_outerWidth () {
	var dim = $("#box1").outerWidth();
	alert(dim);
}

function test_offset_left () {
	var dim = $("#box1").offset().left;
	alert(dim);
}

function test_position_left () {
	var dim = $("#box1").position().left;
	alert(dim);
}


function aumenta_width () {
	var dim = $("#box2").width(); //trova la larghezza
	$("#box2").width(dim+10); //aumentala di 10
}
function diminiusci_width () {
	var dim = $("#box2").width(); //trova la larghezza
	$("#box2").width(dim-10); //diminiuscila di 10
}

Clicca nei campi di testo qui sotto

Codice:

$(function () {
    $(":text").bind("focus blur", {"background-color" : "#FFFFCC"}, function (event) {
            if (event.type == "focus") {
                $(this).css(event.data);
            } else {
                $(this).css("background-color","");
            }
    });
});

1. Mostra il box
2. Nascondi il box con funzione di callback
3. Alterna fra mostra e nascondi box
4. Alterna fra mostra e nascondi box senza animazioni

Codice:

function mostra_box () {
	$("#box").show("slow");
}
 
function nascondi_box () {
	$("#box").hide("slow",function () {
		alert("Animazione conclusa!");
	});
}
 
function alterna_box () {
	$("#box").toggle("slow");
}
 
function alterna_box_no_anim () {
	$("#box").toggle();
}