jQuery κέντρο - Μέθοδος jQuery()
Παράδειγμα
Βρείτε όλα τα στοιχεία p που ανήκουν σε στοιχεία div και ρυθμίστε την ιδιότητα περιγράμματος:
$("div > p").css("border", "1px solid gray");
Ορισμός και χρήση
Η συνάρτηση jQuery() αποδέχεται έναν字符串 που περιέχει έναν CSS επιλογέα για την ταιριάξιμο της συλλογής στοιχείων.
Η συνάρτηση jQuery() έχει τρεις γραμματικές:
Γραμματική 1
Αποδέχεται έναν字符串 που περιέχει έναν CSS επιλογέα για την ταιριάξιμο της συλλογής στοιχείων:
jQuery(selector, [context])
Γραμματική 2
Δημιουργία στοιχείων DOM χρησιμοποιώντας αλφαριθμητικός字符串 HTML:
jQuery(html,ownerDocument])
Γραμματική 3
Σύνδεση μιας συνάρτησης που θα εκτελεστεί όταν το έγγραφο του DOM φορτωθεί πλήρως:
jQuery( callback )
jQuery( selector, [ context ] )
Esta sintaxis tiene los siguientes usos:
Χρήση 1: Ορισμός περιβάλλοντος επιλογέα
Γραμματική
jQuery(selector, [context])
Προεπιλεγμένα, ο επιλογέας αναζητά τον DOM από τη ρίζα του έγγραφου. Ωστόσο, μπορεί να οριστεί ένας επιλογικός παράμετρος context για το $().
π.χ., εάν θέλουμε να αναζητήσουμε ένα στοιχείο σε ένα callback, μπορούμε να περιορίσουμε την αναζήτηση ως εξής:
Παράδειγμα
($("div.foo").click(function() { ($("span", this).addClass("bar"); );
Επειδή ήδη ορισμένος ο επιλογέας span στο περιβάλλον αυτό, μόνο ο span του στοιχείου που πατηθεί θα αποκτήσει την πρόσθετη κλάση.
Στο εσωτερικό, το περιβάλλον επιλογέα επιτυγχάνεται μέσω της μεθόδου .find(), οπότε το $("span", this) είναι ίσο με το $(this).find("span").
Οι βασικές λειτουργίες της jQuery επιτυγχάνονται μέσω αυτής της συνάρτησης. Όλα τα στοιχεία της jQuery βασίζονται σε αυτή τη συνάρτηση, ή χρησιμοποιούν αυτή τη συνάρτηση με κάποιο τρόπο. Η βασική χρήση αυτής της συνάρτησης είναι να της αποστέλλεται μια έκφραση (συνήθως αποτελείται από CSS επιλογέα), και στη συνέχεια να αναζητούνται όλα τα ταιριζόμενα στοιχεία με βάση αυτή την έκφραση.
Προκαθορισμένα, αν δεν καθοριστεί ο παράμετρος context, η συνάρτηση $() θα αναζητήσει στοιχεία DOM στο τρέχον έγγραφο HTML; αν καθοριστεί ο παράμετρος context, όπως ένα σύνολο στοιχείων DOM ή αντικείμενο jQuery, θα αναζητηθεί σε αυτό το context. Από την έκδοση 1.3.2 της jQuery, η σειρά των στοιχείων που επιστρέφει είναι ίση με τη σειρά εμφάνισης τους στο context.
Χρήση 2: Χρήση στοιχείου DOM
Γραμματική
jQuery(element)
Η συνάρτηση αυτή επιτρέπει τη δημιουργία αντικειμένων jQuery χρησιμοποιώντας στοιχεία DOM που βρέθηκαν με άλλους τρόπους. Η συχνή χρήση αυτής της λειτουργίας είναι η κλήση μεθόδων jQuery στο στοιχείο που έχει μεταφερθεί στο callback function μέσω του κλειδιού this:
Παράδειγμα
$("div.foo".click(function() { $(this).slideUp(); );
Αυτό το παράδειγμα χρησιμοποιεί μια κίνηση κύλισης για να κρύψει το στοιχείο όταν πατηθεί. Επειδή ο διαχειριστής επεξεργασίας δεχόμενος το στοιχείο που πατηθεί στο κλειδί this είναι καθαρό στοιχείο DOM, πρέπει να το πακετάρουμε με αντικείμενο jQuery πριν την κλήση των μεθόδων του jQuery.
Η συνάρτηση αυτή μπορεί επίσης να δεχτεί έγγραφα XML και αντικείμενα Window (ακόμα και αν δεν είναι στοιχεία DOM) ως έγκυρες παραμέτρους.
Όταν τα δεδομένα XML επιστρέφουν από μια κλήση Ajax, μπορούμε να χρησιμοποιήσουμε τη συνάρτηση $() για να πακετάρουμε τα δεδομένα με αντικείμενο jQuery. Μόλις ολοκληρωθεί, μπορούμε να χρησιμοποιήσουμε τη μέθοδο .find() και άλλες μεθόδους εξερεύνησης DOM για να ανακτήσουμε το μεμονωμένο στοιχείο της δομής XML.
Χρήση 3: Αντιγραφή αντικειμένου jQuery
Γραμματική
jQuery(jQuery object)
Οταν αποστέλλεται ως παράμετρος στην συνάρτηση $() ένας αντικείμενο jQuery, δημιουργείται μια αντίγραφο αυτού του αντικειμένου. Όπως και το αρχικό αντικείμενο, το νέο αντικείμενο jQuery αναφέρεται στον ίδιο στοιχείο DOM.
Uso 4: Devolver una coleccion vacia
Γραμματική
jQuery()
Para jQuery 1.4, llamar al metodo jQuery() sin parametros devuelve una coleccion jQuery vacia. En versiones anteriores de jQuery, asi se devuelve una coleccion que contiene el nodo document.
jQuery( html, [ ownerDocument ] )
Esta sintaxis tiene los siguientes usos:
Uso 1: Crear nuevos elementos
Γραμματική
jQuery(html,ownerDocument])
Puede pasar una cadena HTML escrita a mano, o una cadena creada por ciertos motores de plantillas o plugins, o una cadena cargada via AJAX. Pero hay limitaciones cuando se crea un elemento input, puede referirse al segundo ejemplo.
Claro, esta cadena puede contener barras invertidas (por ejemplo, una direccion de imagen), asi como barras bajas. Al crear un solo elemento, utilice etiquetas cerradas o formato XHTML. Por ejemplo, para crear un span, se puede usar $("<span/>") o $("<span></span>"), pero no se recomienda $("<span>")). En jQuery, esta sintaxis es equivalente a $(document.createElement("span")).
Si se pasa una cadena como parametro a $(), jQuery verifica si la cadena es HTML (por ejemplo, si ciertas posiciones de la cadena contienen etiquetas). Si no lo es, la cadena se interpreta como una expresion de selector, como se explico anteriormente. Pero si la cadena es un segmento HTML, jQuery intenta crear el elemento DOM descrito por ese segmento HTML. Luego crea y devuelve un objeto jQuery que referencia estos elementos DOM:
Παράδειγμα
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Si o HTML segmento es mas complejo que el simple etiqueta sin atributos, como en el ejemplo anterior, el proceso real de creacion del elemento es completado por el mecanismo innerHTML del navegador. En particular, jQuery crea un nuevo elemento <div>, y luego configura la propiedad innerHTML del elemento con el segmento HTML proporcionado. Cuando el parametro es solo una etiqueta simple, como $("<img/>") o $("<a></a>"), jQuery crea el elemento a traves de la funcion内生 JavaScript createElement().
Για να διασφαλιστεί η συμβατότητα διασταυρούμενων πλατφορμών, η δομή των στοιχείων πρέπει να είναι καλή. Οι ετικέτες που μπορούν να περιέχουν άλλα στοιχεία πρέπει να εμφανίζονται σε ζευγάρι (με κλείσιμο ετικετών):
$("<a href="http://jquery.com"></a>");
Ωστόσο, το jQuery επιτρέπει μια γλώσσα ετικετών παρόμοια με το XML:
$("<a/>");
Οι ετικέτες που δεν περιέχουν άλλα στοιχεία μπορούν να κλείσουν ή όχι:
$("<img />"); $("<input>");
Χρήση 2: Ορισμός ιδιοτήτων και συμβάντων
Γραμματική
jQuery(html,props)
Για το jQuery 1.4, μπορούμε να στείλουμε μια αναπαράσταση παραμέτρων στον δεύτερο παράμετρο. Αυτή η παράμετρος αποδέχεται μια συλλογή που περιέχει όλες τις ιδιότητες που μπορούν να παραπεμφθούν στο .attr() μέθοδο. Επιπλέον, μπορεί να παραπεμφθούν οποιοδήποτε τύπο συμβάντος και μπορεί να καλείται οι παρακάτω μεθόδοι του jQuery: val, css, html, text, data, width, height, ή offset.
Σημείωση, ο Internet Explorer δεν επιτρέπει τη δημιουργία στοιχείων input και την αλλαγή τύπου τους; πρέπει να χρησιμοποιήσετε π.χ. "<input type="checkbox" />" για να ορίσετε τον τύπο.
Παράδειγμα
Δημιουργεί έναν στοιχείο <input>, ορίζοντας παράμετρος τύπου, τιμές και μερικές συμβάντα.
$("<input>", { type: "text", val: "Test", focusin: function() { $(this).addClass("active"); }, focusout: function() { $(this).removeClass("active"); } }).appendTo("form");
jQuery( callback )
Επιτρέπει να συνδέσετε μια συνάρτηση που θα εκτελεστεί όταν το έγγραμμα DOM φορτωθεί.
Η λειτουργία αυτής της συνάρτησης είναι ίδια με την $(document).ready(), αλλά όταν χρησιμοποιείται αυτή η συνάρτηση, πρέπει να 包装 όλα τα άλλα $() operations που πρέπει να εκτελεστούν όταν το DOM φορτωθεί. Παρά το ότι τεχνικά αυτή η συνάρτηση είναι συνδεδεμένη, η πραγματική συνδεδεμένη χρήση αυτής της τρόπου είναι λίγη.
Παράδειγμα
Όταν το DOM φορτώνεται, εκτελείται η συνάρτηση που περιέχεται:
$(function() { // έγγραμμα έτοιμο );