Το jQuery μπορεί να επιλέξει οτιδήποτε μπορεί να επιλέξει το CSS3. Αλλά δεν σταματά εκεί! Υπάρχουν αρκετοί επιπλέον επιλογείς που προσφέρει το jQuery (μέσω της μηχανής επιλογής Sizzle) που μερικές φορές είναι πολύ χρήσιμοι. Για παράδειγμα, το CSS διαθέτει επιλογείς χαρακτηριστικών που σας επιτρέπουν να επιλέξετε ένα στοιχείο με βάση οποιοδήποτε αυθαίρετο χαρακτηριστικό που μπορεί να έχει το στοιχείο. Για παράδειγμα:
Υπάρχει ένας επιλογέας CSS που μπορούμε να χρησιμοποιήσουμε στο jQuery για να επιλέξουμε ότι:
$("(data-whatever='elephant-eyeballs')");Υπάρχουν παραλλαγές στον επιλογέα χαρακτηριστικών, όπως αντί να =μπορείτε να κάνετε ^=για να υποδείξετε "ξεκινά με αυτήν την τιμή". Αλλά για κάποιο λόγο, το CSS δεν έχει! = Ή "δεν ισούται με αυτήν την τιμή". Το jQuery κάνει! Αυτό είναι ένα παράδειγμα επέκτασης επιλογέα jQuery.
Υπάρχουν πολλές από αυτές τις επεκτάσεις επιλογής. Μερικά για τα οποία μιλάμε συγκεκριμένα σε αυτό το σενάριο:
- : eq () - μια έκδοση με ευρετήριο 0 του: nth-child ()
- : ζυγό - συντόμευση για: nth-παιδί (ζυγό)
- : gt (n) - επιλέξτε στοιχεία με μεγαλύτερο ευρετήριο από το n. Επίσης, μια συντόμευση για ένα πιο περίπλοκο: nth-child () forumla.
Πιθανώς η πιο χρήσιμη επέκταση επιλογής από όλα είναι: has () - που περιορίζει την επιλογή σε στοιχεία που περιέχουν αυτό που περνάτε αυτόν τον ψευδο επιλογέα (ή είναι ψευδο-ψευδο επιλογέας :) Είναι πιθανό κάποια μέρα στο μέλλον το CSS να έχει κάτι σαν αυτό για εμάς (νομίζω ότι θα είναι σαν pre ! code) αλλά αυτό είναι πολύ μακριά. Δυστυχώς, δεν κάνω ένα πολύ συναρπαστικό επιχείρημα για αυτό σε αυτό το σενάριο, αλλά θα ξέρετε πότε το χρειάζεστε! Για παράδειγμα "Επιλέξτε όλα τα .module που περιέχουν h3.sports-bar" - κάτι τέτοιο.
Μπορείτε επίσης να κάνετε τις δικές σας επεκτάσεις επιλογής, εάν το επιθυμείτε. Εδώ είναι ένα άρθρο για αυτό. Το παράδειγμα είναι να κάνετε το :inviewοποίο επιλέγει ένα στοιχείο μόνο εάν είναι ορατό στη σελίδα στην τρέχουσα θέση κύλισης. Θα ήταν έτσι:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));