What is this?
A class wrapper to turn standard jquery framework into ES6 class library.
Installation
npm install jquery-wrapper-class --save
Usage
CommonJS
// import JqueryWrapper into our script:
const JqueryWrapper = require("jquery-wrapper-class").default;
// optionally: put any jquery's plugin(s) here
// any modification of jquery's plugin(s), in the past or future, will be consumed by JqueryWrapper.
// require("jquery-plugin-chain");
// require("another-jquery-plugin");
// define our class that extends JqueryWrapper:
class CoolButton extends JqueryWrapper {
constructor(selector) {
super(selector); // call JqueryWrapper's constructor. Internally executes jquery $(selector)
}
doSomething() {
this.attr("required", "");
}
doAnother() {
this.find("div, span").css({ backgroundColor: "red" });
}
}
// our class is ready to use:
let btn1 = new CoolButton(".btn"); // select elements with class btn and wrap them into CoolButton class
btn1.doSomething(); // ok
btn1.doAnother(); // ok
btn1.addClass("jquery-fun"); // call any jquery function
let children = btn1.find(".good-child"); // call another jquery function
ES6 JavaScript
// import JqueryWrapper into our script:
import JqueryWrapper from "jquery-wrapper-class";
// optionally: put any jquery's plugin(s) here
// any modification of jquery's plugin(s), in the past or future, will be consumed by JqueryWrapper.
// import "jquery-plugin-chain";
// import "another-jquery-plugin";
// define our class that extends JqueryWrapper:
class CoolButton extends JqueryWrapper {
constructor(selector) {
super(selector); // call JqueryWrapper's constructor. Internally executes jquery $(selector)
}
doSomething() {
this.attr("required", "");
}
doAnother() {
this.find("div, span").css({ backgroundColor: "red" });
}
}
// our class is ready to use:
let btn1 = new CoolButton(".btn"); // select elements with class btn and wrap them into CoolButton class
btn1.doSomething(); // ok
btn1.doAnother(); // ok
btn1.addClass("jquery-fun"); // call any jquery function
let children = btn1.find(".good-child"); // call another jquery function
TypeScript
// import JqueryWrapper into our script:
import JqueryWrapper from "jquery-wrapper-class";
// optionally: put any jquery's plugin(s) here
// any modification of jquery's plugin(s), in the past or future, will be consumed by JqueryWrapper.
// import "jquery-plugin-chain";
// import "another-jquery-plugin";
// define our class that extends JqueryWrapper:
class CoolButton extends JqueryWrapper {
constructor(selector : Selector) {
super(selector); // call JqueryWrapper's constructor. Internally executes jquery $(selector)
}
doSomething() {
this.attr("required", "");
}
doAnother() {
this.find("div, span").css({ backgroundColor: "red" });
}
}
// our class is ready to use:
let btn1 = new CoolButton(".btn"); // select elements with class btn and wrap them into CoolButton class
btn1.doSomething(); // ok
btn1.doAnother(); // ok
btn1.addClass("jquery-fun"); // call any jquery function
let children = btn1.find(".good-child"); // call another jquery function