not-jquery
A very lightweight library that implements the core features of jQuery.
In fact, it is just a syntactic sugar over the standard browser methods.
The library is suitable for old environments and very simple pages with basic interactions.
Supported browsers:
- IE10+
- All other "modern" browsers
Usage
You can download it from Releases or include directly from jsDelivr:
<head>
<script type="text/javascript" src="dist/not-jquery.min.js"></script>
<!-- OR -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/gh/gerrproger/not-jquery@latest/dist/not-jquery.min.js"
></script>
</head>
API is inspired by jQuery - it returns a special array of elements (nj obj
) and supports chaining:
var content = nj('.article').removeClass('highlight').find('.content');
If you do not want AJAX (and you probably don't), include dist/not-jquery-noajax.min.js
.
Also, dist/not-browser.min.js
can be used to detect unsupported browsers (ancient ones). Just include it before the main lib and then not-jquery will automatically skip initialization (your code will not be thrown with an error):
<head>
<script type="text/javascript" src="dist/not-browser.min.js"></script>
<script type="text/javascript" src="dist/not-jquery.min.js"></script>
</head>
API
Not-jquery exports itself in window
as nj
.
For convenience, you can do this:
var $ = nj`;
You can extend nj
with your own methods like so:
nj.proto.myMethod = myMethod;
Most methods return nj object
which looks like Array and support some Array built in methods:
nj('.els').forEach(function (el) {
var njObj = nj(el);
});
Methods
.find(query)
-
query
- required one of the types:- String | CSS selector
- HTMLElement
- Array[HTMLElement]
- Array[nj obj]
Returns nj obj
with found DOM elements.
Calling nj('.els')
= nj().find('.els')
.
.closest(selector)
-
selector
- String not required | CSS selector
Finds the closest parent(s) matching the selector
, or just a parent if selector
is not specified.
Returns nj obj
with DOM elements.
.remove()
Removes previously matched elements from DOM.
.html(string)
-
string
- String not required | HTML markdown
If string
is passed, sets it as HTML content of matched elements.
Otherwise, returns inner HTML as a String.
.text(text)
-
text
- String not required
If text
is passed, sets it as content of matched elements.
Otherwise, returns inner Text as a String.
.attr(name [, value])
-
name
- String not required | element attribute name -
value
- String or Object not required | attribute value
If value
is passed, sets it as value for the attribute with the specified name.
Otherwise, returns an attribute value with the specified name as a String or Object (if the value can be parsed).
If name
is not passed, returns all attribute as object: {attrName1: attrValue1, attrName2: attrValue2}
.
.removeAttr(name)
-
name
- String required | element attribute name
Removes an attribute with the specified name.
.data(data)
-
data
- String or Object not required | data attribute name or{name: value}
If data
is a String (ex: 'test'
), returns value as a String or Object (if value can be parsed) for corresponding data attribute ('data-test'
).
If data
is an Object ({dataName1: dataVal1, dataName2: dataVal2}
), sets corresponding data attributes. CamelCase names will become dashed.
If data
is not passed, returns all data attributes as an object {dataName1: dataVal1, dataName2: dataVal2}
.
.removeData(name)
-
name
- String required | element data attribute name
Removes attribute with the specified name, camelCase names will become dashed.
Example: nj('.els').removeData('exampleName')
will remove data-example-name
attribute.
.addClass(class1 [, class2]...)
-
classN
- String required | class name or class names, separated with spaces ('class1 class2'
).
Adds classes to the elements.
.removeClass(class1 [, class2]...)
-
classN
- String required | class name or class names, separated with spaces ('class1 class2'
).
Removes classes from the elements.
.toggleClass(class1 [, class2]...)
-
classN
- String required | class name or class names, separated with spaces ('class1 class2'
).
Toggles classes for the elements.
.hasClass(class)
-
class
- String required | class name
Returns Boolean true
if all matched elements have a class with the specified name.
.on(event, callback [, namespace])
-
event
- String required | event name -
callback
- Function required | callback function -
namespace
- String not required | used to remove listeners
Adds an event listener for the specified event
which will call the provided callback
with the original event object
.
Namespace can be used later to remove multiple listeners (may not be unique).
.off(event [, namespace])
-
event
- String not required | event name -
namespace
- String not required | if you provided it foron
method
If event
is passed, removes all listeners for this event, or only ones that were added with the same namespace
.
If nothing is passed, will remove all event listeners from the elements.
.transitionEnd(callback, target, prop [, pseudo])
-
callback
- Function required | callback function -
target
- HTMLElement or String='all' or Nullish required | target element -
prop
- String not required | transitioned property name -
pseudo
- String='before'||'after' | listen event on pseudo-element
Adds an event listener for the transition end event with a more convenient API.
Calls callback
after transition ended for the original matched element if target
is Nullish; or if the event target matches passed HTMLElement (that could be the original element's child); or if the target is any element when passed the String 'all'
.
If prop
is passed, calls callback
only for the specified property name transition end; otherwise calls for any properties.
If pseudo
is passed, calls callback
only if transitioned target is a pseudo-element (::bfore
or ::after
).
nj.create(string)
-
string
- String required | HTML markdown
Creates and returns HTMLElements.
Properties
.proto
- Type: Object
Contains all nj
methods.
You can add your own methods to it before calling nj()
.
.version
- Type: String
The library version.
.supported
- Type: Boolean or Undefined
Return true
, if browser supports nj
.
Only present if not-browser
was included in the page before not-jquery
.
AJAX method nj.ajax(settings, success, fail)
This method is not present in not-jquery-noajax.js
.
settings{} object
-
settings.url
- String required | requested URL -
settings.method
- String not required | method, default:'GET'
or'POST'
for forms -
settings.user
- String not required | username for authentication -
settings.password
- String not required | password for authentication -
settings.body
- String not required | request body -
settings.form
- Object not required | form object to send in body ({name: value}
) -
settings.timeout
- Number not required | request timeout (ms), default: 10000 -
settings.params
- Object not required | will be included as query for GET or HEAD, and in body otherwise -
settings.headers
- Object not required | headers to set for request ({headerName: headerValue}
) -
settings.dataType
- String='html'||'json'||'text'||'auto' not required | response data type, body will be automatically parsed according to the specifieddataType
, default:'auto'
(ifhtml
, elements will be created from the markup) -
settings.beforeSend
- Function not required | calls this function before sending request withxhr object
as a parameter -
settings.readyStateChange
- Function not required | calls this function when ready state changes for the request (withxhr object
as a parameter) -
settings.overrideMimeType
- String not required | override request mime type
success(response, xhr) callback
-
response
- String or HTMLElement or Object | parsed response, type can be changed viasettings.dataType
parameter -
xhr
- Object | originalxhr object
Called when the request succeeded (200 response codes).
fail(response, xhr) callback
-
response
- String or HTMLElement or Object | parsed response, type can be changed viasettings.dataType
parameter -
xhr
- Object | originalxhr object
Called when the request failed.
NotBrowser Properties
You should include not-browser.js
to use it.
notBrowser.good
- Type: Boolean
Returns true
, if browser supports nj
.
notBrowser.version
- Type: String
The library version.