From this article we can see the usage and how to use the JQuery functions , samples and there usages.
$ : Is for the notation of Jquery.
. : Is used for the notation of Class
# : Is used for the notation of Id
document : specifies the HTML document
window: specifies the browser window.
ready() : Ready is used to execute the code only after the html document is loaded and ready.
$(document).ready(function(){
});
focus() : Focus is a event fire when the user focus on the particular element .
$(document).ready(function () {
$('#ka').focus(function() {
$('#div').html('element focused');
});
});
focusin() : Focus in is a event fires when user focus in the specified element.
$(document).ready(function () {
$('#ka').focusin(function() {
$('#div').html('element focused in');
});
});
focusout() : Focus out is a event fires when user focus out or leave from the specified element.
$(document).ready(function () {
$('#ka').focusout(function() {
$('#div').html('element focused out');
});
});
blur() : Is also like the Focus out, when the user remove his focus from the element tag.
$(document).ready(function () {
$('#ka').blur(function() {
$('#div').html('element focused out');
});
});
Multiple Selector : we can create a Jquery code multiple selector rather than single one by specify the id or class name with ,spaces.
$(document).ready(function () {
$('#button, #paragraph').click(function () {
$('#div').html('element clicked');
});
});
fadein() : It shows the specifies element in specified speed.
$('#button, #paragraph').click(function () {
$('#img').fadeIn(2000, 'swing', function() {
$('#div').html(' fade in completed');
});
});
});
fadeout() : it invisible the specified element in the specified speed
$('#button, #paragraph').click(function () {
$('#img').fadeOut(2000, 'swing', function() {
$('#div').html(' fade in completed');
});
});
});
attr() : It is used to get the value of a attribute of html element or set the value for the attribute.
$(document).ready(function () {
var div = $('#div').attr('hovertext');
});
<div id="div" hovertext="this is sample"></div>
val(): Gets the value of the html element.
$(document).ready(function() {
var textval = $('#txt').val();
alert(textval);
});
length(): Get the length of the specified element
var textval = $('#txt').text().length;
* : indicates get the all elements
[ ] : specifies the conditional symbol
find(): Is used to find the element inside a specified element.
$('input[type="text"]').find('*').last().addClass('bold').click(function() {
$(this).prevAll().toggle();
}).prevAll().hide(); ;
even, odd : Selection
$('table tr:even').css('background-color', 'yellow');
$('table tr:odd').css('background-color', 'yellow');
load() : Event fires when the specified element is loaded
$(window).load(function () {
alert('window loaded');
});
unload() : Event fires when the specified element is unloaded
$(window).unload(function () {
alert('window unloaded');
});
contains() : specifies whether the given string or data have the value specified
$('#search').keyup(function() {
var searchname = $(this).val();
$('#names li').removeClass('high');
if (jQuery.trim(searchname) != '')
$('#names li:contains("' + searchname + '")').addClass('high');
});
change() : Event fires when the specified element undergoes and change in the attributes.
$('#list').change(function() {
var listvalue = $(this).val();
$('#text_feed').html(' <a> you have selected ' + listvalue + '</a>');
});
next() : This function will give the element next to the specified one.
$('input[type="file"]').change(function () {
$(this).next().attr('disabled', false);
}).next().attr('disabled', true);
removeattribute() : This is used to remove the attribute from the element tag.
$('#names').removeAttr('hovertext');
click() : This event fires when user click on the specified element.
$('#names').click(function() {
});
dblclick() : This event fires when user double click on the specified element.
$('#names').dblclick(function () {
});
keyup() : This event fires when the user releases the key in the keyboard
$('#search').keyup(function () {
var searchname = $(this).val();
$('#names li').removeClass('high');
if (jQuery.trim(searchname) != '')
$('#names li:contains("' + searchname + '")').addClass('high');
});
keydown() : This event fires when the users press the key in the keyboard.
$('#search').keydown(function () {
var searchname = $(this).val();
$('#names li').removeClass('high');
if (jQuery.trim(searchname) != '')
$('#names li:contains("' + searchname + '")').addClass('high');
});
toggle() : This function is used to write the two function actions for a single event. So it will acts as one in first click and acts as another one in the second click
$('#btnsh').click(function() {
$('#Data').toggle();
});
hover() : This event fires when user brings the mouse hover the specified element.
$('button').hover(function() {
alert('mouse hovered');
});
scroll() : This event fires when the user scroll the specified element.
$('#textareas').scroll(function () {
$('#Data').html($(this).scrollTop());
});
mouseenter : This event fires when the mouse enter on the specified element.
$('.hover').mouseenter(function(e) {
var desc = $(this).attr('hovertext');
$('#feedback').html(desc).show();
$('#feedback').css('left', e.clientX + 20).css('top', e.clientY + 10);
});
mouseleave : This event fires when the mouse leave from the specified element.
$('.hover').mouseleave(function () {
$('#feedback').hide();
});
bind() : It is used to bind the same action for one or more events
$('p').bind('mouseenter mouseleave', function() {
$(this).toggleClass('bold');
});
after() : It is used to find the element present after the given one.
$('body').on('click', '.duplicate', function()
$(this).after('<input type="button" class="duplicate" value="submit" />');
});
live() or on() : It is used to add the element in the document with all event s and class bindings live to the running document.
$('body').on('change', '.file', function () {
$(this).after('<input type="file" class="file" />');
});
From this article i hope you can understand some of the basics functions and there usages with some sampels codes,We can see some more stuffs in Jquery in Next article.