$
La méthode $ est la fonction centrale d'ofa.js, utilisée pour obtenir et manipuler des instances d'éléments DOM. Voici une présentation détaillée des principales fonctionnalités de $ :
Obtenir une instance d'élément
Grâce à la méthode $, vous pouvez obtenir la première instance d’élément correspondant au sélecteur CSS sur la page et effectuer des opérations dessus. Voici un exemple :
texte cible 1
Dans l'exemple ci-dessus, nous avons utilisé le symbole $ pour sélectionner l'instance d'élément avec l'id "target1", et modifié son contenu textuel en définissant la propriété text.
Rechercher les instances d'éléments enfants
L’instance possède également la méthode $, qui permet d’obtenir, via la méthode $ de l’instance, la première instance d’élément enfant correspondant aux critères.
target
Je suis target1
Veuillez ne pas insérer directement l’instance d’élément obtenue ailleurs ; une telle opération affectera l’élément d’origine. Si vous avez besoin d’en créer une copie, utilisez la méthode clone.
position 1
I am target1
position 2
Obtenir les éléments enfants dans un nœud fantôme
On peut obtenir une instance via l'attribut shadow, puis utiliser la méthode $ pour obtenir l'élément souhaité :
$('my-component').shadow.$("selector").method(xxx)Instanciation directe d'éléments
Vous pouvez initialiser directement un élément natif en tant qu'instance $ de la manière suivante :
const ele = document.createElement('div');
const $ele = $(ele);const ele = document.querySelector('#target');
const $ele = $(ele);Ainsi, vous pouvez facilement convertir des éléments HTML existants en instances de $ afin d’utiliser les fonctionnalités fournies par $ pour les manipuler et les traiter.
Génération d'instances d'éléments
En outre, $ permet non seulement d’obtenir une instance d’élément existante, mais aussi de créer une nouvelle instance d’élément et de l’ajouter à la page.
Générer par chaîne de caractères
Vous pouvez utiliser la fonction $ pour créer une nouvelle instance d'élément à partir d'une chaîne de caractères, comme suit :
target1:
Dans cet exemple, nous utilisons la fonction $ pour créer une nouvelle instance d'élément avec des styles et un contenu texte spécifiés, puis l'ajoutons à l'intérieur d'une instance d'élément existante ayant l'id "target1".
Génération via objet
Vous pouvez également utiliser la fonction $ pour générer une nouvelle instance d'élément sous forme d'objet, comme suit :
target1:
Dans cet exemple, nous utilisons la fonction $ pour définir une nouvelle instance d'élément de manière objet, incluant le type de balise, le contenu textuel et les attributs de style, puis nous l'ajoutons à l'intérieur de l'instance d'élément existante ayant l'id "target1".