jQuery Leaning Notes

Published on Thursday, October 10, 2013

All learning content reference to w3schools jQuary Tutorial.

jQuery is a JavaScript Library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery “reduce” JavaScript coding works, 1 line of jQuery code = many lines of JavaScript code (wraps them into methods that you can call with a single line of code.)

Basic jQuery syntax: $(selector).action()

A $ sign to define/access jQuery
A (selector) to “query (or find)” HTML elements
A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.   
$("p").hide() - hides all <p> elements.    
$(".test").hide() - hides all elements with class="test".    
$("#test").hide() - hides the element with id="test".

Ready Event:

$(document).ready(function(){    
// jQuery methods go here...     
});

Same as:

$(function(){     
// jQuery methods go here...     
});

Mouse hover(): The following code combination of mouseenter() and mouseleave() events

$("#p1").hover(function(){  //mouse enter   
  alert("You entered p1!");    
  },    
  function(){   //mouse leave    
  alert("Bye! You now leave p1!");    
});

About conflict using $ with other JavaScript framework:

var jq = $.noConflict();   
jq(document).ready(function(){    
  jq("button").click(function(){    
    jq("p").text("jQuery is still working!");    
  });    
});    

  
$.noConflict();   
jQuery(document).ready(function($){    
  $("button").click(function(){    
    $("p").text("jQuery is still working!");    
  });    
});