Wednesday, 2 October 2013

JQUERY SYNTAX FOR BEGGINERS MANOHAR GOUD



WHAT IS JQUERY ?

jQuery is a Javascript library, and it is a language designed to simplify the client-side scripts in the browser. It was created by John Resig at BarCamp New York in 2006. It is an open source software under licenses from MIT and GPL combined. Jquery 1.9.1 is the latest version disponible in the jquery official site .
jquery tutorial for beginners
You will find the slogan with the jQuery logo  : “Write less, Do more “.In fact, you can make nice effects with a few lines of jQuery code. Its syntax is very easy to understand.
As a  jQuery beginner ; code once you understand the basic concepts available in the next tutorials. jQuery is particularly suitable for:
         - Create animations.
         - Handle browser  events.
         - Loading Content using AJAX programs.
         - Create Awesome sliders like the one in ourHome page.
         - Build professional Mobile phone Applications.
         - …..

It also used in creating web pages and dynamic elements. It allows developers to create plugins that are compatible with a wide number of platforms such us : Adobe Dreamweaver,Wordpress, Joomla...etc.


Thousands of jQuery plugins are available on the web. Among the most common were assistants AJAX data grids, XML tools, drag and drop, the manipulators Cookies, etc.. You can find the best plugins in the jQuery official page.


What makes jQuery so powerful anduniversal ?

The JavaScript language was born in 1995. Since then, its implementation in differentbrowsers (Safari, Google chrome,Firefox...) on the market has made ​​a rather haphazard way: over the different versions (both language browsers), some features have been retained,others do not. Thus, a single instruction can be recognized JavaScript in a browser and not in another, even in some version of a browser and not in another. What a headache for programmers!
Fortunately, jQuery comes to the rescue: defining its own set of instructions, it acts as a wrapper for
different versions of JavaScript, whether existing or coming. On the other hand, it allowsbrowsers present on market, their multiple versions and their compatibility with theinstructions of JavaScript and AJAX.
For a script written in JavaScript to run correctly on different versions of each browser,
programmer-like you-must set up a series of tests and run a specific code for each browser and version , 
as shown in the following figure : 


Javascript browsers test



With jQuery, these tests are unnecessaryjust run the necessary instructions, regardless of the browser used, or version of JavaScript compatible with this browser.        
Where applicable, all these tests are made ​​so transparent . In your case, you only have toworry about the code. 

Remember, jQuery is very convenient, but do not enjoy and think only of the visualdevelopment : a page must foremost based on solid HTML bases !

But what happens when a new version of JavaScript born
Well, the jQuery  instructions are completed. Accordingly. You can continue to use the instructions already used and / or consult the documentation available on the new instructions. Whatever your approach, all used instructions work in all available browsers.This approach is a real bonus for you, whether beginner or experienced.
I will add some other details that will certainly convince you that you made ​​the right choiceby deciding to learn jQuery :
                        - The official documentation is available for everyone and in high quality.
                        - The Community that revolves around jQuery is expanding and providesquality support.
                        - Many leading players of the Web (Microsoft, Google, Amazon, Twitter,Mozilla, etc.), Use jQuery.
                       - A multitude of plugins available to enhance the basic capabilities of jQuery




JQUERY SYNTAX


Learn the basic syntax of jQuery which is realy the most important step when learning  any programming language.Unfortunatly , many beginners who wants to learn faster ignore this step and focus on advanced technics and complex functions , but they'll find many big problems because they don't know how this function's built and what does it mean this keyword , ...



Like any other Javascript library , jQuery was simply designed to change and interact the Html document . So , we have to understand the way that javascript could interact with Html , in other words, the DOM (Document Object Model)  .The image below represent a DOM structure for an Html document :


DOM Structure


The DOM define the way to access and manipulate Html Documents , Every node in Html can be easily accessed by Javascript and then jQuery .Don't worry , you will learn more about DOM interaction in the next tutorials .So , let's move to the  jQuery syntax.

Indeed , the process is easy to understand , jQuery access the Html or CSS elemnt using a 'Selector'  and then it perform an action .

A jQuery selector start with this symbol : $( )  ,  Inside the parentheses, we can put :

    -Html Tag name :      $('h1')   to access all the level 1 headers in the Html document.
    -Tag Class : The same way when we refer to a Html tag class in CSS using the point : . at the begin of the class name  . let's consider the following html code :

<p class = 'paragraph'></p>

to access this element using jQuery , simply add the tag class name inside the parentheses and preced it by a point :

$('.paragraph')

      -Tag Id : the same procedure for the class , just replace the point with #

<h1 id='header-1'>this is a header<h1> 

$('#header-1') 


Note : 

If you want to select all the elements in the document , just put this symbol : * inside the parentheses.
example : $('*')  
 



What is 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.

Who's Using jQuery

Other jQuery Foundation Projects

A Brief Look

DOM Traversal and Manipulation

Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'
1
$( "button.continue" ).html( "Next Step..." )

Event Handling

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.
1
2
3
4
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});

Ajax

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text.
1
2
3
4
5
6
7
8
9
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function( data ) {
$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
}
});








No comments:

Post a Comment