Leggerai questo articolo in: 3 minuti

Se siete nuovi di jQuery salvate questa pagina nei vostri preferiti! jQuery ha la particolarità di essere un linguaggio molto potente e allo stesso tempo molto semplice. Tanto per portarvi un esempio, il suo motto è: “Write less, do more” ovvero “Scrivere di meno, fare di più“.

useful jquery functions

Vediamo delle funzioni molto utili per il tuo sito…

1. Selettori jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 //--- COMMON JQUERY SELECTORS ---//
            // get element by id
            $("#ElementID").whatever();
 
            // get element by css class
            $(".ClassName").whatever();
 
            // get elements where id contains a string
            $("[id*='value']").whatever();
 
            // get elements where id starts with a string
            $("[id^='value']").whatever();
 
            // get elements where id ends with a string
            $("[id$='value']").whatever();
 
            // get all elements of certain type (can use "p", "a", "div" - any html tag)
            $("div").whatever();

2. jQuery Toggle, Funzione mostra e nascondi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  //--- JQUERY TOGGLE/SHOW/HIDE ---//
            // toggle hide/show of an element
            $("#DivID").toggle(1000);
 
            // do something when animation is complete
            $("#DivID").toggle(1000, function () {
                alert("Toggle Complete");
            });
 
 
            // hide an element
            $("#DivID").hide(1000);
 
            // do something when animation is complete
            $("#DivID").hide(1000, function () {
                alert("Hide Complete");
            });
 
 
            // show an element
            $("#DivID").show(1000);
 
            // do something when animation is complete
            $("#DivID").show(1000, function () {
                alert("Show Complete");
            });

3. Funzioni jQuery slide:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 //--- JQUERY SLIDE - SLIDE AN ELEMENT IN AND OUT ---//
            // toggle slide up and down
            $("#DivID").slideToggle(1000);
 
            // do something when animation complete
            $("#DivID").slideToggle(1000, function () {
                alert("Slide Toggle Complete");
            });
 
            // slide up
            $("#DivID").slideUp(1000);
 
            // do something when animation is complete
            $("#DivID").slideUp(1000, function () {
                alert("Slide Up Complete");
            });
 
            // slide down
            $("#DivID").slideDown(1000);
 
            // do something when animation is complete
            $("#DivID").slideDown(1000, function () {
                alert("Slide Down Complete");
            });

4. Funzioni jQuery fade:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  //--- JQUERY FADE - FADE AN ELEMENT IN, OUT & TO ---//
            // fade in
            $("#DivID").fadeIn(1000);
 
            // do something when animation complete
            $("#DivID").fadeIn(1000, function () {
                alert("Fade In Complete");
            });
 
            // fade out
            $("#DivID").fadeOut(1000);
 
            // do something when animation is complete
            $("#DivID").fadeOut(1000, function () {
                alert("Fade Out Complete");
            });
 
            // fade to (fades to specified opacity)
            $("#DivID").fadeTo(1000, 0.25);
 
            // do something when animation is complete
            $("#DivID").fadeTo(1000, 0.25, function () {
                alert("Fade To Complete");
            });

5. Funzioni jQuery Animazioni:

1
2
3
4
5
6
7
8
    //--- ANIMATE (EXAMPLE USES OPACITY, BUT CAN USE ANY CSS PROPERTY. ---//
            //--- NOTE SOME MY REQUIRE THE USE OF A PLUGIN SUCH AS JQUERY COLOR ANIMATION PLUGIN. ---//
            $("#DivID").animate({ opacity: 0.25 }, 1000);
 
            // do something when animation complete
            $("#DivID").animate({ opacity: 0.25 }, 1000, function () {
                alert("Opacity Animation Complete");
            });

6. Aggiungi e rimuovi classi CSS:

1
2
3
4
5
6
7
8
9
10
11
12
            //--- ADD & REMOVE CSS CLASSES ---///
            // add css class
            $("#DivID").addClass("newclassname");
 
            // remove css class
            $("#DivID").removeClass("classname");
 
            // add & remove class together
            $("#DivID").removeClass("classname").addClass("newclassname");
 
            // add & remove multiple classes
            $("#DivID").removeClass("classname classname2").addClass("newclassname newclassname2");

7. Ottenere e settare i valori di una textBox:

1
2
3
4
5
6
7
            //--- GET & SET TEXTBOX VALUE ---// 
            //--- CAN ALSO BE USED ON ANY OTHER ELEMENT THAT HAS A VALUE PROPERTY ---//
            // get the value of a textbox
            var TextboxValue = $("#TextboxID").val();
 
            // set the value of a textbox
            $("#TextboxID").val("New Textbox Value Here");

8. Ottenere e settare elementi HTML:

1
2
3
4
5
6
            //--- GET & SET HTML OF ELEMENT ---//
            // get element html
            var DivHTML = $("#DivID").html();
 
            // set element html
            $("#DivID").html("<p>This is the new html</p>");

9. Ottenere e settare elementi di testo:

1
2
3
4
5
6
            //--- GET & SET TEXT OF ELEMENT ---//
            // get text of element
            var DivText = $("#DivID").text();
 
            // set text of element
            $("#DivID").text("This is the new text.");

10. Ottenere e settare la larghezza e l’altezza degli elementi:

1
2
3
4
5
6
7
8
9
10
11
12
13
            //--- GET & SET ELEMENT'S WIDTH & HEIGHT
            // get element height
            var ElementHeight = $("#DivID").height();
 
            // set element height
            $("#DivID").height(300);
 
 
            // get element width
            var ElementWidth = $("#DivID").width();
 
            // set element width
            $("#DivID").width(600);

EXTRA: Cambiare le proprietà CSS degli elementi:

1
2
3
            //--- CHANGE AN ELEMENT'S CSS PROPERTY ---//
            $("#DivID").css("background-color", "#000");
            $("#DivID").css("border", "solid 2px #ff0000");

Ti sono state utili? Vuoi segnalare qualche altra funzione interessante?
Non dimenticare di condividere l’articolo con i tuoi amici!

[adsense]