Scribd Logo
Upload

Welcome to Scribd!

  • JQuery Introduction

    Uploaded by

    Anil Kumar Gorantala
    49 views28 pages
    JQuery is a cross-browser adds-on library for javascript. It simplifies the clientside scripting of HTML. JQuery supports CSS3 selectors and basic XPath syntax.

    Original Description:

    Original Title

    JQuery Introduction.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    JQuery is a cross-browser adds-on library for javascript. It simplifies the clientside scripting of HTML. JQuery supports CSS3 selectors and basic XPath syntax.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    49 views28 pages

    JQuery Introduction

    Uploaded by

    Anil Kumar Gorantala
    JQuery is a cross-browser adds-on library for javascript. It simplifies the clientside scripting of HTML. JQuery supports CSS3 selectors and basic XPath syntax.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 28

    Smart Business Solutions

    CIN# U72200TG2013PTC090172

    Introduction
    What is jQuery?
    jQuery is a cross-browser adds-on library for JavaScript to simplify the clientside 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

    You might also like