Γιατί χρειαζόμαστε και πώς να καταγράφει JQuery επιλογέα;

Σύγχρονη web designer, δεν πρέπει μόνο να κυριαρχήσει τα βασικά της HTML, η CSS και JavaScript, αλλά και να είναι σε θέση να εργαστούν στη βιβλιοθήκη JQuery, η οποία επικεντρώνεται στην αλληλεπίδραση της JavaScript με HTML-έγγραφα. Αυτό επιτρέπει τη γρήγορη πρόσβαση σε κάθε στοιχείο DOM (διεπαφή προγραμματισμού εφαρμογών που παρέχει πρόσβαση στο περιεχόμενο html-αρχεία) και να τα διαχειριστούμε. Οι κύριες δομικές μονάδες της βιβλιοθήκης είναι η ομάδα. Για να εφαρμόσετε ένα ή την άλλη ομάδα, θα πρέπει να έχετε ένα JQuery επιλογέα.

Φόρμουλα επιλογείς στη βιβλιοθήκη JQuery

Οι επιλογείς στο JQuery με βάση την χρήση CSS. Καλούνται να επιλέξετε στοιχεία HTML αρχείο, να τα χρησιμοποιήσει για να προκαλέσει τις ίδιες ή άλλες μεθόδους χειρισμού τους (η ομάδα). Αναζήτηση πραγματοποιείται μέσω της λειτουργίας επιλογέα $ (). Για παράδειγμα, $ ( 'div').

Οι επιλογείς μπορούν να ταξινομηθούν ανάλογα με το πώς την επιλογή των στοιχείων:

• βασικά?
• με χαρακτηριστικό?
• η ιεραρχία?
• περιεχόμενο?
• σχετικά με την κατάσταση?
• επιλογή των πεδίων της φόρμας?
• τους άλλους.

Βασικά επιλογείς

Στο 90% των περιπτώσεων κατά τη χρήση αυτή η βιβλιοθήκη χρησιμοποιείται JQuery-επιλογέα που ανήκουν στην κύρια ομάδα. Όλοι τους είναι αρκετά απλή και σαφής. Ας εξετάσουμε κάθε ένα από αυτά:

• * - επιλέγει όλα τα στοιχεία της σελίδας, συμπεριλαμβανομένου του κεφαλιού, του σώματος, κλπ?.
• p / div / sidebar / ... - επιλέγει όλα τα στοιχεία που αφορούν την προκαθορισμένη ετικέτα (δηλαδή να p.div, sidebar, κλπ ...)?
• .myClass / p.myClass - επιλέγει τα στοιχεία με το καθορισμένο όνομα κλάσης?
• # MyID / p # MyID -. Επιλέγει κάθε ένα στοιχείο με το συγκεκριμένο αναγνωριστικό.

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

αποδίδουν επιλογείς

Μπορείτε να χρησιμοποιήσετε το JQuery κύριο επιλογέα, αν πρέπει να επιλέξετε ένα στοιχείο που ανήκει σε οποιαδήποτε τάξη με ID ή να επιλέξετε όλα τα στοιχεία της σελίδας. Ωστόσο, υπάρχουν περιπτώσεις όταν ένα αντικείμενο δεν έχει καμία τάξη ή ταυτότητας. Είναι γι 'αυτό και υπάρχουν επιλογές από την ιδιότητα. Θα σας επιτρέψει να κάνετε μια επιλογή σε κάποιο χαρακτηριστικό του HTML στοιχεία, όπως href ή src. Αυτό το χαρακτηριστικό είναι γραμμένο σε αγκύλες [].

Το πιο απλό παράδειγμα: $ ([προέλευση]) - επιλέγει όλα τα στοιχεία που έχουν χαρακτηριστικό src. Είναι δυνατόν να μειωθεί το δείγμα με τον προσδιορισμό ορισμένων τιμή του χαρακτηριστικού: $ ([src = 'http: // ιστοσελίδα / άρθρο / 132222 / αξία']).

Μπορείτε να χρησιμοποιήσετε κάποια επιλογείς JQuery, αν θέλετε να περιορίσετε το πεδίο επιλογής. Για παράδειγμα, $ (ρ [color = blue] [size = 12]) - επιλέγονται μόνο εκείνα τα στοιχεία ρ, τα οποία έχουν ένα μπλε χρώμα και μέγεθος 12.

περιεχόμενο επιλογείς

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

• : Περιέχει - επιλέγει αντικείμενα που περιέχουν το συγκεκριμένο κείμενο?
• : Έχει - επιλέγει στοιχεία που περιέχουν και άλλα στοιχεία χαρακτηριστικά της γραμμής?
• : Μητρική - επιλέγει στοιχεία που περιέχουν οποιοδήποτε άλλο?
• : Αδειάστε - επιλέγει στοιχεία που δεν περιέχει κανένα άλλο.

Εδώ είναι ένα παράδειγμα. Για να επιλέξετε όλα τα στοιχεία div, που περιέχει το κείμενο του Γεια σας, πρέπει να γράψετε $ (div: περιέχει ( «Hello»)).

επιλογείς ιεραρχία

Υπάρχει ένας άλλος τρόπος για να επιλέξετε στοιχεία στην JQuery, δηλαδή - σύμφωνα με την ιεραρχία τους (δηλαδή, ο λόγος του άλλου στην HTML σελίδα). Πολλοί από αυτούς, έτσι ώστε να παρουσιάσει δύο από τα πιο δημοφιλή, «παιδί» και «απόγονος».

Στην πρώτη περίπτωση επιλέγονται τα στοιχεία, τα οποία είναι απευθείας απόγονοι (παιδιά) ενός δεδομένου στοιχείου (πρόγονος). Για παράδειγμα, για να επιλέξετε τα στοιχεία της λίστας υπό το φως της κατηγορίας που είναι ένας κατάλογος παιδί πλοήγησης, τότε θα πρέπει να γράφετε: $ (ul # nav> li.light).

Η δεύτερη περίπτωση - μια πιο γενική. Δεν μπορεί να επιλεγεί και έμμεσες απόγονοι του στοιχείου. Για παράδειγμα, για να επιλέξετε τις συνδέσεις στη λίστα nav προβλέπουν: $ (ul # nav α).

Έτσι, σε JQuery στοιχεία μπορούν να επιλεγούν κατά διάφορους τρόπους με τη χρησιμοποίηση παραμέτρων όπως μια κατηγορία, ID, χαρακτηριστικά, περιεχόμενο ή ιεραρχία των στοιχείων HTML έγγραφο.