$
The $ method is the core function in ofa.js, used to obtain and manipulate DOM element instances. The main features of $ are detailed below:
Getting Element Instances
By using the $ method, you can obtain the first element instance on the page that matches the CSS selector and perform operations on it. Here is an example:
target 1 text
In the example above, we used the $ symbol to select the element instance with id "target1" and modified its text content by setting the text property.
Example of Finding Child Elements
The instance also has a $ method, which can be used to obtain the first matching child element instance of an element instance.
target
I am target1
Please do not insert the obtained element instance directly elsewhere, as such an operation will affect the original element. If you need to create a copy, you can use the clone method.
position 1
I am target1
position 2
Get Child Elements in Shadow Node
You can obtain the instance via the shadow property, and then use the $ method to get the desired element:
$('my-component').shadow.$("selector").method(xxx)Instantiating Elements Directly
You can directly initialize native elements as $ instance objects in the following ways:
const ele = document.createElement('div');
const $ele = $(ele);const ele = document.querySelector('#target');
const $ele = $(ele);In this way, you can easily convert existing HTML elements into $ instances so that you can use the functionality provided by $ to operate and process them.
Generate Element Instance
Besides, the $ can be used not only to get existing element instances but also to create new element instances and add them to the page.
Generated via String
You can use the $ function to create new element instances from strings, as shown below:
target1:
In this example， we use the $ function to create a new element instance with specified styles and text content， and add it to the existing element instance with the id of "target1".
Generate via Object
You can also use the $ function to generate new element instances in an object-oriented way, as shown below:
target1:
In this example, we use the $ function to define a new element instance through an object, including the tag type, text content, and style attributes, and add it to an existing element instance with the id of "target1".
Relationship between acquired examples and page/component instances
The $ method can be used to obtain the instance of the corresponding page or component element from the global scope, and its function is the same as the this reference in the lifecycle methods within the page or component module.
<!DOCTYPE html>
...
<l-m src="./test-comp.html"></l-m>
<test-comp id="target"></test-comp>
<script type="module">
setTimeout(()=>{
console.log($('#target').title); // => OFAJS Component Example
},300);
</script><!-- test-comp.html -->
<template component>
<div>
<p>{{title}}</p>
</div>
<script>
export default async ({ load }) => {
return {
tag: "test-comp",
data: {
title: "OFAJS Component Example",
},
attached(){
console.log(this === $('#target')); // true
}
};
};
</script>
</template>