Οι 10 δημοφιλέστερες συναρτήσεις για 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);

Ο Νίκος είναι ένας Web Developer που συνεχώς παρακολουθεί τις εξελίξεις και ενημερώνεται για τα νέα δεδομένα στο χώρο της κατασκευής διαδικτυακών εφαρμογών. Με εμπειρία που ξεπερνά τα 10 χρόνια, είναι ικανός να γράψει διαδικτυακές εφαρμογές σε PHP με τη βοήθεια του CakePHP, jQuery, CSS Blueprint Framework και άλλες τεχνολογίες που ευνοούν την ανάπτυξη την ταχύτατη ενημέρωση, αποσφαλμάτωση, επέκταση και συντήρηση του κώδικα. Πέρα όμως από την ανάπτυξη διαδικτυακών εφαρμογών είναι σε θέση να γράψει WordPress themes, plugins, widgets, shortcodes και να δημιουργήσει και Templates για phpBB. Τέλος, το γνωσιακό του επίπεδο δεν περιορίζεται σε γλώσσες προγραμματισμού, μοντέλα δεδομένων και τεχνικές ανάπτυξης. Ο Νίκος έχει γνώσεις επιτάχυνσης ιστοσελίδων, regular expressions χρήση των mod_rewrites σε βάθος κ.α.

Νίκος Μέριανος

H Ιστοσελίδα μου

Ακολουθήστε με στο Twitter

HTML5 & HTML 4+ - Όλες οι ετικέτες

11 February 2012

Σήμερα άρχισα να κάνω μια σύντομη σύγκριση των ετικετών της HTML 4+ με τις ετικέτες της HTML5 έτσι ώστε να μπορέσω να δω ποιες είναι οι διαφορές[...]

Συνέχεια...

Τι είναι το Cloud Hosting

28 January 2012

Μπορεί να το γνωρίζεται, μπορεί και όχι, αλλά ήδη πολλοί από εμάς σε καθημερινή βάση χρησιμοποιούμε το cloud hosting. Αν για παράδειγμα χρησιμοποιείτε[...]

Συνέχεια...

6 JavaScript Grid Plugins

30 April 2011

Οι πίνακες είναι ο καλύτερος τρόπος για να προβάλετε δεδομένα. Πάρτε ως παράδειγμα το Microsoft Excel, στο οποίο μπορούμε να ταξινομήσουμε,[...]

Συνέχεια...

Σχόλια

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

Αφήστε ένα σχόλιο

RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL