Detailed explanation of jQuery's core functions and event handling

 $(document).ready(function(){
  // Write your code here...
});
// The following is a shorthand $(function($) {
  // You can continue to use $ as an alias here...
});

 // Add a click event listener to the p tag $("p").on("click", function(){
	alert( $(this).text() );
});
// The second way of writing is equivalent to the above $("p").click(function(){
	alert( $(this).text() );
});

 // Remove all event listeners bound to the p tag $("p").off()
// Remove the click event listener bound to the p tag $("p").off("click")

 // Remove all event listeners bound to the p tag $("p").bind("click", function(){
  alert( $(this).text() );
});
// Bind multiple event types at the same time $('#foo').bind('mouseenter mouseleave', function() {
  alert();
});

 // Unbind all events of all paragraphs $("p").unbind()
// Unbind the paragraph's click event $("p").unbind("click")

 // When all paragraphs are clicked for the first time, display all their texts $("p").one("click", function(){
  alert( $(this).text() );
});

 <div style="background-color:red">
      <p>This is a paragraph. </p>
      <button>Click here</button>
  </div>

// When the button is clicked, hide or show the p element $("div").delegate("button", "click", function () {
      $("p").slideToggle();
  });

 // Remove all event handlers added by the delegate() method from the p element $("p").undelegate();
// Remove all click event handlers added by the delegate() method from the p element $("p").undelegate("click")

 // The table with the mouse hovering is added with a specific class $("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

 // The table with the mouse hovering is added with a specific class $("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

 // Trigger the change event of the selected element $(selector).change();

 // Trigger click events for all paragraphs in the page $("p").click();

 // Bind the "Hello World!" alert box to the double-click event of each paragraph on the page $("p").dblclick( function () { alert("Hello World!"); });

 // Log JavaScript errors on the server:
$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});

 // When the page loads, set the focus on the element with id 'login':
$(document).ready(function(){
  $("#login").focus();
});

 <p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

// After getting the focus, the animation will be triggered$("p").focusin(function() {
	$(this).find("span").css('display','inline').fadeOut(1000);
});

 // After getting the focus, the animation will be triggered $("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

 // To respond to keyboard keystrokes on the page, you can use the following code $(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // Different keys do different things // Different browsers have different keycodes // More details: http://unixpapa.com/js/key.html
    // ...
  }
});

 // Count the number of keystrokes in the input field $("input").keydown(function(){
  $("span").text(i+=1);
});

 // When a key is pressed, change the color of the text field $("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

 // When the mouse button is pressed, hide or show the element $("button").mousedown(function(){
  $("p").slideToggle();
});

 // When the mouse pointer enters (passes through) an element, change the background color of the element$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

 // When the mouse pointer leaves the element, change the background color of the element $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");}); // When the mouse pointer leaves the element, change the background color of the element $("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

 // Get the position of the mouse pointer in the page $(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

 // When the mouse moves away from the element, change the background color of the element:
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

 // When the mouse pointer is over an element, change the background color of the element$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

 // When the mouse button is released, hide or show the element $("button").mouseup(function(){
  $("p").slideToggle();
});

 // Pop up a warning window when changing the size of the page window$(window).resize(function(){
  alert("Stop it!");
});

 // Function executed when the page scroll bar changes:
$(window).scroll( function() { 
 	 alert("Stop it!");
});

 // Trigger the select event of all input elements:
$("input").select();

 // Submit the first form on this page:
$("form:first").submit();
// Prevent form submission:
$("form").submit( function () {
  return false;
} );

 // Pop up a warning box when the page is unloaded:
$(window).unload( function () { alert("Bye now!"); } );