Τρόπος χρήσης των επιλογών jQuery Selectors και CSS, καθώς και τα βασικά στοιχεία του τρόπου λειτουργίας τους

Τις προάλλες, πήρα συνέντευξη από κάποιον που είχε ολοκληρώσει την πιστοποίηση front-end του freeCodeCamp. Είχε επίσης αποφοιτήσει από ένα αρκετά διάσημο bootcamp, όπου οι συμμετέχοντες κωδικοποίησαν από τις 8πμ έως τις 8μμ για έξι εβδομάδες συνεχόμενα. Ναι!

Η ικανότητα προγραμματισμού του ήταν μεγάλη, αλλά με εξέπληξε το γεγονός ότι έλειπε η γνώση του στο CSS. Και ελλείψει, εννοώ ότι δεν ήξερε πώς να επιλέξει μια τάξη για να εφαρμόσει ένα στυλ. Αυτό δεν αντανακλά απαραίτητα αρνητικά σε αυτόν. Αν μη τι άλλο, επισημαίνει πώς πολλοί προγραμματιστές βλέπουν το CSS.

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

Για παράδειγμα, η πλατφόρμα κινουμένων σχεδίων Green Sock (GSAP) είναι πιθανότατα πολύ προγραμματισμένη για να είναι επικεντρωμένη στο σχεδιασμό. Απαιτεί προγραμματιστή με γνώσεις CSS καθώς και προγραμματισμό.

Δεν λέω ότι κάθε προγραμματιστής πρέπει να είναι κύριος CSS. Αλλά νομίζω ότι αν πρόκειται να ονομαστείτε ως προγραμματιστής πλήρους στοίβας, θα πρέπει να γνωρίζετε τα βασικά του CSS. Και τα βασικά ξεκινούν με τον επιλογέα .

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

Ο επιλογέας CSS

Πάντα βρίσκω χρήσιμο να παίζω με κώδικα, οπότε εδώ είναι ένα απλό CodePen για να παίζεις με βασικούς επιλογείς.

Στο HTML, υπάρχουν τρεις τρόποι για την επισήμανση ή την κατηγοριοποίηση στοιχείων. Ο πρώτος τρόπος είναι ο ευρύτερος: με όνομα ετικέτας. Για παράδειγμα, μπορείτε να επιλέξετε όλαdiv τα στη σελίδα σας χρησιμοποιώντας τον απλό επιλογέα div. Γεια, αυτό ήταν εύκολο!

Ο δεύτερος τρόπος είναι πιθανώς αυτός που θα χρησιμοποιήσετε περισσότερο: το classχαρακτηριστικό. Μπορείτε να επιλέξετε ανά τάξη χρησιμοποιώντας μια τελεία ( .), έτσι στο παραπάνω παράδειγμα, για να επιλέξετε όλαστοιχεία με την τάξη sectionI που χρησιμοποιώ .sectionως επιλογέας.

