Pages - পৃষ্ঠাসমূহ

Jquery beginner tutorial - how to start jquery

About Jquery
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is designed to change the way that you write JavaScript.
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTMl
jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM objects, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Using these facilities, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages.

More about Jquery
Jquery

Jquery UI

Wikipedia/jquery
Hide codes Show codes

Learning jquery

Jquery is a new kind of JavaScript Library. It works by write less do more . What does jQuery code look like? Now i give some example to describe the jquery library
Download this jquery library Jquery Framework or you can add this link. Here are some links also

http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js



Syntax

<script type="text/javascript">
 $(universal_selector).events(function(){
  //now start your code here
 });
</script>

Syntax example

<script type="text/javascript">
 $(document).ready(function(){
  //now start your code here
 });
</script>

Add the framework link from web of 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

Add the framwork from your pc

<script type="text/javascript" src="jquery.min.js"></script>
//put in same folder the jquery.js file

Your complete code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  //now start your code here
 });
</script>
When you start to learn the jquery your prerequsit is learn css & HTML

Hide and show your text or anything

<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(".show").click(function(){
   $("p").show();
  });
  $(".hide").click(function(){
   $("p").hide();
  });
 });
</script>
<body>
 <b class="show">Click to show</b> <b class="hide">Click to Hide</b>
 <p>Bangladesh is a wonderful country.</p>
</body>
</html>
Demo :

Click to show Click to Hide

Bangladesh is a wonderful country.

Hide and show Toggle

<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(".slidetoggle").click(function(){
   $(".topdown").slideToggle();
  });  
 });
</script>
<body>
 <b class="slidetoggle">Click to show</b> 
 <p class="topdown">Bangladesh is a wonderful country.</p>
</body>
</html>
Demo :

Click to show or hide

Bangladesh is a wonderful country.

Some effects

No Functions Parameter Example
1. hide() hide(slow|fast|normal|speed)
(speed value are in seconds , 1000 means 1 sec) 		For hide anything
2. show() show(fast|normal|slow|1000|2000|....) For show anything
3. slideDown() slideDown(slow|fast|normal|speed) For sliding down like a shop shutter
4. slideUp slideUp(slow|fast|normal|speed) For sliding up like a shop shutter open
5. slideToggle slideToggle(slow|fast|normal|speed) For sliding up and down
6. fadeIn() fadeIn(slow|fast|normal|speed) for fade in by adjusting the opacity
7. fadeTo fadeTo(slow|fast|normal|speed) for fade to by adjusting opacity
8. fadeOut() fadeout(slow|fast|normal|speed) for fade out by adjusting the opacity
9. toggle()
10 stop()
11 animate() selector.animate( params, [duration, easing, callback] );
params : css properties
duration : how long the animation eun
 
$("slelector").click(function(){
 $("anotherselector").animate({ 
  width: "70%",
  opacity: 0.4,
  marginLeft: "0.6in",
  fontSize: "3em", 
  borderWidth: "10px"
 }, 1500 );
});

Some events

blur Occurs when the object loses focus
change Occurs when the object changes
click Occurs when a mouse click
dblclick Occurs when a mouse double click
error Occurs when an error in loading or unloading
focus Occurs when the object gets focus
keydown Occurs when key is pressed
keypress Occurs when key is pressed and released
keyup Occurs when key is released
load Occurs when document is loaded
mousedown Occurs when mouse button is pressed
mouseenter Occurs when mouse enters in an object region
mouseout Occurs when mouse pointer moves out of an object
mousemove Occurs when mouse pointer moves
mouseover Occurs when mouse pointer moves over an object
mouseup Occurs when mouse button is released
resize Occurs when window is resized
scroll Occurs when window is scrolled
select Occurs when a text is selected
submit Occurs when form is submitted
unload Occurs when documents is unloaded







Author :
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)