jQuery : as Cross Browser Solution :: Introduction
| Introduction to jQuery |
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery is a fast and concise JavaScript library created by John Resig in 2006.
jQuery Sample Code :
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
document.write("Hi, I am James Bond!");});
</script>
</head>
<body>
<h1>James Bond</h1>
</body>
</html>
| How to use jQuery? |
jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery –
- Lightweight – The jQuery is very lightweight library – about 19KB in size ( Minified and gzipped ).
- Event handling – The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
- DOM manipulation – The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
- AJAX Support – The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
- Animations – The jQuery comes with plenty of built-in animation effects which you can use in your websites.
- Cross Browser Support – The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
- Latest Technology – The jQuery supports CSS3 selectors and basic XPath syntax.
There are two ways to use jQuery.
- CDN Based Version – You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).
- Local Installation – You can download jQuery library on your local machine and include it in your HTML code.
1. CDN Based Version
You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.
We will use Google CDN version of the library throughout this article.
jQuery Sample Code using CDN:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
document.write("Hi, I am James Bond!");});
</script>
</head>
<body>
<h1>James Bond</h1>
</body>
</html>
2. Local Installation
You can download jQuery script from url https://jquery.com/download/
Now, you can place jquery-2.1.4.min.js file in a directory of your website, e.g. /script or any.
jQuery Sample Code using local:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "script/jquery-2.1.4.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
document.write("Hi, I am James Bond!");});
</script>
</head>
<body>
<h1>James Bond</h1>
</body>
</html>
How to write jQuery Scripts?
You can use below code inside script tag.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$("firstdiv").click(function() { alert("Hi I am James Bond!"); });
</script>
</head>
<body>
<div id = "firstdiv"> Click on this to see a jQuery alert box. </div>
</body>
</html>
Recent Comments