Την περασμένη εβδομάδα, μίλησα για το πόσο σημαντικό είναι το jQuery για κάθε σύγχρονο προγραμματιστή ιστού και γιατί είναι φοβερό. Αυτή την εβδομάδα, νομίζω ότι ήρθε η ώρα να λερώσουμε τα χέρια μας με κάποιον κώδικα και να μάθουμε πώς να χρησιμοποιούμε πραγματικά το jQuery στα έργα μας.

Θα το πω τώρα - δεν χρειάζεται να μάθετε Javascript για να χρησιμοποιήσετε το jQuery. Probablyσως είναι καλύτερο αν σκεφτείτε το jQuery ως εξέλιξη του Javascript - ένας καλύτερος τρόπος για να το κάνετε - παρά απλώς μια βιβλιοθήκη που προσθέτει λειτουργικότητα. Οποιοδήποτε Javascript χρειάζεστε θα παραληφθεί καθ 'οδόν. Θεωρείται ωστόσο ότι ως προγραμματιστής Ιστού έχετε μια αρκετά καλή γνώση HTML και CSS (και εδώ είναι χρήσιμος δωρεάν οδηγός xHTML, αν όχι!).

---

---

Μοντέλο αντικειμένου εγγράφου

Το jQuery έχει να κάνει με το πέρασμα και το χειρισμό του ΚΡΙΣΗ - ο ρε έγγραφο Ή υποκείμενο Μ odel. Ο DOM είναι μια ιεραρχική αναπαράσταση δέντρου της σελίδας, που δημιουργήθηκε από προγράμματα περιήγησης μετά την ανάγνωση σε όλο τον κώδικα HTML. Στο jQuery, θα χρησιμοποιήσουμε ορολογία όπως μητρική εταιρεία , παιδιά , και αδέλφια αρκετά συχνά, οπότε θα πρέπει να έχετε μια ιδέα για το τι σημαίνει αυτό σε σχέση με το DOM.

Αυτό το απλό διάγραμμα απόw3schoolsεξηγεί αρκετά καλά τις έννοιες. Θα πρέπει να μπορείτε να δείτε ότι ο γονέας του στοιχείου είναι, ενώ το στοιχείο έχει μια άμεση

αμφιθαλής αδελφός.

Ξεκινώντας: Προσθήκη jQuery

Η τελευταία έκδοση του jQuery είναι περίπου 91KB όταν συμπιέζεται, επομένως προσθέτει περίπου το ίδιο βάρος σελίδας με μια μικρή φωτογραφία ή στιγμιότυπο οθόνης. Ο ευκολότερος τρόπος για να συμπεριλάβετε το jQuery στο έργο σας είναι να επικολλήσετε μια αναφορά στην πιο πρόσφατη φιλοξενούμενη έκδοση στην ενότητα κεφαλίδας του ιστότοπού σας:

Ωστόσο, σημειώστε ότι εάν χρησιμοποιείτε το Wordpress, αυτό μπορεί να προκαλέσει προβλήματα επειδή έχει ήδη το δικό του αντίγραφο της βιβλιοθήκης jQuery. Τα πρόσθετα μπορούν να ζητήσουν να φορτωθεί αυτό και το Wordpress θα φορτώσει έξυπνα μόνο το jQuery μία φορά, ανεξάρτητα από το πόσα πρόσθετα το έχουν ζητήσει.

Εάν προσθέσετε την ακόλουθη γραμμή στη δική σας functions.php αρχείο θέματος, θα προσθέσετε ένα άλλο αίτημα για να συμπεριληφθεί. Το Wordpress θα ξέρει ότι θα το φορτώνει πάντα εάν το θέμα σας είναι ενεργό.

---

---

πώς να δημιουργήσετε έναν λογαριασμό δικτύου playstation

wp_enqueue_script('jquery');

Το δεύτερο πράγμα που πρέπει να έχετε κατά νου είναι ότι όταν προστίθεται το jQuery χρησιμοποιώντας την τυπική μέθοδο, θα φορτωθεί ως $ Το Για οτιδήποτε κάνετε με το jQuery θα προηγείται αυτό το $, όπως:

$.ajax

ή

---

---

$('#header')

Ωστόσο, όταν το jQuery φορτώνεται μέσω του Wordpress, όλα γίνονται χρησιμοποιώντας τη μεταβλητή jQuery αντί για $, για παράδειγμα:

jQuery('#header')

Παρόλο που αυτό δεν είναι ένα τεράστιο πρόβλημα κατά τη συγγραφή του δικού σας κώδικα, σημαίνει ότι η κοπή και η επικόλληση αποσπασμάτων του jQuery που βρίσκετε στον ιστό θα πρέπει να μεταφραστεί για να χρησιμοποιήσετε το jQuery αντί για $ - αυτό είναι όλο.

Ένας τρόπος για να το κάνετε αυτό είναι να τυλίξετε τον κώδικα $ -style που βρίσκετε έτσι:

(function($) {
// paste $ code in here
})(jQuery);

Αυτό παίρνει το jQuery μεταβλητή και τη μεταφέρει σε ανώνυμη συνάρτηση ως $ Το Θα εξηγήσω ανώνυμες λειτουργίες την επόμενη φορά - προς το παρόν, ας μάθουμε τη βασική δομή ενός κώδικα jQuery.

Για να προσθέσετε τον κώδικά σας σε μια σελίδα HTML ή PHP, περικλείστε τα πάντα σε ετικέτες, όπως για παράδειγμα:


// jQuery code codes here


$ ('εκλέκτορας').μέθοδος()?

Αυτό ήταν, στον τίτλο εκεί πάνω. Αυτή είναι η βασική δομή ενός μεμονωμένου κώδικα jQuery για τον χειρισμό του DOM. Εύκολο, σωστά;

