Getting started with jquery

jQuery is a fast and concise JavaScript library created by John Resig in 2006. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development. It is a JavaScript toolkit designed to simplify various tasks by writing less code.

Here is the list of important core features supported by jQuery −

  • Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
  • Lightweight − The jQuery is very lightweight library – about 19KB in size ( Minified and gzipped ).
  • Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.

There are two ways to use jQuery.

  1. Local Installation − You can download jQuery library on your local machine and include it in your HTML code.

    Ex. http://jquery.min.js                                                          Here jquery.min.js is a jquery javascript file downloaded from jquery library

  2. You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

Ex. http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

Simple Hello word using Jquery: –

<!DOCTYPE html>
<html>
<body>
http://jquery.min.js

$(document).ready(function(){
document.write(“Hello word”);
});

<button id=”b”>Click</button>
</body>
</html>

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to “find” (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

  • Element Selector
The jQuery element selector selects elements based on the element name.

<html>
<head>
http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

$(document).ready(function() {
$(“h3”).css(“color”, “green”);
});

</head>
<body>

Here is first heading3

Here is second heading3

</body>
</html>

  • ID Selector
Represents a tag available with the given ID in the DOM. For example $(‘#id-name’) selects the single element in the document that has an ID of some-id.

<html>
<head>
http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

$(document).ready(function() {
$(“#head1”).css(“color”, “green”);
});

</head>
<body>

head1″>Here is first heading3

Here is second heading3

</body>
</html>

  • Class Selector
Represents a tag available with the given class in the DOM. For example $(‘.class-name’) selects all elements in the document that have a class of some-class

<html>
<head>
http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

$(document).ready(function() {
$(“.p1”).css(“color”, “green”);
});

</head>
<body>

Here is first heading3

Here is second heading3

</body>
</html>

  • More Selector
$(“*”) Selects all elements
$(this) Selects the current HTML element
$(“[href]”) Selects all elements with an href attribute
$(“:button”) Selects all <button> elements and <input> elements of type=”button”
$(“tr:even”) Selects all even <tr> elements
$(“tr:odd”) Selects all odd <tr> elements
$(“ul li:first”) Selects the first <li> element of the first <ul>
Advertisements

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