One of that Latest Technologies is jQuery.
If you’ve been involved in front-end design or development in any form over the past five years or so, then it’s very likely that you’ve experimented at some point with one of the popular JavaScript libraries like jQuery.
So For Learning jQuery we Must Know Java Script.
jQuery aims to make JavaScript more accessible for the less ‘hardcore’ developer.
We can use jQuery For animation , web site Designing and in Programming for Post Back Request to Servers and ETC.
To Day I will Show some example code with brief descriptions demonstrating what you can do with jQuery. Note This Tutorials is Basic Tutorial for jQuery Beginners hence I will only share and Explain with Simple Examples.
Lets Start :
1) Link or Add jQuery Library
2) How to Select and Move Elements.
Link to jQuery’s Library Remotely
For linking jQuery Library Remotely, This is an optional technique that many developers are using today. Instead of hosting the jQuery source code on your own server, you can link to it remotely. It Have two Benefits First By remote Link (Google’s Content Delivery Network, or CDN for short) We always Make sure We Use Most Recent and Latest version OF library.Second Page Load Quickly and Take Less Bind Width .Here is how your <script> tag should look: Code Below
Note: Write Following Line code Before</head> html Tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>
and you can download a copy from jQuery and include it like:
<script type="text/javascript" src="path/to/jquery.min.js">
All Code of jQuery is in Document Ready Handler.Almost everything you code in jQuery will be contained inside one of these.
<script type="text/javascript"></script>Inside These Tags We Write our jQuery Code.Document.ready is a Function that ensures that the code does not run until the DOM (Document Object Model) is ready. This confirms that all Element actually in existence and so, the script won’t return any errors.
Code is Below:
$(document).ready(function() {
// all jQuery code Placed here
});
First We Learn How to Select Element in jQuery.If you Know about CSS then It very Usefull and Help you Alot in jQuery.To Select an element in jQuery we write dolor Sign " $ " Followed by Parenthesis $('Element Name (Also Called Selector)') . That selector can be any valid selector, including new CSS3 selectors For example $('div')
Few Sample Code Below
$('div p') //selects all paragraphs that exist within a parent div.
$('#something') //selects the element with an id of 'something'
$('.something') //selects the element(s) with a class of 'something'
$('div p#something a') //selects all anchor elements within a paragraph with an id of 'something' within a parent div.
Now Create A New div Tag i Html Document:
<div id="something">
this is some text
</div>
Now And also add some CSS to it:
#something {
width: 200px;
height: 200px;
background-color: red;
color: white;
border: 4px solid black;
margin: 100px 0 0 80px;
}
View Sample Screen
NOW MOVE THIS DIV
So First we Select the Selector
$('#something')//Recommended
Or
$(‘div’)
After Selecting the element we can use jQuery’s animate() function to run our animation: Code Below
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);
animate function takes 3 main arguments, but one of them is optional:
animate(things to change, speed, callback);
In Above 'Things to Change' are the properties of the element which we want to animate, in our case it’s the top and left margins. The way we add multiple properties is like so:
.animate({'param': 'value', 'param2': 'value'}, speed, callback)
'Speed' is the speed at which the animation will run, or: 'how long will it take before the animation is complete?'. This is in milliseconds (1000 = 1 second). 'Callback' is a function that runs after the animation is run. For now we are not using it, but it’s something we will utilize in the future. So, back to our animate() code:
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);
Output
You can watch the demo here . Any questions, leave them in the comments .
A jQuery tutorial on Open External Link in New Window Using JQuery Must Read Very Help Ful.
0 comments:
Post a Comment