Οι 10 δημοφιλέστερες συναρτήσεις για jQuery

03 Μαρ 2011 | JavaScript

Δεν επιτρέπονται τα σχόλια.


jQuery

Αν είστε νέος χρήστης του δημοφιλούς JavaScript framework, jQuery, τότε αυτό το άρθρο είναι για εσάς. Σε αυτό το άρθρο θα βρείτε μια απλοποιημένη λίστα από τις ποιο συχνά χρησιμοποιούμενες συναρτήσεις του jQuery, σε συνδιασμό με απλά παραδείγματα.

Selectors

    // Επιλογή στοιχείου με id
    $("#IDστοιχείου").doSomthing();

    // Επιλογή στοιχείου με css class
    $(".όνομαΚλάσσης").doSomthing();

    // Επιλογή στοιχείου με id όπου το id περιέχει ένα string
    $("[id*='τιμή']").doSomthing();

    // Επιλογή στοιχείου με id όπου το id αρχίζει με ένα string
    $("[id^='τιμή']").doSomthing();

    // Επιλογή στοιχείου με id όπου το id τελειώνει με ένα string
    $("[id$='τιμή']").doSomthing();

    // Επιλογή όλων των στοιχείων συγκεκριμένου τύπου
    $("div").doSomthing();
    $("p").doSomthing();
    $("form").doSomthing();

Οι συναρτήσεις Toggle, Show και Hide

    // Εμφάνιση/Απόκριψη ενός στοιχείου
    $("#IDστοιχείου").toggle(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Εμφάνιση/Απόκριψη ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").toggle(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // Απόκριψη ενός στοιχείου
    $("#IDστοιχείου").hide(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Απόκριψη ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").hide(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // Εμφάνιση ενός στοιχείου
    $("#IDστοιχείου").show(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Εμφάνιση ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").show(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

Συναρτήσεις slide

    // SlideUp/SlideDown ενός στοιχείου
    $("#IDστοιχείου").slideToggle(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // SlideUp/SlideDown ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").slideToggle(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // SlideUp ενός στοιχείου
    $("#IDστοιχείου").slideUp(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // SlideUp ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").slideUp(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // SlideDown ενός στοιχείου
    $("#IDστοιχείου").slideDown(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // SlideDown ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").slideDown(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

Συναρτήσεις fade

    // Fade in ενός στοιχείου
    $("#IDστοιχείου").fadeIn(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Fade in ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").fadeIn(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // Fade out ενός στοιχείου
    $("#IDστοιχείου").fadeOut(1000);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Fade out ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").fadeOut(
                                1000,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

    // Fade to ενός στοιχείου. Αυτό το effect κάνει fade μέχρι το ποσοστό που ορίζει ο χρήστης.
    $("#IDστοιχείου").fadeTo(1000, 0.25);                        // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect

    // Fade out ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").fadeTo(
                                1000,
                                0.25,
                                function()
                                {
                                    alert("To effect ολοκληρώθηκε");
                                }
                            );

Συναρτήσεις animation

    // Animation ενός στοιχείου
    $("#IDστοιχείου").animate(
        {
            opacity: 0.25                // Ιδιότητα CSS που θα γίνει animate
        },
        1000                               // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect
    );

    // Animation ενός στοιχείου και κάνε κάτι μετά την ολοκλήρωση του effect
    $("#IDστοιχείου").animate(
        {
            opacity: 0.25                // Ιδιότητα CSS που θα γίνει animate
        },
        1000,                              // Ο αριθμός 1000 είναι τα milliseconds που θα διαρκέσει το effect
        function()
        {
            alert("To effect ολοκληρώθηκε");
        }
    );

Δημιουργία/Κατάργηση κλάσσης CSS

    // Προσθήκη κλάσσης σε στοιχείο
    $("#IDστοιχείου").addClass('όνομαΚλασσης');

    // Κατάργηση κλάσσης σε στοιχείο
    $("#IDστοιχείου").removeClass('όνομαΚλασσης');

    // Κατάργηση κλάσσης και δημιουργία νέας σε στοιχείο
    $("#IDστοιχείου").removeClass('όνομαΚλασσης').addClass('όνομαΚλασσης');
    $("#IDστοιχείου").addClass('όνομαΚλασσης').removeClass('όνομαΚλασσης');

Ορισμός/ανάκτηση τιμών από πεδία κειμένου

    // Ανάκτηση τιμής από πεδίο κειμένου
    var textValue = $("#IDστοιχείου").val();

    // Ορισμός τιμής σε πεδίο κειμένου
    $("#IDστοιχείου").val('Τιμή πεδίου');

Ορισμός/ανάκτηση κώδικα HTML ενός στοιχείου

    // Ανάκτηση κώδικα HTML από στοιχείο
    var htmlValue = $("#IDστοιχείου").html();

    // Ορισμός κώδικα HTML σε στοιχείο
    $("#IDστοιχείου").html('

Τιμή πεδίου

');

Ορισμός/ανάκτηση κειμένου από στοιχείο

    // Ανάκτηση κειμένου από στοιχείο
    var textValue = $("#IDστοιχείου").text();

    // Ορισμός κειμένου σε στοιχείο
    $("#IDστοιχείου").text('Τιμή κειμένου');

Ορισμός/ανάκτηση των ιδιοτήτων width/height

    // Ανάκτηση της ιδιότητα height
    var elementHeight = $("#IDστοιχείου").height();

    // Ορισμός ύψους για ένα στοιχείο
    $("#IDστοιχείου").height(500);

    // Ανάκτηση της ιδιότητα width
    var elementWidth = $("#IDστοιχείου").width();

    // Ορισμός πλάτους για ένα στοιχείο
    $("#IDστοιχείου").width(500);

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php