οεκλέκτοραςλέει στο jQuery να βρει πράγματα που ταιριάζουν με αυτόν τον κανόνα, και είναι το ίδιο με τους επιλογείς CSS (και στη συνέχεια μερικοί άλλοι στην κορυφή). Έτσι, όπως και στο CSS θα στυλ όλοι οι σύνδεσμοι με

a { }

Το ίδιο θα γινόταν στο jQuery όπως

$('a')

Αυτό μπορεί να γίνει για οποιαδήποτε στοιχεία HTML - div, h1, span - οτιδήποτε. Μπορείτε επίσης να χρησιμοποιήσετε κλάσεις CSS και αναγνωριστικά για να είστε πιο συγκεκριμένοι.

Για παράδειγμα, για να βρείτε όλους τους συνδέσμους με την κλάση 'findme', θα χρησιμοποιούσατε:

$('a.findme')

Δεν χρειάζεται να καθορίζετε τον τύπο του στοιχείου κάθε φορά - αλλά αν το κάνετε, απλώς καθιστά τον κανόνα πιο συγκεκριμένο. Θα μπορούσες να πεις

$('.findme')

που θα ταίριαζε όλα με την τάξη βρες με , είτε ήταν σύνδεσμος είτε όχι.

Για να χρησιμοποιήσετε ένα όνομα ονόματος, χρησιμοποιήστε το # υπογράψτε αντ 'αυτού. Η βασική διαφορά εδώ είναι ότι ένας επιλογέας ταυτότητας θα επιλέξει μόνο ένα αντικείμενο, ενώ ένας επιλογέας κλάσης μπορεί να βρει περισσότερα από ένα.

ποια είναι αυτή η πορτοκαλί κουκκίδα στο iphone μου

$('#something')

Βασικά, αν μπορείτε να κάνετε σε CSS, τότε θα το κάνει και το jQuery. Στην πραγματικότητα, μπορείτε επίσης να κάνετε μερικούς αρκετά περίπλοκους ψευδοεπιλέκτες στυλ CSS3 όπως: πρώτα

$('body p:first')

Που θα τραβήξει την παράγραφο της σελίδας. Μπορείτε επίσης να βρείτε στοιχεία με ορισμένα χαρακτηριστικά. Εξετάστε αυτό το παράδειγμα. θέλουμε να βρούμε όλους τους συνδέσμους στη σελίδα που δείχνουν εσωτερικά κάνουν χρήση του και να τα αναδείξει με κάποιο τρόπο. Δείτε πώς μπορούμε να τα βρούμε:

$('a[href*='makeuseof']')

Δεν είναι κουλ; Λοιπόν, νομίζω ότι είναι.

Η επόμενη θύρα κλήσης θα πρέπει να είναι η τεκμηρίωση jQuery API για επιλογείς Το Είναι μια τεράστια λίστα με όλα τα διαφορετικά είδη επιλογών που είναι διαθέσιμα για χρήση και κανείς δεν θα περίμενε ότι θα τα μάθετε όλα.

Το επόμενο μέρος της εξίσωσης είναιμέθοδος- τι να κάνετε με αυτά τα πράγματα μόλις τα βρείτε όλα - αλλά θα το αφήσουμε για το επόμενο μάθημα. Αν θέλετε να ξεκινήσετε να δοκιμάζετε διάφορους επιλογείς τώρα, σας προτείνω να ακολουθήσετε την ακόλουθη μέθοδο css. Αυτό απαιτεί δύο παραμέτρους - ένα CSS όνομα ιδιοκτησίας , και ένα καινούργιο αξία για εκχώρηση σε αυτήν την ιδιότητα. Έτσι, για να δώσετε σε όλους τους συνδέσμους ένα κόκκινο χρώμα φόντου, θα κάνατε:

$('a').css('background-color','red');

Αρκετά απλό! Αν και αυτό μπορεί να μην έχει πρακτική χρήση, θα σας επιτρέψει να δείτε εύκολα όλα τα στοιχεία που βρίσκονται χρησιμοποιώντας τους επιλογείς σας. Τώρα προχωρήστε και επιλέξτε - το DOM σας περιμένει.

Ελπίζω ότι αυτό το σεμινάριο ήταν χρήσιμο για εσάς. Προσπάθησα να το κάνω όσο πιο απλό γίνεται κατανοητό. Μη διστάσετε να κάνετε οποιεσδήποτε ερωτήσεις έχετε ή να αφήσετε σχόλια, αλλά να γνωρίζετε ότι σίγουρα δεν είμαι εκλεκτός ninja jQuery.

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 5 Συμβουλές για την υπερφόρτιση των μηχανών σας VirtualBox Linux

Έχετε κουραστεί από τις κακές επιδόσεις που προσφέρουν οι εικονικές μηχανές; Δείτε τι πρέπει να κάνετε για να αυξήσετε την απόδοση του VirtualBox.

Διαβάστε Επόμενο Σχετικά θέματα

• Πολιτισμός Ιστού
• Ανάπτυξη διαδικτύου
• JavaScript
• Προγραμματισμός
• jQuery

Σχετικά με τον Συγγραφέα Τζέιμς Μπρους(Δημοσιεύθηκαν 707 άρθρα)

Ο Τζέιμς έχει πτυχίο Τεχνητής Νοημοσύνης και έχει πιστοποίηση CompTIA A+ και Network+. Όταν δεν είναι απασχολημένος ως Hardware Reviews Editor, απολαμβάνει LEGO, VR και επιτραπέζια παιχνίδια. Πριν ενταχθεί στο MakeUseOf, ήταν τεχνικός φωτισμού, καθηγητής αγγλικών και μηχανικός κέντρου δεδομένων.

Περισσότερα από τον James Bruce

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή