Introduction to jQuery

Posted on by By Krupal, in Javascript | 0

What is jQuery?
– Before, We go further let me clear the very first doubt that jQuery is not a language. jQuery is a library written on top of the JavaScript. So it is a JavaScript library. It makes web development very easy. The biggest advantage of jQuery is that jQuery library is designed to keep the things very simple and reusable. It provides an easy way to apply CSS to any items and provides an easy mechanism for binding and unbinding events. Lengthy JavaScript code can easily be replaced by few lines of code in jQuery.

Why to use jQuery?
– It works on all browsers.
– Makes UI attractive.
– Change document’s content easily.
– It is fast and extensible.
– CSS can be easily applied on it.

How to use jQuery?
– No installation is required, we just need to add reference of the jquery.js.

<script src="Script/jquery.js" type="text/javascript"></script>

We have to copy the jquery.js and place it in script directory. CDN are also available through which we can directly include jQuery. Some common CDN are mentioned below:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"</script>
<script  type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

Below is an example of how we can apply CSS through jQuery.


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").addClass("important"); // by adding this class the header Helical IT Solutions turns into blue from black
});
});
</script>
<style>
.important {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>

<h1>Helical IT Solutions</h1>

<button>Apply CSS to Heading</button>

</body>
</html>
logo

Best Open Source Business Intelligence Software Helical Insight is Here

logo

A Business Intelligence Framework

Thanks,
Krupal Barot

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments