jquery-introduction

jQuery Introduction

  • jQuery is an easy to learn JavaScript library which makes JavaScript programming very easy.
  • jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
  • jQuery also simplifies complicated tasks like AJAX calls and DOM manipulation.
  • jQuery will run exactly the same and produce same output in all major browsers
  • jQuery is free and very easy to include in your projects: just download its latest version from the jQuery website, or use an online Content Delivery Network
  • jQuery is continuously upgraded, maintained and documented by a dedicated community of great developers. This ensures high quality and support on the internet.

Following are the major features supported by jQuery

  • HTML element selections
  • HTML element / DOM manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects and animations
  • HTML DOM traversal and modification
  • AJAX
  • Utilities

Install and Use jQuery Library:

Two versions of jQuery are available for downloading:

Minified: ideal for using in production environment.

Uncompressed (for debugging or reading).

Download the latest version from http://jquery.com/download/

jQuery Versions:

jQuery 1.11.1

jQuery 2.1.1:

Note: jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.
Referencing jQuery in HTML Page:

<script src=”jquery-<version>.js”/>

CDN (content delivery network):
<script src=”//code.jquery.com/jquery-<version>.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/<version>/jquery.min.js”></script>
<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-<version>.min.js”></script>

Un-Obstructive JavaScript
<button type=”button” onclick=”doSomething()” >Click Me</button>
In the above example structure and behavior are mixed.
Now consider the same example written using Un-obstructive JavaScript strategy:
Script code can go in head.
<script >
$(function(){
$(‘#btnClickMe’).click(function() {
doSomething…….
});
});
</script>
Structure code now does not contain any behavior
<button type=”button” id=”btnClickMe” >Click Me</button>
First jQuery Example
<html>
<head>
<script src=”jquery-2.1.1.js”></script>
<script>
$(document).ready(function () {
$(“button”).click(function () {
$(“p”).hide();
});
});
</script>
</head>
<body>
<div>
<h2>This is a My First Example</h2>
<div>This is a span section.</div>
<p>This is a paragraph</p>
<button>Hide Paragraph</button>
</div>
</body>
</html>

jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
jQuery uses a combination of XPath and CSS selector syntax.
Basic syntax is: $(selector).action()

A dollar sign to define jQuery
A selector to query (or find) HTML elements
A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() – hides current element
$(“p”).hide() – hides all paragraphs
$(“p.test”).hide() – hides all paragraphs with class=”test”
$(“#test”).hide() – hides the element with id=”test”
The document ready function:
$(document).ready(function () {
// jQuery code goes here…
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
Trying to hide an element that doesn’t exist
Trying to get the size of an image that is not loaded
Avoid $() conflict:
“$” is the alias to jQuery functions but if “$” conflicts with other frameworks
var foo = jQuery.noConflict();
// now foo() is the jQuery main function
foo(“div”).hide();
Example:

<script >
var foo=jQuery.noConflict();
foo(document).ready(function () {
foo(“#DemoDiv”).click(function () {
alert(“hi”);
});
});
</script>

Almost every function returns jQuery, which provides a fluent programming interface and chainability:

$(“div”).show()
.addClass(“main”)
.html(“Hello jQuery”);

How to escape a special character

// html code

<div id=”div.EscapeID” class=”demoBlock”>Text inside div element having id as “div.EscapeClass” </div>
<input type=”button” id=”btn.HideText” value=”Hide above text” />

// jQuery block

<script>
$(document).ready(function() {
$(“#btn\\.HideText”).click(function() {
$(“#div\\.EscapeID”).toggle();
})
})
</script>

Learn jQuery in your own pace 100% confidence get in to the subject.

What is the difference between HTML DIV and SPAN tag?

  • <div> is a block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements.
  • <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has meaning  when it is used with CSS.

Ex:

<div style=”color:red”>
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<div style=”color:green”>
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>

Learn HTML iFrame

To include output of another page into the current page.

Attributes:
scrolling=”yes/no”
marginwidth & marginheight
frameborder=”0″: To Remove the border from IFrame
Example:
<iframe src=”/html/menu.htm” width=”555″ height=”200″ marginheight=”30″ marginwidth=”30″
scrolling=”no”>
Sorry your browser does not support inline frames.
</iframe>
Using Iframe as the Target:
<iframe src=”demo_iframe.htm” name=”iframe_a”></iframe>
<p><a href=”http://www.microsoft.com” target=”iframe_a”>Microsoft </a></p>