No jQuery - an alternative vanillia js implementation of jQuery's most used features. Code taken from youmightnotneedjquery.com
njq.getJSON("/some/path", function(data) {
console.log("JSON:", data);
});
njq.ajax({
type: "GET",
url: "/some/path",
success: function(data) {
console.log("RESULT:", data);
},
error: function() {
// error
}
});
njq.ajax({
type: "POST",
url: "/some/path",
data: { test: true },
success: function(data) {
console.log("RESULT:", data);
},
error: function() {
// error
}
});
var foo = njq("#foo");
foo.find("#bar").length; // some number
var foo = njq("#foo").each(function(i) { // <div id="foo">foo</div>
console.log(njq(this).text()); // foo
});
var foo = njq("#foo");
foo.find("#bar").length; // some number
var foo = njq("#foo"); // <div id="foo">foo</div><div id="bar">bar</div>
foo.next(); // <div id="bar">bar</div>
var foo = njq("#bar"); // <div id="foo">foo</div><div id="bar">bar</div>
foo.prev(); // <div id="foo">foo</div>
var foo = njq(".foo");
foo.is(".foo"); // true
var foo = njq(".foo");
foo.hasClass("foo"); // true
var foo = njq(".foo");
foo.addClass("bar");
foo.hasClass("bar"); // true
var foo = njq(".foo"); // <div class="foo bar">stuff</div>
foo.removeClass("bar"); //
foo.hasClass("bar"); // false
var foo = njq(".foo"); // <div class="foo">stuff</div>
foo.toggleClass("bar"); //
foo.hasClass("bar"); // true
var foo = njq(".foo"); // <div class="foo">stuff</div>
foo.toggle(); // <div class="foo" style="display: none;">stuff</div>
var foo = njq(".foo"); // <div class="foo">stuff</div>
foo.width("100px"); // <div class="foo" style="width: 100px;">stuff</div>
foo.width(); // 100
var foo = njq(".foo"); // <div class="foo">stuff</div>
foo.height("100px"); // <div class="foo" style="height: 100px;">stuff</div>
foo.height(); // 100
var foo = njq(".foo");
foo.each(function(el) {
console.log(el);
});
var foo = njq(".foo"); // <div class="foo">BAR</div>
foo.empty(); // <div class="foo"></div>
var foo = njq(".foo"); // <div class="foo">BAR</div>
foo.html(); // BAR
var foo = njq(".foo"); // <div class="foo"><span>BAR</span></div>
foo.text(); // BAR
var foo = njq(".foo"); // <div class="foo"><span>BAR</span></div>
foo.children(); // <span>BAR</span>
var foo = njq(".foo").append("<p>bar</p>"); // <div class="foo">stuff<p>bar</p></div>
var foo = njq(".foo").prepend("<p>bar</p>"); // <div class="foo"><p>bar</p>stuff</div>
var foo = njq(".foo"); // <div class="foo" data-bar="bar"></div>
foo.attr("data-bar"); // bar
foo.attr("data-bar", "fooBar");
var foo = njq("#foo"); // <input id="foo" type="text" value="foo" />
foo.val(); // foo
foo.val("bar"); // bar
var foo = njq(".foo"); // <div class="foo" data-bar="bar"></div>
foo.data("bar"); // bar
foo.data("bar", "newBar");
var foo = njq(".foo"); // <div class="foo" style="color: red;"></div>
foo.css("color"); // red
foo.css("color", "blue"); // blue
njq(".foo").on("bar", function(data) {
console.log(data);
}).trigger("bar", "foobar");
// LOG foobar
var listener = function(data) {
console.log(data);
};
njq(".foo").on("bar", listener).off("bar", listener).trigger("bar", "foobar");
// LOG nothing happens
njq(".foo").on("bar", function(data) {
console.log(data);
}).trigger("bar", "foobar");
// LOG foobar
njq(document).ready(function() {
// document is ready
});
var foo = njq(".foo").hide(); // sets display to none;
var foo = njq(".foo").show(); // removes display value
npm test