~ Simple Fast CSS Selector Engine ~
npm install dizzle!https://cdn.svarun.dev/gh/varunsridharan/dizzle/banner.jpg
``html`
Dizzle is also available through npm as the dizzle package:
npm install --save dizzle
That you can then use like this:
`javascript
import dizzle from "dizzle";
dizzle.find('div.myelement');
`
javascript
/**
* Search For h2 elements inside div in whole document
*/
console.log(dizzle('div > h2'));/**
* Fetches All H2 Elements in document
* and loops into results and find span element in each h2 element
*/
var $h2 = dizzle('h2');
$h2.forEach(function(element){
console.log(dizzle('span',element));
});
`$3
`javascript
/**
* Fetches All H2 Elements in document
* and loops into results and find span element in each h2 element
*/
var $h2 = dizzle('h2');
$h2.forEach(function(element){
if(dizzle.is(':visible',element)){
// your code if h2 is visible
}
});
`
$3
`javascript
/**
* Filter All Visible H2 tags
*/
var visibleH2 = dizzle.filter(':visible',dizzle('h2'));
`Custom Adapter Support
`javascript
const customAdapter = {
attr: function( elem, attrName ) {
if( 'custom-Name' === attrName ) {
return elem.getAttribute('customName');
}
return elem.getAttribute( attrName );
}
};const attr = dizzle('[custom-Name="Yes"]',null,customAdapter)
`$3
A custom adapter must implement the following functions: isTag, getChildren, getParent, attr, getSiblings, getTagName
Please check src/adapter.js for more information
Custom adapters can be passed for all the below functions
`javascript
/**
* @param selector String
* @param context Parent Element / Root
* @param adapter Custom Adapter Function
*/
dizzle( selector, context, adapter );/**
* @param selector String
* @param elem Single Element Object
* @param adapter Custom Adapter Function
*/
dizzle.is( selector, elem, adapter )
/**
* @param selector String
* @param elems Array of elements
* @param adapter Custom Adapter Function
*/
dizzle.filter( selector, elems, adapter )
`
Supported Selectors
| Combinators | Attributes | Pseudo |
| :--- | :---: | ---: |
| > Child | = | :empty |
| + Adjacent | != | :disabled |
| ~ General Sibling | \|= | :enabled |
| Descendant | *= | :lang |
| | ~= | :visible |
| | $= | :hidden |
| | ^= | :contains |
| | | :first-child |
| | | :last-child |
| | | :first-of-type |
| | | :last-of-type |
| | | :even |
| | | :odd |
| | | :gt |
| | | :lt |
| | | :eq |
| | | :first |
| | | :last |
| | | :nth-of-type |
| | | :nth-last-of-type |
| | | :nth-last-child |
| | | :checked |
| | | :input |
| | | :button |
| | | :parent |
| | | :selected |
| | | :text |
| | | :only-child |
| | | :only-of-type |
| | | :has |
| | | :not |
| | | :radio |
| | | :checkbox |
| | | :file |
| | | :password |
| | | :image |
| | | :submit |
| | | :reset |Combinators
$3
The child selector selects all elements that are the children of a specified element.
`javascript
dizzle('div > p > span');
`$3
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
`javascript
dizzle('div.copyright > p.content + span.year');
`$3
The general sibling selector selects all elements that are siblings of a specified element.
`javascript
dizzle('p ~ span');
`$3
The descendant selector matches all elements that are descendants of a specified element.
`javascript
dizzle('div p span');
``---
The format is based on Keep a Changelog,
and this project adheres to Semantic Versioning.
- ā How about we get to know each other over coffee? Buy me a cup for just [$9.99][buymeacoffee]
- āļøāļø How about buying me just 2 cups of coffee each month? You can do that for as little as [$9.99][buymeacoffee]
- š° We love bettering open-source projects. Support 1-hour of open-source maintenance for [$24.99 one-time?][paypal]
- š Love open-source tools? Me too! How about supporting one hour of open-source development for just [$49.99 one-time ?][paypal]
---
Built With ā„ By Varun Sridharan š®š³
---
[paypal]: https://sva.onl/paypal
[buymeacoffee]: https://sva.onl/buymeacoffee
[sofythelabrador]: https://www.instagram.com/sofythelabrador/
[github]: https://sva.onl/github/
[twitter]: https://sva.onl/twitter/
[telegram]: https://sva.onl/telegram/
[email]: https://sva.onl/email
[website]: https://sva.onl/website/
[composer]: https://sva.onl/composer/
[downloadzip]:https://github.com/varunsridharan/vsp-framework/archive/master.zip
[wpcsl]: https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/