jQuery introduction

ADDING VISUAL EFFECTS TO THE WEB PAGES(jQuery introduction)

Today, almost every Web develop want to add visual effects to websites. However adding  complex visual effects to Web pages requires writing many lines on JavaScript code, which is a time consuming activity . To overcome this issue jQuery was introduced. It is the JavaScript library supported by HTML that wraps several lines of code into methods that can be called by using a single statement.

Exploring jQuery


jQuery is an open sourse  and cross-browser library of JavaScript codes that was created to make JavaScript programming simpler. jQuery can be used by all levels of programmers  to enhance the look and feel of the Web Page. jQuery support  events and can be bounded  to the HTML events on the Web Page. jQuery bridges the gap between the extensive coding and the Web designing as it is to easy to understand and provides many predefined special effects.

                                                                    JQuery Editor

Just like with HTML, CSS and even with regular Javascript, you can write jQuery in any kind of editor  even Windows Notepad. However, using a simple text editor like Notepad for creating Web pages is like using a screwdriver to drill holes into a piece of woods.

If you already have an HTMLeditor that allows you to work easily with Javascript, then it will likely be good for writing jQuery as well, but there are editors out there that will treat jQuery as  a first class-citizen and help you type it faster and more efficient.

Manipulating HTML Elements by Using jQuery

You can make use of jQuery in a Web page to manipulate HTML elements  by downloading the light weight  JavaScript library and saving it to your system. Once the JavaScript  library is downloaded , it can be referred to in a Web page by using the <SCRIPT> tag in the head section of the Web document.

The following syntax is used to specify the jQuery library:

<SCRIPT type="text/javascript" src="<path>/jquery-1.8.3.js"></SCRIPT>

In the preceding syntax:

  • The SCRIPT tag instructs the browser that HTML document uses the script.
  • The type attribute specifies the type of the scripting used.
  • The src attribute specifies the name of the jQuery library  used. If the jQuery library stored in the same location as the HTML document , only the name of the library can be given. However, if the jQuery library and the HTML document are stored at differemt locations you hva to specify the complete path of the Jquery library.
The execution of jQuery code should occur only after the Web page should be fully loaded. To ensure that the Web page is fully loaded  before the jQuery code is fully executed on it, jQuery provided the document.ready() function.

The following syntax is used to specify  the document.ready() function:

<SCRIPT type="text/javascript">
$(document).ready(function(){
//jquery code...
});
</SCRIPT>

In the preceding syntax, the dollar sign($) represents start of the jQuery code block and jQuery code is the code to be implemented for the rendering  of the HTML  elements in the browser window. The  document.ready() function is useful for preventing failure of actions that should be proformed on an HTML element.

As jQuery is used to manipulate HTMl elements, the element should be selected first in order to implement the jQuery code on them.

The following jQuery syntax is used to select  the HTML elements  and perform the required action on them:

$(selector).action();

In the preceding syntax, selector is the element to be manipulated and actions represent  action to be taken on the selected element, jQuery provides many built-in actions that can be applied to the HTML elements,  such as hide, fadeout , slideup.

Note: jQuery is written in the <HEAD> section of the document.

In the preceding code to hide all the <h1> element  in an HTML document:


<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="jquery-1.8.3.js">
</SCRIPT>
<SCRIPT>
$document.ready(function(){
$("h1").hide();
});
</SCRIPT>
</HEAD>
<BODY>
...
</BODY>
</HTML>

In the preceding code all the <h1> element  will be hidden in the Web page.

About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment