$
$ es la función central en ofa.js, utilizada para obtener y manipular instancias de elementos del DOM. A continuación se detallan las principales funcionalidades de $:
Obtener instancia de elemento
Mediante el método $, puedes obtener la primera instancia de elemento en la página que coincida con un selector CSS y realizar operaciones sobre él. Aquí tienes un ejemplo:
target 1 text
En el ejemplo anterior, utilizamos el símbolo $ para seleccionar la instancia del elemento con id "target1", y modificamos su contenido de texto estableciendo la propiedad text.
Buscar instancias de elementos secundarios
La instancia también tiene el método $, que puede obtener la primera instancia de elemento secundario que cumpla con las condiciones a través del método $ en la instancia.
target
I am target1
No insertes directamente la instancia de un elemento obtenida en otro lugar, ya que esta operación afectará al elemento original. Si necesitas crear una copia, puedes utilizar el método clone.
position 1
I am target1
position 2
Obtener elementos secundarios dentro de nodos sombra
Puedes obtener la instancia a través del atributo shadow y luego obtener el elemento deseado mediante el método $:
$('my-component').shadow.$("selector").method(xxx)Instanciación directa de elementos
Puedes inicializar directamente elementos nativos como instancias de objeto $ de la siguiente manera:
const ele = document.createElement('div');
const $ele = $(ele);const ele = document.querySelector('#target');
const $ele = $(ele);De esta manera, puedes convertir convenientemente los elementos HTML existentes en instancias de $ para operar y procesar con las funciones que proporciona $.
Generar instancias de elementos
Además de $ para obtener instancias de elementos existentes, también se puede utilizar para crear nuevas instancias de elementos y agregarlas a la página.
Generación a través de cadenas de texto
Puedes usar la función $ para crear nuevas instancias de elementos a partir de una cadena, de la siguiente manera:
target1:
En este ejemplo, utilizamos la función $ para crear una nueva instancia de elemento con los estilos y el contenido de texto especificados, y la añadimos dentro de la instancia de elemento existente con id "target1".
Generación a través de objetos
También puedes usar la función $ para generar nuevas instancias de elementos a través de objetos, como se muestra a continuación:
target1:
En este ejemplo, usamos la función $ para definir una nueva instancia de elemento mediante un objeto, incluyendo el tipo de etiqueta, el contenido de texto y los atributos de estilo, y la agregamos a un elemento existente con id "target1".