jQuery is a cross-browser JavaScript library with the ultimate goal of simplifying client-side scripting. jQuery is free, open source software.
The jQuery library contains features that allow for HTML element selection and manipulation, HTML event functions, CSS manipulation, JavaScript
animation, and more. Web developers are able to use jQuery in conjunction with server-side scripting languages such as JSP, ASP, ASP.NET, PHP and
CGI.
Browser Requirements
The browser requirements for running jQuery are not very restricted. The following browser versions should be fully compatible with the
latest versions of jQuery:
- Firefox 2.0+
- Internet Explorer 6+
- Safari 3+
- Opera 10.6+
- Chrome 8+
Downloading jQuery
The best place to get the latest version of jQuery is from their site. Aside from downloading the latest version
and storing it locally with your web files, you can also link to several content delivery networks (CDNs) such as Google, Microsoft, and the jQuery
CDN that are referenced on the jQuery website. For example, if you download the latest copy, you can add it to your web page as shown in the following
example:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Instead of downloading and hosting jQuery within your website, another approach is reference it from a CDN (Content Delivery Network). Both Microsoft
and Google host different versions of jQuery. CDN's will ensure sure that once a user requests a file from it, the file is served from a server
closest to the user. Simply change the src attribute and update it with the URL of
the file. For example, http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js or https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Basic Example
The following example demonstrates the jQuery hide() method, hiding the div element in an HTML document.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
padding:50px;
background-color:#666666;
color:#ffffff;
text-align:center;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div").click(function () {
$("div").hide("slow");
});
});
</script>
</head>
<body>
<div>
Click anywhere inside of this div element.
</div>
</body>
</html>
Click anywhere inside of this div element.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
