Pages

Sunday 8 July 2012

jquery


jQuery is a JavaScript Library whivh greatly simplifies JavaScript programmingand is easy to learn.Everyone shall mess up saying we already have javascript than what is use of jQuery than the answer is (Write less, do more)this is the moto of jQuery.jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
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:

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 calledSizzle.

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.

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.

Lightweight: The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).

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.

For downloading latest version of jquery click on the below link copy the content at save it as jquery-1.3.2.min.js file in a directory of your website, e.g. /jquery.


A simple program describing syntax of jquery is as below:-
<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" src="/jquery/jquery-1.7.2.min.js"> //including jquery file
</script> 
   <script type="text/javascript">
      // you can add our javascript code here 
   </script>   
</head>
<body>
........ // your content here
</body>
</html>

jquery functions and examples:-

1.$(this).hide():-
This function Demonstrates the jQuery hide() method, hiding the current HTML element.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>
</head>

<body>
<button>Click me</button>
</body>
</html>
Example Explanation:-
The output of above code is a simple button where Click me is 
written and when we click on that it disappers providing a 
dynamic sensation.similarly we can write p,.test,#test in place 
of this as we now this can only be applied to one elements 
Demonstrates the jQuery hide() method, hiding all <p> elements.

No comments:

Post a Comment