jquery learning

jquery_namespaced_event.js

//namespacing event 
$( 'li' ).on( 'click.logging', function() {
  console.log( 'a list item was clicked' );
});

$( 'li' ).on( 'click.analytics', function() {
  doSomethingElse();
});

$( 'li' ).off( 'click.logging' );

//===========================================

//event value

$( document ).on( 'click', function( event ) {
  console.log( event.type );    // The event type, eg. "click"
  console.log( event.which );   // The button or key that was pressed.
  console.log( event.target );  // The originating element.
  console.log( event.pageX );   // The document mouse X coordinate.
  console.log( event.pageY );   // The document mouse Y coordinate.
});

//===========================================

//create and modify jQuery default option fx

// re-set an existing predefined speed
jQuery.fx.speeds.fast = 50;

// create a new pre-defined speed
jQuery.fx.speeds.turtle = 3000;

// Since we've re-set the 'fast' speed, this will now animate over the
// course of 50 milliseconds
$( '.hidden' ).hide( 'fast' );

// After they are created, we can use custom speeds just as we use the
// built-in speeds
$( '.other-hidden' ).show( 'turtle' );

//=============================================

//ajax 

// Create the "callback" functions that will be invoked when...

// ... the AJAX request is successful
var updatePage = function( resp ) {
  $( '#target').html( resp.people[0].name );
};

// ... the AJAX request fails
var printError = function( req, status, err ) {
  console.log( 'something went wrong', status, err );
};

// Create an object to describe the AJAX request
var ajaxOptions = {
  url: '/data/people.json',
  dataType: 'json',
  success: updatePage,
  error: printError
};

// Initiate the request!
$.ajax(ajaxOptions);


//or other method

$.get( '/data/people.html', function( html ){
  $( '#target' ).html( html );
});

$.post( '/data/save', { name: 'Rebecca' }, function( resp ) {
  console.log( resp );
});

//other ajax trick

$( 'form' ).submit(function( event ) {
  event.preventDefault();

  var form = $( this );

  $.ajax({
    type: 'POST',
    url: '/data/save',
    data: form.serialize(),
    dataType: 'json',
    success: function( resp ) {
      console.log( resp );
    }
  });
});

//=========================================================

//JSON PARSER

JSON.stringify();
jQuery.parseJSON();