Επεξήγηση επιλογών jQuery: Επιλογείς τάξης, επιλογείς ταυτότητας και άλλα

Επιλογείς jQuery

Το jQuery χρησιμοποιεί επιλογείς τύπου CSS για να επιλέξει τμήματα ή στοιχεία μιας σελίδας HTML. Στη συνέχεια, σας επιτρέπει να κάνετε κάτι με τα στοιχεία χρησιμοποιώντας μεθόδους ή συναρτήσεις jQuery.

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

Στο jQuery, οι επιλογείς τάξης και ταυτότητας είναι όπως εκείνοι στο CSS Ας ρίξουμε μια γρήγορη ανασκόπηση αυτού πριν συνεχίσουμε.

Επιλογέας ταυτότητας σε CSS

Ο επιλογέας αναγνωριστικού CSS εφαρμόζει στυλ σε ένα συγκεκριμένο στοιχείο html. Ο επιλογέας αναγνωριστικού CSS πρέπει να ταιριάζει με το χαρακτηριστικό ID ενός στοιχείου HTML. Σε αντίθεση με τα μαθήματα, τα οποία μπορούν να εφαρμοστούν σε πολλά στοιχεία σε έναν ιστότοπο, ένα συγκεκριμένο αναγνωριστικό μπορεί να εφαρμοστεί μόνο σε ένα μεμονωμένο στοιχείο σε έναν ιστότοπο. Το CSS ID θα αντικαταστήσει τις ιδιότητες της κατηγορίας CSS Για να επιλέξετε ένα στοιχείο με συγκεκριμένο αναγνωριστικό, γράψτε έναν χαρακτήρα κατακερματισμού (#), ακολουθούμενο από το αναγνωριστικό του στοιχείου.

Σύνταξη

#specified_id { /* styles */ }

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

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

Σημείωση σχετικά με τα αναγνωριστικά

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

Θυμηθείτε, ο επιλογέας αναγνωριστικών πρέπει να ταιριάζει με το χαρακτηριστικό ID ενός στοιχείου HTML.

Ειδικότητα

Οι επιλογείς ταυτότητας έχουν υψηλή ειδικότητα καθιστώντας τους δύσκολο να παρακάμψουν Τα μαθήματα έχουν πολύ χαμηλότερη ειδικότητα και είναι γενικά ο προτιμώμενος τρόπος για να διαμορφώσετε στοιχεία για να αποφύγετε ζητήματα εξειδίκευσης.

Ακολουθεί ένα παράδειγμα μιας μεθόδου jQuery που επιλέγει όλα τα στοιχεία παραγράφου και προσθέτει μια κατηγορία "επιλεγμένων" σε αυτά:

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

Εντάξει, επιστροφή στο jQuery

Στο jQuery, οι επιλογείς τάξης και ταυτότητας είναι οι ίδιοι όπως στο CSS. Εάν θέλετε να επιλέξετε στοιχεία με μια συγκεκριμένη κλάση, χρησιμοποιήστε μια τελεία ( .) και το όνομα της τάξης. Εάν θέλετε να επιλέξετε στοιχεία με συγκεκριμένο αναγνωριστικό, χρησιμοποιήστε το σύμβολο κατακερματισμού ( #) και το όνομα ταυτότητας. Λάβετε υπόψη ότι το HTML δεν είναι πεζά, επομένως είναι βέλτιστη πρακτική να διατηρείτε πεζά τις επιλογές σήμανσης HTML και CSS.

Επιλογή κατά τάξη:

Paragraph with a class.

$(".p-with-class").css("color", "blue"); // colors the text blue

Επιλογή κατά αναγνωριστικό:

  • List item with an ID.
  • $("#li-with-id").replaceWith("

    Socks

    ");

    Μπορείτε επίσης να επιλέξετε ορισμένα στοιχεία μαζί με τις τάξεις και τα αναγνωριστικά τους:

    Επιλογή κατά τάξη

    Εάν θέλετε να επιλέξετε στοιχεία με μια συγκεκριμένη κλάση, χρησιμοποιήστε μια τελεία (.) Και το όνομα της τάξης.

    Paragraph with a class.

    $(".pWithClass").css("color", "blue"); // colors the text blue

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

    
        
      My Wish List
    `

    $("ul.wishList").append("
  • New blender
  • ");

    Επιλογή κατά αναγνωριστικό

    Αν θέλετε να επιλέξετε στοιχεία με συγκεκριμένη τιμή ID, χρησιμοποιήστε το σύμβολο κατακερματισμού (#) και το όνομα ID.

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

    Όπως και με τον επιλογέα τάξης, αυτό μπορεί επίσης να χρησιμοποιηθεί σε συνδυασμό με ένα όνομα ετικέτας.

    News Headline

    $("h1#headline").css("font-size", "2em");

    Επιλογείς που λειτουργούν ως φίλτρα

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

  • στοιχείο στη λίστα - το στοιχείο λίστας "Ένα" - και στη συνέχεια χρησιμοποιεί τη .cssμέθοδο για να μετατρέψει το κείμενο σε πράσινο.

    
         
    • One
    • Two
    • Three
    $("li:first").css("color", "green");

    Σημείωση: Μην ξεχνάτε ότι η εφαρμογή css σε JavaScript δεν είναι καλή πρακτική. Πρέπει πάντα να δίνετε τα στυλ σας σε αρχεία css.

    Ένας άλλος επιλογέας φιλτραρίσματος :contains(text), επιλέγει στοιχεία που έχουν συγκεκριμένο κείμενο. Τοποθετήστε το κείμενο που θέλετε να αντιστοιχίσετε στις παρενθέσεις. Ακολουθεί ένα παράδειγμα με δύο παραγράφους. Ο επιλογέας jQuery παίρνει τη λέξη «Moto» και αλλάζει το χρώμα του σε κίτρινο.

    Hello

    World

    $("p:contains('World')").css("color", "yellow");

    Ομοίως, ο :lastεπιλογέας επιλέγει το στοιχείο που είναι το τελευταίο παιδί του γονέα του. Ο παρακάτω επιλογέας JQuery επιλέγει τον τελευταίο

  • στοιχείο στη λίστα - το στοιχείο λίστας "Three" - και στη συνέχεια χρησιμοποιεί τη .cssμέθοδο για να γίνει το κείμενο κίτρινο.

    $("li:last").css("color", "yellow");

    Σημείωση: Στον επιλογέα jQuery,Worldβρίσκεται σε εισαγωγικά επειδή βρίσκεται ήδη μέσα σε ένα ζευγάρι διπλών εισαγωγικών. Χρησιμοποιείτε πάντα μεμονωμένα εισαγωγικά μέσα σε διπλά εισαγωγικά για να αποφύγετε ακούσια τερματισμό μιας συμβολοσειράς.

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

    $("#cat,#dog,#rat").css("background-color","red");

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

    Περισσότερες πληροφορίες:

    • Πλήρης κατάλογος επιλογών jQuery