Global namespace for using Kimbo functions
Perform an asynchronous HTTP (Ajax) request.
Parameters
'GET' or 'POST'. Default value is 'GET'.true if you want synchronous requests set option to false.new XMLHttpRequest() object by default.false by defualt.'application/x-www-form-urlencoded; charset=UTF-8'.Returns object The native xhr object.
Usage
Get a username passing an id to the /users url
$.ajax({
url '/users',
data: {
id: 3
},
success: function (response, responseMessage, xhr, settings) {
// Success...
},
error: function (response, responseMessage, xhr, settings) {
// Error...
}
});
Default ajax settings object.
Usage
If you want to change the global and default ajax settings, change this object properties:
$.ajaxSettings.error = function () {
// Handle any failed ajax request in your app
};
$.ajaxSettings.timeout = 1000; // 1 second
Camelize any dashed separated string
Parameters
Returns string camelCase string
Usage
$.camelCase('background-color');
Result:
'backgroundColor'
Merge the contents of two or more objects together into the first object.
Parameters
true the passed objects will be recursively merged.Returns object The extended target or a new copy if target is an empty object.
Usage
When passing two or more objects, all properties will be merged into the target object.
var obj1 = { msg: 'hi', info: { from: 'Denis' }};
var obj2 = { msg: 'Hi!', info: { time: '22:00PM' }};
// Merge obj1 into obj2
$.extend(obj1, obj2);
// Now obj1 is equal to:
{ msg: 'Hi!', info: { time: '22:00PM' }}
If an empty target object is passed, none of the other objects will be directly modified
// Pass an empty target
var obj3 = $.extend({}, obj1, obj);
To do a recursive merge, pass true as first argument, then the objects to merge
$.extend(true, obj1, obj2);
// Obj1 will be:
{ msg: 'Hi!', info: { from: 'Denis', time: '22:00PM' }}
Iterator function that can be used to seamlessly iterate over both objects and arrays.
Parameters
Returns object The original array or object
Usage
// Iterating array
$.forEach(['a', 'b', 'c'], function (index, value) {
alert(index + ': ' + value);
});
// Iterating object
$.forEach({name: 'Denis', surname: 'Ciccale'}, function (key, value) {
alert(key + ': ' + value);
});
Load data from the server using HTTP GET request.
Parameters
Usage
$.get('url/users.php', { id: '123' }, function (data) {
// Success
console.log('response:', data);
});
This method is a shorthand for the $.ajax
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Load data from the server using HTTP POST request.
Parameters
Usage
$.getJSON('url/test.json', { id: '2' }, function (data) {
// Success
console.log('response:', data);
});
This method is a shorthand for the $.ajax
$.ajax({
url: url,
dataType: 'json',
success: success
});
To get json data with jsonp:
$.getJSON('http://search.twitter.com/search.json?callback=?', 'q=#javascript', function (data) {
console.log(data);
});
Load a JavaScript file from the server using a GET HTTP request, then execute it.
Parameters
Usage
$.getScript('url/script.js', function (data) {
// Success
console.log('response:', data);
});
This method is a shorthand for the $.ajax
$.ajax({
url: url,
dataType: 'script',
success: success
});
Determine if the parameter passed is an array object.
Parameters
Returns boolean According wether or not it is an array object.
Usage
$.isArray([]); // True
$.isArray({}); // False
$.isArray('test'); // False
Determine if the parameter passed is boolean.
Parameters
Returns boolean According wether or not it is boolean.
Usage
$.isBoolean(false); // True
$.isBoolean(3); // False
Determine if the parameter passed is an empty object.
Parameters
Returns boolean According wether or not it is an empty object.
Usage
$.isEmptyObject({}); // True
$.isEmptyObject([]); // True
$.isEmptyObject([1, 2]); // False
Determine if the parameter passed is a Javascript function object.
Parameters
Returns boolean According wether or not it is a function.
Usage
var myFunction = function () {};
$.isFunction(myFunction); // True
var something = ['lala', 'jojo'];
$.isFunction(something); // False
Determine if the current platform is a mobile device, (otherwise is a desktop browser).
Parameters
Returns boolean According wether or not is a mobile device.
Usage
$.isMobile(); // False
Determine if the parameter passed is an number.
Parameters
Returns boolean According wether or not it is a number.
Usage
$.isNumeric(3); // True
$.isNumeric('3'); // False
Determine if the parameter passed is a Javascript plain object.
Parameters
Returns boolean According wether or not it is a plain object.
Usage
$.isObject({}); // True
$.isObject([]); // False
$.isObject('test'); // False
Determine if the parameter passed is a string.
Parameters
Returns boolean According wether or not it is a string.
Usage
$.isString('test'); // True
$.isString({ name: 'asd' }); // False
Determine if the parameter passed is the window object.
Parameters
Returns boolean According wether or not it is the window object.
Usage
$.isWindow(window); // True
$.isWindow({ window: window }); // False
Create an Array from the given object
Parameters
Returns array A new array.
Usage
var lis = $('li'); // Kimbo object
var arr = $.makeArray(lis);
console.log($.isArray(lis)); // False
console.log($.isArray(arr)); // True
Translate all items in an array or object to new array of items.
Parameters
Returns array A new array.
Usage
var arr = ['a', 'b', 'c'];
arr = $.map(arr, function (element, index) {
return element.toUpperCase() + index;
});
console.log(arr); // ['A0', 'B1', 'C2']
Or wit an object
var obj = {a: 'a', b: 'b', c: 'c'};
obj = $.map(arr, function (key, value) {
return key + ': ' + value.toUpperCase();
});
console.log(obj); // ['a: A', 'b: B', 'c: C']
Merge the contents of two arrays into the first array passed.
Parameters
Returns array The first array merged with the second.
Usage
$.merge(['a', 'b'], ['c', 'd']);
Result:
['a', 'b', 'c', 'd']
Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
Parameters
Usage
var obj = { name: 'Denis', last: 'Ciccale' };
var serialized = $.param(obj); // 'name=Denis&last=Ciccale'
Parses a well-formed JSON string and returns the resulting JavaScript object.
Parameters
Returns object A JavaScript object.
Usage
var obj = $.parseJSON('{"name":"Denis"}');
console.log(obj.name === 'Denis'); // True
Parses a string into an XML document.
Parameters
Returns object A JavaScript object.
Usage
var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>"
var xmlDoc = $.parseXML(xml);
$(xmlDoc).find('title'); // 'RSS Title'
Load data from the server using HTTP POST request.
Parameters
Usage
$.post('url/users.php', { user: 'denis', pass: '123' }, function (data) {
// Success
console.log('response:', data);
});
This method is a shorthand for the $.ajax
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
Determine the internal JavaScript [[Class]] of an object.
Parameters
Returns string Type of the object.
Usage
$.typeOf('i am a string'); // 'string'
$.typeOf(/(\.regexp?)/); // 'regexp'
$.typeOf(null); // 'null'
$.typeOf(undefined); // 'undefined'
$.typeOf(window.notDefined); // 'undefined'
$.typeOf(function () {}); // 'function'
$.typeOf({key: 'value'}); // 'object'
$.typeOf(true); // 'boolean'
$.typeOf([]); // 'array'
$.typeOf(new Date()); // 'date'
$.typeOf(3); // 'number'
Kimbo object collection.All methods called from a Kimbo collection affects all elements in it.
Add elements to the current Kimbo collection.
Parameters
Returns object The merged Kimbo collection.
Usage
<ul id="menu1">
<li>Apple</li>
<li>Orange</li>
</ul>
<ul id="menu2">
<li>Lemon</li>
<li>Banana</li>
</ul>
Get the items from the #menu1 and add the ones from #menu2, all the following ways will produce the same collection
$('#menu1 li').add('#menu2 li');
or
$('#menu1 li').add('li', '#menu2');
or
$('#menu1 li').add($('#menu2 li'));
Adds a class to all matched elements.
Parameters
Returns object Original matched collection.
Usage
<p>I want to be green</p>
<script>
$('p').addClass('green');
</script>
Now it's green
<p class="green">I want to be green</p>
You can add multiple classes separated by a space
<p>Add classes to me</p>
<script>
$('p').addClass('green big width100');
</script>
All classes added and they won't be repetead if you try to add an existing one
<p class="green big width100">Add classes to me</p>
Insert content to the end of all elements matched by Kimbo.
Parameters
Returns object Original matched collection.
Usage
<div class="container">
<p class="lorem">Lorem </p>
<p class="lorem">Lorem </p>
</div>
Insert content
$('.lorem').append('<em>ipsum</em>')
Each element gets the content
<div class="container">
<p class="lorem">Lorem <em>ipsum</em></p>
<p class="lorem">Lorem <em>ipsum</em></p>
</div>
You can also get an element and insert it elsewhere
$('.container').append($('.ipsum'))
The selected element will be moved, not cloned.
<div class="container">
<p class="lorem">Lorem</p>
<p class="lorem">Lorem</p>
<p class="ipsum">Ipsum</p>
</div>
Get an attribute value from one element or set attributes to all matched elements.
Parameters
Returns string Attribute value, only if name was passed.
Returns object Original matched collection when setting a value.
Usage
<a href="http://kimbojs.com">Go to Kimbojs.com</a>
Get href attribute
$('a').attr('href'); // Http://kimbojs.com
Set a new attribute
$('a').attr('title', 'Go to Kimbojs.com');
Now element has a title attribute
<a href="http://kimbojs.com" title="Go to Kimbojs.com">Go to Kimbojs.com</a>
Get the children of all matched elements, optionally filtered by a selector.
Returns object Kimbo object
Usage
Suppose a page with the following HTML:
<div class="demo">
<p>This</p>
<p>is</p>
<p>a</p>
<p>demo.</p>
</div>
Get all children of .demo:
$('.demo').children(); // Al <p> tags inside .demo div
Another example passing an specific selector:
<form>
<input type="text" name="name" />
<input type="text" name="last" />
<input type="submit" value="Send" />
</form>
Get only the children that are text type elements:
$('form').children('input[type="text"]'); // Only name and last inputs
Clones a DOM node.
Parameters
Returns object Original matched collection.
Usage
<p class="asd foo qwe">Lorem ipsum.</p>
var p1 = $('p'); // Grab the p element
var p2 = p1.clone(); // Clone p1 into p2
console.log(p2 === p1); // False
Get a Kimbo collection that matches the closest selector
Parameters
Returns object Kimbo object
Usage
Here we have a nested unordered lists:
<ul>
<li>
Item 1
<ul class="ul-level-2">
<li class="item-1-1">Item 1.1</li>
<li class="item-1-2">Item 1.2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
You can find the containing ul of the items in the nested ul:
$('.item-1-1').closest('ul');
This will return ul.level-2 element
Determine whether an element is contained by the current matched element.
Parameters
Returns boolean true if it is contained, false if not.
Usage
<div id="container">
<p id="inside">Inside paragraph</p>
</div>
<p id="outside">Outside paragraph</p>
The paragraph with id "inside" is actually contained by "#container"
$('#container').contains('#inside'); // True
The paragraph ourside is not contained
var outside_p = $('#outside');
$('#container').contains(outside_p); // False
Get the HTML content of an iframe
Returns object Kimbo object
Usage
Suppose an iframe loading an external page:
<iframe src="http://api.kimbojs.com"></iframe>
Find the body element of the contents of that iframe:
$('iframe').contents().find('body');
Get the css value of a property from one element or set a css property to all matched elements.
Parameters
Returns object Original matched collection.
Usage
<p>Hello dude!</p>
Modify some styles
$('p').css('color', 'red'); // Now the text is red
The HTML will look like this:
<p style="color: red;">Hello dude!</p>
You can also pass an object for setting multiple properties at the same time
$('p').css({
color: 'red',
'font-size': '30px',
backgroundColor: 'blue'
});
Properties can be dash-separated (add quotes) or camelCase.
<p style="color: red; font-size: 30px; background-color: blue">Hello dude!</p>
Store or retrieve elements dataset.
Parameters
Returns object Original matched collection.
Usage
<div id="panel"></div>
Set some data to the panel:
$('#panel').data('isOpen', true);
No a data-* attribute was added
<div id="panel" data-isOpen="true"></div>
We can retrieve the data
$('#panel').data('isOpen'); // 'true'
Iterate over a Kimbo objct, executing a function for each element.
Parameters
Returns object Kimbo object
Usage
Here we have an unordered list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can iterate over all the list items and execute a function
$('li').each(function (el, index, collection) {
console.log('index of ' + $(this).text() + ' is: ' + index);
});
This will log the following message
index of Item 1 is: 0
index of Item 2 is: 1
index of Item 3 is: 2
Remove all child nodes from the DOM of the elements in the collection.
Returns object Original matched collection.
Usage
<div class="container">
<p class="lorem">Lorem</p>
<p class="lorem">Lorem</p>
</div>
Empty .container
$('.container').empty();
All elements inside ".container" are removed from the DOM
<div class="container"></div>
Reduce the matched elements collection to the one at the specified index.
Parameters
Returns object Kimbo object at specified index.
Usage
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Get 3rd element, index always start at 0, so to get the 3rd we need to pass the number 2.
$('li').eq(2); // Item 3
Filter element collection by the passed argument.
Parameters
Returns object Filtered elements collection.
Usage
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
Get even items.
$('li').filter(':nth-child(even)').addClass('even');
Only even items were affected.
<ul>
<li>One</li>
<li class="even">Two</li>
<li>Three</li>
<li class="even">Four</li>
</ul>
Using a function(index, element)
You can also filter the collection using a function, receiving the current index and element in the collection.
$('li').filter(function (index, element) {
return index % 3 == 2;
}).addClass('red');
This will add a 'red' class to the third, sixth, ninth elements and so on...
Filter by DOM or Kimbo object
You can also filter by a DOM or Kimbo object.
$('li').filter(document.getElementById('id'));
// Or a Kimbo object
$('li').filter($('#id'));
Find descendant elements for each element in the current collection.
Parameters
Returns object Kimbo object
Usage
Here we have some HTML
<div id="container">
<p>Demo</p>
<div class="article">
<p>This is an article</p>
<p>with some paragraphs</p>
</div>
</div>
You can find all paragraph elements inside the article:
$('.article').find('p');
Reduce the matched elements collection to the first in the set.
Returns object First Kimbo object of the collection
Usage
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Get only the first element
$('li').first(); // Item 1
Retrieve native DOM elements from the current collection
Parameters
Returns array object An array of the native DOM elements or the specified element by index matched by Kimbo.
Usage
<ul>
<li id="foo"></li>
<li id="bar"></li>
</ul>
Get standard array of elements
$('li').get(); // [<li id="foo">, <li id="bar">]
Get the first element
$('li').get(0); // <li id="foo">
Get the last element
$('li').get(-1); // <li id="bar">
Determine whether any matched elements has the given class.
Parameters
Returns object Original matched collection.
Usage
<p class="asd foo qwe">Lorem ipsum.</p>
Check if the element has the class 'foo'
$('p').hasClass('foo'); // True
You could also check if it has multiple classes
$('p').hasClass('qwe asd'); // True
Get the current height of the first element or set the height of all matched elements.
Parameters
Returns number the actual height of the element if no parameter passed.
Returns object Kimbo object.
Usage
<style>
div { height: 100px; }
</style>
<div>Actual height is 100px</div>
Get the height:
$('div').height(); // 100
Change the height:
$('div').height(200); // Now its height is 200
Or passing a specific unit:
$('div').height('50%'); // Now its height is 50%
A shortcut method to register moseenter and/or mouseleave event handlers to the matched elements.
Parameters
Usage
Suppose a div element:
<div id='box'></div>
Register hover event
var fnOver = function () { console.log('enter'); };
var fnOut = function () { console.log('leave'); };
$('.box').hover(fnOver, fnOut);
When the cursor enters the .box element the console will log:
'enter'
When the cursor leaves the .box element the console will log:
'leave'
Get the HTML content of the first element in the set or set the HTML content of all the matched elements.
Parameters
Returns string a string value of the HTML content of the element if no parameter passed.
Returns object current Kimbo object.
Usage
Get the HTML content of an element
<p><span>Demo text<span></p>
without passing any parameter to the function:
$('p').html(); // '<span>Demo tetxt</span>'
To replace the HTML content of the paragraph pass a string parameter to the function:
$('p').html('<strong>Another content</strong>');
Now the text content was replaced:
<p><strong>Another content</strong></p>
Check the current elements collection against a selector, object or function.
Returns boolean
Usage
<ul>
<li>Click the <em>Apple</em></li>
<li><span>Click the Orange</span></li>
<li>Or the Banana</li>
</ul>
Test if the current clicked element is an <li> element.
$('ul').click(function (event) {
var $target = $(event.target);
if ($target.is('li')) {
$target.css('background-color', 'red');
}
});
Reduce the matched elements collection to the last in the set.
Returns object Last Kimbo object of the collection
Usage
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Get only the last element
$('li').last(); // Item 3
The length of the current Kimbo collection.
Returns number Integer representing the lenght of the current collection.
Usage
Having these paragraphs:
<p>one</p>
<p>two</p>
<p>three</p>
Grab them and check for the length property:
$('p').length; // 3
Execute a function for each element in the collection, producing a new Kimbo set with the returned values
Parameters
Returns object Kimbo object
Usage
Here we have an unordered list:
<ul>
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="item3">Item 3</li>
</ul>
You can call a function for each element to create a new Kimbo object
$('li').map(function (el, index) {
return this.id;
}).get().join();
This will produce a list of the item ids.
"item1,item2,item3"
Remove an event handler to the selected elements for the specified type, or all of them if no type defined.
Parameters
Usage
Suppose a button element:
<button id='btn'>click me</button>
Register a click event handler
$('#btn').on('click', function (event) {
console.log('clicked!', event);
});
Remove the handler
$('#btn').off('click');
Also you could specify the handler for example:
var firstFunction = function () { console.log('first fn'); };
var secondFunction = function () { console.log('second fn'); };
var btn = $('#btn');
btn.click(firstFunction);
btn.click(secondFunction);
If you want to remove the click event only for the second function, do this:
btn.off('click', secondFunction);
Or if you want to remove All handlers (click and any other attached):
btn.off();
Add an event handler to the selected elements.
Parameters
event.data when an event is triggered.Usage
Suppose a button element:
<button id='btn'>click me</button>
Register a click event handler
$('#btn').on('click', function (event) {
console.log('clicked!', event);
});
There are shorthands for all events for example:
$('#btn').click(function (event) {
console.log('clicked!', event);
});
Passing some data when registering the handler:
$('#btn').on('click', { name: 'denis' }, function (event) {
// Data passed is inside event.data
console.log('name:', event.data.name);
});
Here is a list for all the shorthand methods available:
'blur', 'change', 'click', 'contextmenu', 'dblclick', 'error',
'focus', 'keydown', 'keypress', 'keyup', 'load', 'mousedown', 'mouseenter', 'mouseleave',
'mousemove', 'mouseout', 'mouseup', 'mouseover', 'resize', 'scroll', 'select', 'submit', 'unload'
Get the parent of each element matched in the current collection.If a selector is specified, it will return the parent element only if it matches that selector.
Returns object Kimbo object
Usage
Suppose a page with this HTML:
<ul>
<li class="item-a">Item 1</li>
<li class="item-b">Item 2</li>
</ul>
Get the parent element of .item-a
$('.item-a').parent(); // Ul
Insert content to the beginning of all elements matched by Kimbo.
Parameters
Returns object Original matched collection.
Usage
<div class="container">
<p class="lorem"> Lorem</p>
<p class="lorem"> Lorem</p>
</div>
Insert content
$('.lorem').prepend('<em>ipsum</em>')
Each element gets the content
<div class="container">
<p class="lorem"><em>ipsum</em> Lorem</p>
<p class="lorem"><em>ipsum</em> Lorem</p>
</div>
You can also get an element and insert it elsewhere
$('.container').prepend($('.ipsum'))
The selected element will be moved, not cloned.
<div class="container">
<p class="ipsum">Ipsum</p>
<p class="lorem">Lorem</p>
<p class="lorem">Lorem</p>
</div>
Get the immedeately previous sibling of each element in the current collection.If a selector is specified, it will return the element only if it matches that selector.
Returns object Kimbo object
Usage
Suppose a page with this HTML:
<ul>
<li class="item-a">Item 1</li>
<li class="item-b">Item 2</li>
</ul>
Get the parent element of .item-a
$('.item-b').prev(); // .item-a
Execute a callback after de DOM is completely loaded
Parameters
Returns object The original element
Usage
$(document).ready(function () {
console.log('the DOM is loaded!');
});
Or using the shortcut (recommended)
$(function () {
console.log('the DOM is loaded!);
});
Remove all matched elements from the DOM.Similar to $(…).empty but .remove() removes the element itself
Returns object Original matched collection.
Usage
<div class="container">
<p class="lorem">Lorem</p>
<p>Lorem</p>
</div>
Remove one element
$('.lorem').remove();
The result element is:
<div class="container">
<p>Lorem</p>
</div>
Removes an attribute from all matched elements.
Parameters
Returns object Original matched collection.
Usage
<a href="http://kimbojs.com" title="Go to Kimbojs.com">Go to Kimbojs.com</a>
Remove the title attribute
$('a').removeAttr('title');
Now the element has no title
<a href="http://kimbojs.com">Go to Kimbojs.com</a>
Removes a class to all matched elements.
Parameters
Returns object Original matched collection.
Usage
<p class="big green title float-rigth">Lorem ipsum</p>
Remove a specific class from the paragraph:
$('p').removeClass('green');
The specified class was removed:
<p class="big title float-right">Lorem ipsum</p>
You can remove multiple classes separating them by a space when calling the function:
$('p').removeClass('big title');
Now only one class left:
<p class="float-right">Lorem ipsum</p>
You can remove all classes just calling .removeClass() without parameters
$('p').removeClass();
All classes were removed including the class attribute:
<p>Lorem ipsum</p>
Remove data from the element dataset.
Parameters
Returns object Original matched collection.
Usage
<div id="panel" data-isOpen="true"></div>
Remove data associated to the panel div:
$('#panel').removeData('isOpen');
Data attribute and value was removed:
<div id="panel"></div>
data-isOpen is undefined
$('#panel').data('isOpen'); // Undefined
Display all matched elements.
Returns object Original matched collection.
Usage
<p style="display: none;">Lorem</p>
Show it
$('p').show();
Now it's visible
<p style="display: block;">Lorem</p>
Get the immedeately previous sibling of each element in the current collection.If a selector is specified, it will return the element only if it matches that selector.
Returns object Kimbo object
Usage
Suppose a page with this HTML:
<ul>
<li class="item-a">Item 1</li>
<li class="item-b">Item 2</li>
</ul>
Get the parent element of .item-a
$('.item-b').prev(); // .item-a
Reduce the matched elements collection to a subset specified by a range of indices
Parameters
Returns object Reduced Kimbo object collection in the range specified
Usage
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
This will add the class selected to Item 3, 4 and 5, as the index starts at 0
$('li').slice(2).addClass('selected');
This will select only Items 3 and 4
$('li').slice(2, 4).addClass('selected');
Negative index
Here only Item 4 will be selected since is the only between -2 (Item 3) and -1 (Item 5)
$('li').slice(-2, -1).addClass('selected');
Get the text of the first element in the set or set the text of all the matched elements.
Parameters
Returns string string value of the text content of the element if no parameter passed.
Returns object current Kimbo object.
Usage
Get the text content of an element
<p>Demo text</p>
without passing any parameter to the function:
$('p').text(); // 'Demo text'
To replace the text of the paragraph pass a string parameter to the function:
$('p').text('Another text');
Now the text content was replaced:
<p>Another text</p>
Removes a class to all matched elements.
Parameters
Returns object Original matched collection.
Usage
<p class="foo">Lorem ipsum.</p>
<script>
$('p').toggleClass('foo');
</script>
The p element has the class foo soo it will be removed
<p>Lorem ipsum.</p>
Execute all handlers attached to the matched elements for the fiven event type.
Parameters
event.data when an event is triggered.Usage
Suppose a button element:
<button id='btn'>click me</button>
Register a click event handler
$('#btn').on('click', function (event, data) {
console.log('name', data.name);
});
Trigger the event programatically passing some data:
$('#btn').trigger('click', { name: 'denis' });
// 'name denis'
Allow the handler to recieve multiple data:
$('#btn').on('click', function (event, name, last) {
console.log('name', name);
console.log('last', last);
});
$('#btn').trigger('click', ['denis', 'ciccale']);
// Name denis
// Last ciccale
Get the current value of the first element in the set or set the value of all the matched elements.
Parameters
Returns string the current value of the first element if no parameter passed
Returns object current Kimbo object
Usage
Get the value of a form element:
<input type="text" name="color" value="red" />
without passing any parameter to the function:
$('input').val(); // 'red'
To change the value of the input pass a string parameter to the function:
$('input').val('blue');
Now the value was changed:
$('input').val(); // 'blue'
Get the current width of the first element or set the width of all matched elements.
Parameters
Returns number the actual width of the element if no parameter passed.
Returns object Kimbo object.
Usage
<style>
div { width: 100px; }
</style>
<div>Actual width is 100px</div>
Get the width:
$('div').width(); // 100
Change the width:
$('div').width(200); // Now its width is 200
Or passing a specific unit:
$('div').width('50%'); // Now its width is 50%