jquery introduction.pptx
TRANSCRIPT
Smart Business Solutions
CIN# U72200TG2013PTC090172
Introduction What is jQuery?
jQuery is a cross-browser adds-on library for JavaScript to simplify the client-side scripting of HTML.
Its is free, open source software.
Benefits of jQuery The following are the benefits of jQuery.
jQuery gives Web developers and designers an easy way to create sophisticated effects with almost no coding
It is easy to implement
simplifies HTML document traversing, event handling, animating, and Ajax interactions for web development
jQuery supports CSS3 selectors and basic XPath syntax
It is used in all over the Web.
Software Requirements & Browser Support Software requirements
The following are the software needed for jQuery.
jQuery Library
Notepad or any HTML editor
Browser
Browser Support
jQuery supports the following browsers.
Internet Explorer 6+
Firefox 2.0+
Safari 3+
Opera 10.6+
Chrome 8+
Features in jQuery The following are the features in jQuery.
DOM element selections functions
DOM traversal and modification
Events
CSS manipulation
Effects and animations
Ajax
Extensibility
Utilities - such as browser version and the each function.
JavaScript Plug-in
Test Your Understanding What are the softwares required for creating jQuery?
What are the browsers that support jQuery?
jQuery – Overview jQuery library should be installed in your machine before it can be used. This chapter briefs you about he steps to be followed to install jQuery library.
The trainer will give you a demo to download and successfully install jQuery library.
jQuery- Installation Procedure Download jQuery
Download the library from www.jquery.com
Include jQuery library
Local System
<script type="text/javascript" src=“../jquery-1.6.1.min.js"></script>
Google CDN
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
Microsoft CDN
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1-vsdoc.js
Note: CDN stands for Content Delivery Network
jQuery Library The jQuery library is a single JavaScript file, containing all of its common DOM, event, effects, and Ajax functions.
Calling jQuery Library functions
jQuery functions will be used as soon as DOM is ready.
To perform event handling, we should call the event inside the below function
(document).ready()
Custom Scripts We can have our own custom code in our custom javascript file : Example – Custom.js
/* Filename: custom.js */
$(document).ready(function() {
$("div").click(function()
{
alert("Hello world!");
}); });
Now we can include our custom.js file in HTML file as below
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="/jquery/custom.js">
</script>
</head>
<body>
<div id="newdiv"> Click on this to see a dialogue box. </div>
</body>
</html>
Multiple Libraries
We can use multiple libraries all together without conflicting each others.
Example: jQuery and MooTool JavaScript libraries together.
jQuery- Basics jQuery allows you to interact with and manipulate elements on your Web pages.
Understanding HTML Elements
HTML elements are denoted by tags, which are letters or words in angle brackets,
< and >.
For example, <img> is an image element.
Overview of Elements Skeleton of HTML
<HTML>
<HEAD></HEAD>
<TITLE></TITLE>
<BODY></BODY>
</HTML>
jQuery- Basics (contd…)An element inside another element is the child of the outer element.
The outer element is the parent of the inner element.
An individual element can, and often is, simultaneously both a parent and a child.
jQuery- Basics (contd…) Common HTML Elements
•<html></html>
Tells the Web browser that everything inside the tags should be considered a
Webpage.
•<head></head>
Contains information that controls how the page is displayed. Elements
responsible for JavaScript and CSS code and calls to other files are generally
placed between these tags.
•<title></title>
Contains the title of the Web page, displayed on the title bar at the top of the
browser.
•<body></body>
Holds all the content of the page.
•<style></style>
Controls the appearance and behaviour of elements on your Web page.
•<script></script>
Makes JavaScript and other specified code available, either by calling a file or
code placed between these tags. jQuery is included on the page with this tag.
•<strong></strong>
Boldfaces any text within the tag.
•<h1></h1>
Creates header text.
•<div></div>
Creates a container of content.
•<p></p>
Creates a paragraph.
•<a></a>
Creates a hyperlink.
• <strong></strong>
Boldfaces any text within the tag.
•<h1></h1>
Creates header text.
•<div></div>
Creates a container of content.
•<p></p>
Creates a paragraph.
•<a></a>
Creates a hyperlink.
•<br />
Inserts a line break. No matching end tag is needed.
•<table></table>
Creates a table, along with child tags <tr></tr> and <td></td>.
•Element Attribute
An attribute is an HTML code word that controls an aspect of the element. We
can manipulate the Element Attribute using jQuery.
Example :
<img src= "images/home.gif" height="28" width="28" alt="Little house" />
Following are the attributes:
•src: The URL or location of the image file to display
•height: The image height in pixels
•width: The image width in pixels
•alt: The text that appears in lieu of an image or, in some browsers, when the image is moused-over for a few seconds
jQuery Syntax: jQuery(selector).action()
◦ jQuery keyword to get DOM elements ◦ A (selector) to "query (or find)" HTML elements ◦ A jQuery action() to be performed on the element(s)
The $() factory function $(selector).action()
A dollar sign to define jQuery. The factory function $() is a synonym of jQuery() function
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Thank You…