A simple Tutorial On JQuery

JQuery is JavaScript library used to implement features of JavaScript with lesser amount of JavaScript code.Basically J Query is like a mystery box which contains all features of JavaScript.

Why JQuery ???

  1. It is simple and more advanced
  2. Does not need complex logic to achieve a task.
  3.  Rely on JavaScript.
  4. Simplifies a lot of codes regarding DOM manipulation
  5. J Query is currently provided by google API. we borrow some logic to API.

Download J Query

The best way is to download a copy from J Query.

Download either product or development version. From my experience; you stick to product version. it will open in a browser. Copy all the codes to a file and save it to a file name you like with extension .js. There you GO!!!..Finished all the work. now you need to create a .html file where we do all the operation regarding all the J Query tasks.

<head>
http://jquery-1.11.3.min.js
</head>

 

The html file contains some sections , in that there is a section called script , there you have to point to the J Query file name.

jquery_load

JQuery Syntax:

In JQuery , begins with  $ symbol. $ sign is used to access JQuery. Every JQuery event starts with document.ready syntax is

$(document).ready(function(){
// jQuery methods go here…
});

which means JQuery code executed only when the document is becomes ready.Example is shown below

Selectors:

Selectors is used to manipulate the html statements. All of the selectors are understood by name;because the name is similar to their operation. they starts with $ and parenthesis.

$(“”)

Element Selector:

$(“h2”)

when selector is connected with a button, then upon an event it will affect all the selector with h2.

$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
})

 Id Selector:

The id selector stands for an id that we are used in the html and css to denote a particular option.It is denoted by the symbol #. $(“#id”) is the best way to access the particular id; means only one item with same id in the group just like the primary key

Class Selector:

The class selector is used to denote a group of selectors. The class selector is denoted by dot symbol “.”$(“.class”)

other_class_selectors

Events

The events are something like a check point when that checkpoint is called then we invoke certain actions. Events are  categorised into  mouse events,keyboard events, form events,document/window events.

keyboard_events

form_events

mouse_events

document_events

each of these events can be used based on our requirement.when we want to do an action up on clicking a mouse can be done by click event.

$(document).ready(function(){
$(“.class_test”).click(function(){
$(“p”).hide();
});
});

Advertisements

One Comment Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s