A simple and lightweight javascript library easy to learn easy to use
you can include the javascript file inside the head tag of your page
<head>
...
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mboussaid/dolar.js/src/dolar.min.js"></script>
...
</head>you can select on element or more by like this :
index.html
...
<input type="text" placeholder="email" />
<input type="password" placeholder="password" />
...script.js
$('input') // select all inputs
if you want to select only one element you can use function at(index)
$('input').at(0) // select input at index 0 (email input)
$('input').at(1) // select input at index 1 (password input)
you can add a custom event to a one or more elements $(element).addEvent(eventName,callbackFunction)
index.html
<button>say welcome </button>
<button>say goodbye </button>script.js
/// add a click function to the first button
$('button').at(0).addEvent('click',function(){
alert('welcome')
})
/// add a click function to the second button
$('button').at(1).addEvent('click',function(){
alert('goodbye')
})
/// You can use all code in one line
/// You can switch between selected element by at function
$('button').at(0).addEvent('click',function(){alert('welcome')}).at(1).addEvent('click',function(){alert('goodbye')})
you can switch between selected elements using change function see this example
<button>say hello </button>
<input type="checkbox"/>without change function
/// add a click function to the first button
$('button').addEvent('click',function(){
alert('hello')
})
/// add change function to checkbox input
$('input').addEvent('click',function(){
alert('checkbox changed')
})with change function
/// add a click function to the first button
$('button').addEvent('click',function(){
alert('hello')
}).change('input').addEvent('change',function(){alert('checkbox changed')})change allows you to switch between selected elements so you can write all your code inline
| Function | Description |
|---|---|
| hide() | hide the element |
| hideAfter(number) | hide the element after delay |
| show() | show the element |
| showAfter(number) | show the element after delay |
| remove() | remove the element from DOM |
| removeAfter(number) | remove the element from DOM after delay |
example
<h1>This text will hide directly (after 0s)</h1>
<h1>this text will hide after 1 second</h1>
<p style='opacity:0'>this text will be visible after 2 second and will be removed after 4 second </p>$('h1').at(0).hide()
$('h1').at(1).hideAfter(1000)
$('p').showAfter(2000).removeAfter(4000)
// or use inline syntax with at and change
$('h1').at(0).hide().at(1).hideAfter(1000).change('p').showAfter(2000).removeAfter(4000)| Function | Description |
|---|---|
| getAttribute('name') | returns the value of an attribute |
| setAttribute('name','value') | set attribute name to value |
<input type="text" placeholder="password" />
<button>Hide / Show password</button>$('button').addEvent('click',()=>{
let InputType = $('input').getAttribute('type')
if(InputType == "text"){
$('input').setAttribute('type','password')
}else{
$('input').setAttribute('type','text')
}
})
| Function | Description |
|---|---|
| getValue() | returns the value of the element |
| saveValue('name') | save the element value as name |
| setValue('new value') | change the value of the element |
| appendValue('new value') | add the value to the old value of the element |
| clearValue() | clear the value of the element |
example
<input type="text" placeholder="firstname"/>
<input type="text" placeholder="lastname"/>
<input type="text"/>
<button>click</button>$('button').addEvent('click',()=>{
let FirstName = $('input').at(0).getValue();
let LastName = $('input').at(1).getValue();
let message = "Welcome " + FirstName +" " + LastName;
$('input')
.at(2).setValue(message)
.at(0).clearValue()
.at(1).clearValue();
})
using saveValue function
how it works
this function allows you to save the value with a name
lets use the same example with the saveValue function
$('button').addEvent('click',()=>{
$('input').at(0).saveValue('firstname') /// save the value as firstname
$('input').at(1).saveValue('lastname') /// save the value as lasttname
/// the !!firstname and !!lastname well be replaced with thier values
$('input')
.at(2).setValue('Welcome !!firstname !!lastname')
.at(0).clearValue()
.at(1).clearValue();
//// the !!firstname will be replaced with the value of the firstname
//// the !!lastname will be replaced with the value of the lastname
/// you can save the value with any name you want
//and when you need to call it add `!!` befor it to replace it with the value
})
you can also use the inline code
$('button').addEvent('click',()=>{
$('input')
.at(0).saveValue('firstname')
.at(1).saveValue('lastname')
.at(2).setValue('Welcome !!firstname !!lastname')
.at(0).clearValue()
.at(1).clearValue();
})
| Function | Description |
|---|---|
| innerHTML(html) | replace the inside html of the element |
| innerHTMLAfter(html,number) | |
| outerHTML(html) | replace the element by a custom html code |
| outerHTMLAfter(html,number) | replace the element by a custom html code after a delay |
| replaceText(text) | replace the text Content of the element |
| replaceTextAfter(text,number) | replace the text Content of the element after a delay |
example
<button>click</button>$('button').addEvent('click',()=>{
$('button')
.replaceText('welcome !!!')
.replaceTextAfter('Back !!!',2000)
.outerHTMLAfter('<h1>hello world </h1>',4000);
})
| Function | Description |
|---|---|
| addClass(class) | add class to element |
| addClassAfter(class,number) | add class to element after a delay |
| removeClass(class) | remove class from the element |
| removeClassAfter(class,number) | remove class from the element after a delay |
| toggleClass(class) | remove class from the element if already exist and add it if not |
note you can pass your custom css as an object but you need to use camelcase insteade of kababcase , so you need to use backgroundColor instead of background-color , and borderRadius insead of border-radius .
example
.blue{
color:blue;
}<h1>hello world </h1>
<button>add class </button>
<button>remove class </button>
<button>toggle (add/remove)</button>$('button')
.at(0).addEvent('click',()=>{$('h1').addClass('blue')})
.at(1).addEvent('click',()=>{$('h1').removeClass('blue')})
.at(2).addEvent('click',()=>{$('h1').toggleClass('blue')})
| Function | Description |
|---|---|
| addCss({prop:'value'}) | add css to element |
| addCssAfter({prop:'value'},number) | add css to element after a delay |
| removeCss(prop) | remove css from the element |
| removeCssAfter(prop,number) | remove css from the element after a delay |
| addTransition() | add a transition effect to the element |
example
note : you can call addTransition function to add a transition effect while adding the css this function will add a transition property with the default value of 'all 0.4s ease 0s' you can change it by passing the transition value as a parameter like this addTransition('color 0.6s ease-in 0s');
<h1>hello world </h1>
<button>add css without addTransition </button>
<button>add css with addTransition </button>
$('button').at(0).addEvent('click',()=>{
$('h1').addCss(
{
backgroundColor: 'blue' ,
color: 'white'
})
}).at(1).addEvent('click',()=>{
/// add a custom ransition
$('h1').addTransition('background-color 0.6s ease-in-out 0s').addCss(
{
backgroundColor: 'green' ,
color: 'white'
})
})
this function allows you to add a keyup event handler and each time when you change the value this function checks if the value of the input match the regular expression if true then add your custom success classname else add your custom error classname
syntax
...addVerify(regExp,successClass , errorClass);example
create a success and error classNames
.success{
backgroud:green;
color:#fff;
}
.error{
backgroud:red;
color:#fff;
}
<input type="password" placeholder="password" />
/// check if the length of the input is 8 at least
$('input').addVerify(/^\w{8,}$/,'success','error');
/// example for email
$('input[type="email"]').addVerify(/^\w+@\w+.\w+$/,'success','error');
/// example for phone number
$('input').addVerify(/^(+2126|06)\d{8}$/,'success','error');
/// example for url
$('input').addVerify(/^(http:\/\/|https:\/\/)\w+.\w+\.\w+/,'success','error');