Barbequery

🔥 The perfect library for easily cooking up some spicy HTML GUIs

Reasons to use Barbequery

☁️ lightweight (only 7% of JQuery's file size)
⚡ fast (no more waiting for your JSX to compile)
🧠 extremely simple to use (especially if you familiar with JQuery or React)
✨ modern (ES6+ JavaScript syntax support)

Usage

Almost all methods return the this Barbequery element allowing you to link many methods together for example:

$("div").html("hello world").css("color: red").appendTo(document.body)

Most methods should be directly accessible $("input").input however you can also do $("input").el.input to access the property from the raw element

Selecting element by id

$("#id")

Selecting elements by class name

$(".class-name")

Selecting elements by tag name

$("*div")

Multi selectors

// select all elements that have both the "class1" class and an id of "myId"
$(".class1 && #myId")

// select all elements that are either a <div> or have the "myClass" class
$("*div || .myClass")

Nested selectors

// select all <a> tags that are inside of an <div> that are also inside of an element that has the "example" class
var els = $(".example > *div > *a")

Nested multi selectors

// select all elements that have class1 or both class2 and class3 and that are also inside of a <div> element
$("*div > .class1 || (.class2 && .class3)")

Creating elements

$("div") // create an element of a native type

Creating components

Lets call the object parameter which is used when creating an instance of a component the initialization object. Use \{propertyName} to insert a value from the initialization object into the code. You can also access subproperties from the initiliazation object like so \{prop1.prop2}. The $.html is necessary if you are going to use value inserts, otherwise it is not necessary. There should only be one top level element in each component.

var exampleComponent = $.createComponent("MyComponent", $.html`
    <p style="border: 2px solid green;">
        <strong>NAME: \{name}</strong>
        <br>
        <span>job: \{job} \n \t example</span>
    </p>
`, function(initObj, rawElement) {
    // this is the callback that gets run when the element is created
    console.log(this); // this references the new Barbequery element (note: doesn't exist if you use an arrow function)
})

// you can also create new components that use previously defined components
// you can give input to those components in the opening tag of the component
$.createComponent("ParentComponent", $.html`
    <div style="border: 2px solid blue;">
        <MyComponent name="Tom" job="unemployed">
        <MyComponent/>
    </div>
`)

Deleting components (note: deletes the component type, not individual components)

$.deleteComponent("MyComponent")

Using components

var el = $("MyComponent", {name: "bob", job: "lawyer"}) // create a custom component using $
var el = exampleComponent({name: "bob", job: "lawyer"}); // create a custom element using the function that is returned from the createComponent method
var el = $("ParentComponent").appendTo(document.body) // create a custom component that uses sub-components

Getting/Setting innerHTML

el.html() // returns the innerHTML
el.html("Example test") // sets the innerHTML

Getting/Setting textContent

el.text() // returns the textContent
el.text("Example test") // sets the textContent

Setting CSS

// using string of css code
el.css(`
    color: red;
    font-size: 18px;
    font-family: sans-serif;
    border: 2px dashed blue;
`)
// using object of key/value pairs
.css({
    color: "red",
    fontSize: "18px",
    fontFamily: "sans-serif",
    border: "2px dashed blue"
})

Appending this element to another element

el.appendTo(document.body)

Appending another element to this element

el.append(anotherEl)

Adding classes

el.addClass("example-class1", "example-class2")

Removing classes

el.removeClass("example-class1", "example-class2")

Setting id

el.setId("example-id")

Setting arbitrary properties

el.attr("width", "400")
el.attr({width: 400})

Adding an event listener

Note: addEventListener doesn't work on Barbequery elements, you must use the .on method.

el.on("mouseup", function (e) {
    console.log("hello", e);
});

Parsing strings as psuedo-template literals

$.template("My name is ${name}", {name: "Bob"});

Fetching a JSON response using the fetch API

$.getJSON("https://example.com/API/endpoint", function (data) {
    console.log(data);
});

Fetching a JSON response using JSONP

$.getJSONP("https://example.com/API/endpoint", function (data) {
    console.log(data);
});