jQuery vs jQuery namespace:
we discuss jQuery and jQuery namespace, how we can use these methods in jQuery objects. For example we can use jQuery method as below.

$(document).ready( function()
{
$(“#name”).addClass(“blue”);
});

We have seen jQuery methods are called on jQuery objects as shown above; which are part of $.fn() namespace or jQuery prototypes. We also called as jQuery object methods.
$ vs $(): For new users their will a little confusion on $ namespace and $.fn namespace, let’s check difference between them.

Methods called on jQuery selections are in $.fn namespace, they automatically receive and return selection as this.

Methods called on $ namespace are utility prototype, they don’t work with selections, they are not automatically passed any arguments, the returned value is varied.
In some cases we found object methods and core methods are same. For example $.each() and .each().

In this case, we need to take care of picking correct method with the help of documentation. In this case, if you want to call a method jQuery selection, we refer .each()
If it is utility method, a method that is not called for selection, we refer explicitly as a method in the jQuery namespace: $.each().

Why do we use $(document).ready() ?

A web page can’t be manipulated safely DOM(Document Object Model) is ready for JavaScript code to execute.
Code included inside $(document).ready() will run once the entire page loaded not just DOM is ready.

Now let go for small example using these three jquery methods 

<!DOCTYPE html>
<html lang="en">
 
<head>
            	<title>Jquery example</title>
            	<meta charset="UTF-8">
            	<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
            	
</head>
<style type="text/css">
.blue{
            	color: blue;
            	font-size: 44px;
}          	
</style>
<body>
            	
<div align="center">
            	
            	<label id="name">JQuery First Tutorial</label>
 
</div><br>
 <div align="center">
 <button>Add Color</button>
 <button id="rmcolor">Remove Color</button>
  
</div>
</body>
</html>
<script type="text/javascript">
            	$(document).ready(function(){
 
                            	//jquery code runs here......
                            	$("button").click(function(){
 
          $("#name").addClass('blue');
 
                            	});
                            	$("#rmcolor").click(function(event){
 
                                            	$("label").removeClass('blue');
                            	});       	
 
 
            	});
 
</script>

As we discussed, here we also used events, here we need to know about DOM event?
There are different events available in jQuery, among them user events are very easy to use, most of these events use on elements or types into a form.

Mean that when a user clicks on the button as we written in the code above, the button had an event occur on it. Where user interactions are not only types of DOM events. There are many ways to listen to events on the webpage, among them, a click event is one which we used in the above example. Here jQuery objects have a lot of functions one of them is click(). Which resides in jQuery object’s prototype. We call the click method on the jQuery object and pass along an anonymous function event handler that’s going to be executed when a user clicks the button.