Tuesday 10 December 2013

JQuery Basics - Part 2

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.




No comments:

Post a Comment