Ο τρίτος τρόπος συχνά χρησιμοποιείται υπερβολικά, αλλά εξακολουθεί να είναι χρήσιμος, και αυτό είναι το idχαρακτηριστικό. Τα αναγνωριστικά πρέπει να προσδιορίζουν τα στοιχεία σας, όπως το SSN σας (στις ΗΠΑ) μπορεί να σας αναγνωρίσει ως άτομο. Αυτό σημαίνει ότι τα αναγνωριστικά πρέπει να είναι μοναδικά σε ολόκληρη τη σελίδα. Για να επιλέξετε ένα στοιχείο με συγκεκριμένο αναγνωριστικό, χρησιμοποιείτε το hashtag ( #) ή το octothorpe όπως θέλω να το ονομάσω. Για να επιλέξετε το στοιχείο με το αναγνωριστικό otherπου χρησιμοποιώ #other.

Αυτοί είναι οι πιο βασικοί επιλογείς. Για να ανακεφαλαιώσουμε:

  • επιλέξτε με όνομα ετικέτας (χωρίς πρόθεμα)
  • επιλέξτε κατά όνομα κλάσης (πρόθεμα .)
  • επιλέξτε με αναγνωριστικό (πρόθεμα #)

Αυτοί οι τρεις επιλογείς και μόνο θα σας επιτρέψουν να επιλέξετε σχεδόν οτιδήποτε στην ιστοσελίδα σας.

Κουίζ 1

  1. Πώς θα επιλέγατε όλες τις ετικέτες παραγράφου στη σελίδα; (υπόδειξη: οι ετικέτες παραγράφων είναι p)
  2. Πώς θα επιλέγατε όλα τα είδη με κατηγορία button-text;
  3. Πώς θα επιλέγατε το στοιχείο με αναγνωριστικό form-userinput;

Μη διστάσετε να μοιραστείτε τις απαντήσεις σας στα σχόλια!

Πρέπει όλα τα αναγνωριστικά να είναι μοναδικά;

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

Με ένα όνομα όπως το αναγνωριστικό, θα υποθέσετε ότι κάθε αναγνωριστικό HTML πρέπει να είναι μοναδικό, διαφορετικά το έγγραφο HTML δεν θα λειτουργεί. Σε τελική ανάλυση, η προσπάθεια να έχουμε δύο constμεταβλητές θα σας κάνει να σας φωνάζουν πολλοί συντάκτες, οπότε δεν θα φωνάξει και η HTML;

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

Το παραπάνω παράδειγμα δείχνει γιατί η ύπαρξη διπλότυπων αναγνωριστικών ενδέχεται να προκαλέσει πρόβλημα στην ιστοσελίδα σας. Πρώτον, υπάρχουν στην πραγματικότητα δύο divs με το ID other. Εάν σχολιάζετε τα στυλ για #other, θα δείτε ότι και τα δύο στοιχεία έχουν στυλ. Αυτό μπορεί να σας κάνει να σκεφτείτε, "καλά, μπορώ να χρησιμοποιήσω εναλλακτικά αναγνωριστικά και ονόματα τάξεων!"

Οχι τόσο γρήγορα. Αν κοιτάξετε στον πίνακα JavaScript, θα δείτε ότι επέλεξα συγκεκριμένα στοιχεία με βάση την ετικέτα στοιχείων τους: όνομα ετικέτας, όνομα τάξης ή αναγνωριστικό. Θα το παρατηρήσετε document.getElementsByTagNameκαι θα document.getElementsByClassNameεπιστρέψετε μια συλλογή όλων των στοιχείων HTML που ταιριάζουν. document.getElementByIdεπιστρέφει μόνο το πρώτο στοιχείο HTML που μπορεί να βρει με το αντίστοιχο αναγνωριστικό. Μπορείτε να το επαληθεύσετε αποσυσκευάζοντας τη getVanillaSelectorsλειτουργία και ελέγχοντας την κονσόλα.

Για να περιπλέξετε περαιτέρω τα πράγματα, εάν χρησιμοποιείτε τη querySelectorAllμέθοδο JavaScript (η οποία παίρνει έναν επιλογέα CSS ως εισαγωγή), θα έχετε ένα εντελώς διαφορετικό αποτέλεσμα.

Και για να σας ταιριάζει, το jQuery κάνει κάτι διαφορετικό παρά το ότι έχει παρόμοια σύνταξη querySelectorAll.

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

  1. Ποτέ μην χρησιμοποιείτε αναγνωριστικά. Χρησιμοποιήστε τα classχαρακτηριστικά.
  2. Εάν πρέπει να χρησιμοποιήσω ένα αναγνωριστικό, ονομάστε το χώρο έτσι ώστε να είναι μοναδικό ακόμα και αν υπάρχει παρόμοιο στοιχείο στη σελίδα. για παράδειγμαmenu-item-01

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

Με αυτόν τον τρόπο, εάν έχω δύο φόρμες στην ίδια σελίδα (ας πούμε user-signupκαι user-signin), είναι εγγυημένη ότι έχουν μοναδικά αναγνωριστικά. Ακόμα κι αν τα πεδία userID είναι παρόμοια μεταξύ των φορμών.

Συνδυασμός επιλογών

Μερικές φορές ένας μόνο επιλογέας δεν θα το κόψει. Μερικές φορές, πρέπει να πάρετε ό, divτι έχει όνομα τάξης section. Άλλες φορές, χρειάζεστε κάθε στοιχείο με όνομα κλάσης sectionπου είναι ένα θυγατρικό στοιχείο σε ένα divμε αναγνωριστικό user-signup. Υπάρχουν πολλοί πιθανοί συνδυασμοί επιλογών.

Σε αυτήν την ενότητα, θα μάθετε τρεις τρόπους συνδυασμού επιλογών και είμαι βέβαιος ότι αυτοί θα ταιριάζουν στο 90% των αναγκών σας. Εάν διαπιστώσετε ότι περισσότερο από το 11% των αναγκών σας δεν έχουν εκπληρωθεί, ελάτε να διαμαρτυρηθείτε και θα το επεξεργαστώ για να πω ότι το 89% των αναγκών σας :)

Όπως και πριν, ας ξεκινήσουμε με ένα CodePen:

Συνδυασμός επιλογών για ένα μόνο στοιχείο

Εντάξει, πρώτα ας καλύψουμε το συνδυασμό επιλογών για ένα μόνο στοιχείο. Αυτό σημαίνει την επιλογή του στοιχείου που έχει όνομα ετικέτας x, AND όνομα κλάσης y, AND ID του z. Φυσικά, δεν χρειάζεστε και τα τρία, αλλά μπορείτε να συνδυάσετε και τα τρία.

Ας πούμε ότι θέλουμε να επιλέξουμε όλα divμε κατηγορία item. Για να γίνει αυτό, συνδυάζουμε τα δύο: div.item. Πηγαίνει από το πιο γενικό στο πιο συγκεκριμένο από αριστερά προς τα δεξιά. Αυτό επιλέγει όλες τις divετικέτες που ΕΠΙΣΗΣ έχουν το όνομα της τάξης item. Είναι σημαντικό να σημειωθεί ότι δεν υπάρχει κενό μεταξύ divκαι .item. Η προσθήκη ενός διαστήματος αλλάζει εντελώς τον επιλογέα , καθώς θα προχωρήσω στην επόμενη ενότητα.

Εάν αποσυνδέσετε το αντίστοιχο CSS, θα δείτε ότι το sectionόνομα κλάσης του itemδεν έγινε κόκκινο. Αυτό συμβαίνει επειδή δεν είναι divετικέτα.

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

Όμως, μόνο για την ισοτιμία, εδώ είναι ένα παράδειγμα της επιλογής του divμε την κατηγορία της itemκαι την ταυτότητα του other: div.item#other. Και πάλι, πηγαίνοντας από αριστερά προς τα δεξιά, πηγαίνει πιο γενικό σε πιο συγκεκριμένο.

Πιθανότατα θα χρησιμοποιήσετε αυτήν τη σύνταξη για να επιλέξετε ένα στοιχείο που έχει πολλές κατηγορίες. Για να το κάνετε αυτό, διαχωρίστε όλες τις τάξεις με τελείες. Για να επιλέξετε όλα τα στοιχεία που έχουν ΔΥΟ τάξεις itemκαι section, θα χρησιμοποιούσατε .item.section. Η παραγγελία δεν έχει σημασία όταν το κάνετε με αυτόν τον τρόπο, έτσι .section.itemθα λειτουργήσει επίσης.

Αυτό το ένα τέχνασμα θα σας επιτρέψει να είστε πιο συγκεκριμένοι στους επιλογείς σας.

Ο επιλογέας «παιδί»

Ο δεύτερος τρόπος με τον οποίο μπορείτε να συνδυάσετε τους επιλογείς είναι χρησιμοποιώντας τον επιλογέα «παιδί», όπως θέλω να το ονομάσω. Υπάρχουν δύο τρόποι για να το κάνετε αυτό, οπότε θα ξεκινήσω με τον πιο γενικό.

Αρχικά, μπορείτε να επιλέξετε οποιοδήποτε παιδί συγκεκριμένου στοιχείου προσθέτοντας κενό. Για παράδειγμα, για να επιλέξετε όλα τα παιδιά itemτου #otherστοιχείου, θα ήταν #other .item. Παρατηρήστε το κενό μεταξύ των επιλογών.

Δεύτερον, μπορείτε να επιλέξετε άμεσα παιδιά ενός συγκεκριμένου στοιχείου χρησιμοποιώντας το &gt ;. Ένα "άμεσο παιδί" ενός στοιχείου είναι ένα βάθος μόνο ενός επιπέδου. Στο παράδειγμα, υπάρχουν t wo .iστοιχεία tem που περιέχονται στο t he #otστοιχείο της, αλλά ένα από τ he .iστοιχεία tem είναι τυλιγμένη σε a .wrapκάθε στοιχείο, έτσι ώστε η μία είναι δεν αποτελεί άμεση παιδί.

Για να σας δώσουμε μια εικόνα, αν καταρρεύσετε τα πάντα κάτω από το #otherστοιχείο, θα δείτε αυτό:

Αυτά τα δύο είναι τα μόνα άμεσα παιδιά του #otherστοιχείου. Για να επιλέξετε μόνο το άμεσο θυγατρικό .itemτου #other, θα χρησιμοποιούσατε #other > .item, το οποίο θα επέλεγε το άμεσο θυγατρικό, αλλά όχι αυτό που υπονέα th .wrap. Νίφτι, ε;

Κουίζ 2

  1. Πώς θα επιλέγατε όλες τις ετικέτες παραγράφων που ανήκουν σε sectionστοιχεία; (υπόδειξη: οι ετικέτες παραγράφων είναι p)
  2. Πώς θα επιλέγατε όλα τα στοιχεία με κλάση button-text, που είναι απόγονοι σε αντικείμενα με κλάση button;
  3. Πώς θα επιλέξετε το στοιχείο με την κατηγορία του form-inputότι είναι ένα άμεσο παιδί του formστοιχεία;
  4. Ερώτηση μπόνους : εξηγήστε τι επιλέγει αυτός ο επιλογέας: header.title > form.user-signup button.button-danger

Όπως πριν, μη διστάσετε να μοιραστείτε τις απαντήσεις σας στα σχόλια!

Συνδυάζοντας τα όλα - κυριολεκτικά

Μπορείτε να συνδυάσετε συνδυασμένους επιλογείς. Πραγματικά. Η παραπάνω ερώτηση μπόνους δείχνει ένα παράδειγμα αυτού, αλλά έχω προσθέσει ορισμένους συνδυασμούς στο τέλος του παραδείγματος κωδικού.

Για παράδειγμα, μπορείτε να επιλέξετε όλα .itemτα παιδιά divμε τάξη parent-itemχρησιμοποιώντας div.parent-item .item. Ω!

Μπορείτε επίσης να επιλέξετε άμεσους απογόνους. Για παράδειγμα, για να επιλέξετε όλα τα divs με κλάση itemπου είναι άμεσοι απόγονοι σε divs με κλάση parent-item: div.parent-item > div.item.

Και τέλος, απλά για να το χάος με σας, μπορείτε να περπατήσετε προς τα κάτω ολόκληρο το δέντρο DOM: div.parent-item .coolest-item .item. itemτάξη που είναι παιδί σε coolest-itemτάξη που είναι παιδί divμε τάξη parent-item.

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

Μπόνους: Χρησιμοποιώντας τα Chrome DevTools για να αποκτήσετε έναν επιλογέα

Μπορείτε να χρησιμοποιήσετε το Chrome DevTools για να αποκτήσετε τον επιλογέα οποιουδήποτε στοιχείου μπορείτε να επιλέξετε στο DOM. Δείτε πώς:

  1. Ανοίξτε τα Chrome DevTools. Εφόσον επιλέγετε ένα στοιχείο, προχωρήστε και κάντε δεξί κλικ στο στοιχείο που θέλετε να επιλέξετε και κάντε κλικ στο "Επιθεώρηση":

2. Κάντε δεξί κλικ στο στοιχείο DOM που θέλετε να επιλέξετε και τοποθετήστε το δείκτη του ποντικιού πάνω από το "Αντιγραφή" και, στη συνέχεια, κάντε κλικ στο "Επιλογέας αντιγραφής:"

3. Αυτό είναι! Ο επιλογέας που αντιγράψαμε, παρεμπιπτόντως, είναι #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailingεπιλεγμένος. Μπορείτε να αντιγράψετε το se lector into document.querySelector ή το jQuery και να λάβετε το στοιχείο.

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