Μάθετε πώς να δημιουργήσετε ένα στοιχείο στο jQuery

Η δημιουργία ενός νέου στοιχείου είναι μία από τις πιο βασικές εργασίες που μπορείτε να ολοκληρώσετε με τη βιβλιοθήκη jQuery JavaScript. Χρησιμοποιώντας το jQuery, η εργασία είναι πολύ απλούστερη από την αντίστοιχη προσέγγιση με το Μοντέλο αντικειμένου εγγράφου (DOM). Θα το βρείτε επίσης πιο ευέλικτο και εκφραστικό, όσο περισσότερο χρησιμοποιείτε το jQuery.

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

Τι είναι το jQuery;

Η βιβλιοθήκη jQuery είναι μια συλλογή από JavaScript κώδικα με δύο βασικούς στόχους:

Απλοποιεί τις κοινές λειτουργίες JavaScript.
Αντιμετωπίζει ζητήματα JavaScript πολλαπλής συμβατότητας μεταξύ διαφόρων προγραμμάτων περιήγησης.

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

Τι είναι ένα στοιχείο;

Μερικές φορές ένα στοιχείο αναφέρεται ως ετικέτα. Αν και τα δύο χρησιμοποιούνται συχνά εναλλακτικά, υπάρχει μια λεπτή διαφορά. Μια ετικέτα αναφέρεται στην κυριολεκτική

συμπεριλαμβάνετε σε ένα αρχείο HTML για σήμανση του περιεχομένου κειμένου. Ένα στοιχείο είναι το αντικείμενο πίσω από τις σκηνές που αντιπροσωπεύει το επισημασμένο κείμενο. Σκεφτείτε ένα στοιχείο ως το αντίστοιχο DOM των ετικετών HTML.

Πώς να δημιουργήσετε ένα νέο στοιχείο χρησιμοποιώντας το jQuery

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

Αντιστοιχίζει στοιχεία, συνήθως αυτά που υπάρχουν ήδη στο έγγραφο
Δημιουργεί νέα στοιχεία
Εκτελεί μια λειτουργία επανάκλησης όταν το DOM είναι έτοιμο

Όταν περνάτε μια συμβολοσειρά που περιέχει HTML ως πρώτη παράμετρο, αυτή η συνάρτηση θα δημιουργήσει ένα νέο στοιχείο:

$(' ')

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

πού να αγοράσω σκυλιά κοντά μου

Η συμβολοσειρά πρέπει να μοιάζει με HTML για να διακρίνει αυτήν την ενέργεια από τα στοιχεία που ταιριάζουν. Στην πράξη, αυτό σημαίνει ότι η συμβολοσειρά πρέπει να ξεκινά με a < Το Δεν μπορείτε να προσθέσετε απλό κείμενο στο έγγραφο χρησιμοποιώντας αυτήν τη μέθοδο.

Είναι σημαντικό να καταλάβετε ότι αυτό δεν προσθέτει το στοιχείο στο έγγραφό σας, δημιουργεί μόνο ένα νέο στοιχείο έτοιμο για προσθήκη. Το στοιχείο είναι «μη συνδεδεμένο», καταλαμβάνει μνήμη, αλλά δεν είναι στην πραγματικότητα μέρος της τελικής σελίδας — ακόμη.

Προσθήκη περισσότερης σύνθετης HTML

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

$('one
two
three
')

Μπορείτε επίσης να χρησιμοποιήσετε αυτήν τη μορφή για να δημιουργήσετε ένα στοιχείο με χαρακτηριστικά:

$(' ')

Πώς να ορίσετε χαρακτηριστικά σε ένα νέο στοιχείο

Μπορείτε να δημιουργήσετε ένα νέο στοιχείο jQuery και να ορίσετε τα χαρακτηριστικά του χωρίς να χρειάζεται να δημιουργήσετε μόνοι σας την πλήρη συμβολοσειρά HTML. Αυτό είναι χρήσιμο εάν δημιουργείτε δυναμικά τιμές χαρακτηριστικών. Για παράδειγμα:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';  
$(' ', { src: photo });

Πώς να προσθέσετε ένα στοιχείο

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

Προσθήκη ως παιδί ενός υπάρχοντος στοιχείου

$('body').append($('Hello, world
'));  
$(document.body).append($el);

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

Προσθέστε το ως αδελφό ενός υπάρχοντος στοιχείου

$('p.last').after('A new paragraph
')  
$('ul li:first').before('new item
')

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

Αντικαταστήστε ένα υπάρχον στοιχείο

Μπορείτε να ανταλλάξετε ένα υπάρχον στοιχείο με ένα νεοδημιουργημένο χρησιμοποιώντας το αντικατέστησε με() μέθοδος:

$('#old').replaceWith('New paragraph
');

Τυλίξτε γύρω από ένα υπάρχον στοιχείο

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

$('code#n1').wrap('

')

Πρόσβαση στο στοιχείο που έχετε δημιουργήσει

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

$el = $('p'); $('body').append($el);

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

Δημιουργία στοιχείων χρησιμοποιώντας το jQuery

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

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Ο κρυμμένος ήρωας των ιστότοπων: Κατανόηση του DOM

Μαθαίνετε σχεδιασμό ιστοσελίδων και πρέπει να γνωρίζετε περισσότερα για το μοντέλο αντικειμένου εγγράφου; Δείτε τι πρέπει να γνωρίζετε για το DOM.

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

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

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

Ο Bobby είναι λάτρης της τεχνολογίας που εργάστηκε ως προγραμματιστής λογισμικού για περισσότερες από δύο δεκαετίες. Είναι παθιασμένος με το gaming, εργάζεται ως Reviews Editor στο Switch Player Magazine και είναι βυθισμένος σε όλες τις πτυχές της διαδικτυακής δημοσίευσης και ανάπτυξης ιστού.

Περισσότερα από τον Bobby Jack

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

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

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