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

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

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

Τι είναι το jQuery;

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

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

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

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

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

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

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

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

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

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

$("")

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

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

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

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

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

$("

ένας
δύο
τρία
")

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

$('')

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

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

φωτογραφία = νέα Ημερομηνία().getHours() > 12; "afternoon.jpg": "morning.jpg";
$("", { src: φωτογραφία });

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

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

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

$("body").append($("
Γειά σου Κόσμε
"));
$(document.body).append($el);

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

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

$("p.last").after("
Μια νέα παράγραφος
")
$("ul li: first").before("
Νέο αντικείμενο
")

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

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

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

$('#old').replaceWith("
Νέα παράγραφος
");

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

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

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

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

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

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

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

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

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

The Hidden Hero of Websites: Understanding the DOM

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

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα