JQuery basic usage for beginners

JQuery basic usage for beginners

JavaScript is a very useful concept in web development. JavaScript can be used to manipulate client side data and display. The web browser displays whatever has been supplied by the HTML code and the server side code response. But, they can be manipulated anywhere in between. JavaScript has the power to alter structures and information on a webpage before server code involvement or even after that.

JQuery basic usage is a very good option for developers who need swift and effective JavaScript functionalities with the minutest effort. JavaScript can be tough to learn if you are just a novice in coding. However, you can learn JQuery and implement the same functions in an easier means.

Learning JQuery basic usage

Let us start with the very basic element of JQuery. JQuery is a library that has inbuilt functions created for all JavaScript functionalities. Whenever we implement JQuery on the DOM (document object model) or the HTML structure of the webpage, we use the term “jQuery” or a “$” sign to bind a DOM element to the current action.

JQuery functions can be called anywhere in the webpage using a script tag – just like JavaScript codes. So, for example you want right div on your website turn green whenever a button is clicked. Now, this you cannot do with only CSS. Because using CSS, you either have to keep it whatever color it is or you must keep the right div green from the very beginning.

What we want is user interactive responding websites. For that, JavaScript is a must! See how simply JQuery does this job in real time user interaction –

Here’s the code for a JQuery basic usage (considering the right div has an id “right” and the button has the id “button”)

$(“#button”).click(function(){
	$(“#right”).css(“background-color”,”green”);
});

Also read the article JQuery change CSS for JQuery CSS functionalities.

The above code changes the background color only when the button is clicked, otherwise not. So, this click() function behaves like the JavaScript onClick method.

Some of the functions also allow callback functions as parameters. So, when the current bind function is complete, the callback function follows it – thus synchronizing the effects of the function smoothly one after the other. For JQuery basic usage you can try out these common functionalities.

Another important functionality is the focus() function. All JQuery event functions are called with a dot operator and then the function name. The focus() and blur() function are aliases of the JavaScript onFocus and onBlur functions. With the correct combination you can enable quick validation results and highly interactive interfaces. For example, the following code checks whether the input box has a value or not and gives a return result.

$(“input”).blur(function(){
	var value = $(this).val();
if(value.length == 0){
	$(this).css(“border”,”1px solid red”);
	$(this).val(“No input given”);	
}
});

A bit more of JQuery basic usage

Some of the other JQuery basic usage functions are the fadeIn, fadeout, slideIn and slideOut. These come very handy when you need to hide element from the DOM or show them up under certain conditions. The hide() and show() functions are also useful in these scenarios. But, the former methods give good looks to the hide / show effect.

JQuery basic usage can be helpful for you when validating on the client side as well. Data validation before passing on to the server is a good practice and reduces server load. JQuery offers fantastic tools for that. The validate() method does this for you. From checking emal formats to checking password formats – it has everything you need. You can even set compulsory fields if you want.

JQuery AJAX is a great functionality. Uploading pictures through AJAX, Updating database with AJAX, Retrieve data using JQuery PHP, etc. are several other functionalities possible with JQuery.

If you have already gained the momentum and want more, just dive into JQuery official website and start learning. I bet you can it very quickly.