introduce

Write an Emmet version of JQ to consolidate your DOM knowledge

  • Based on the document. The JQ querySelectorAll encapsulation
  • The DOM is created using a similar Emmet syntax
  • ts

Emmet

The following operators are supported

  • # : id
  • .: class
  • + : brothers
  • Son > :
  • [] : attribute use, partition attribute, attribute = value, use; Divide the value of an attribute
  • {} : text
<! -- #:id - div#id --> <div id="id"></div> <! -- .:class - div.class --> <div class="class"></div> <! Class1. Class2 #id[]: attribute attr-input.class1. font-size:30px,value=value] --> <input class="class1 class2" id="id" style="color:red; font-size:30px" value="value"> <! -- {}: text-div {text} --> <div>text</div>Copy the code

The incomplete version of Emmet currently does not accept *10

structure

Mimicking JQ usage, it provides basic APIS for DOM, Event, CSS and the like. If you are interested, you can continue to expand.

QElements

Each wrapped element (QElement) is wrapped in a large container (QElements), which is used to iterate over and generate QElements. And QElements inherit from Array, so you can call the Array’s native methods directly to manipulate the QElement inside.

QElement

Provides specific operations on its own element.

link

npm i -S qelements
Copy the code

github

The document

dome