Scribd Logo
Upload

Welcome to Scribd!

  • Jquery PDF

    Uploaded by

    SWorD Z
    11 views24 pages
    jQuery is a lightweight JavaScript library that simplifies DOM manipulation and AJAX calls. It was created in 2006 and uses CSS selector syntax to select and style HTML elements. jQuery supports events, effects, HTML/CSS manipulation, and AJAX and comes with many built-in animation effects and events. Developers can include jQuery in their projects by downloading it or linking to it from a CDN. Basic jQuery syntax uses the $ sign to select elements and perform actions on them.

    Original Description:

    Original Title

    10. jQuery.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    jQuery is a lightweight JavaScript library that simplifies DOM manipulation and AJAX calls. It was created in 2006 and uses CSS selector syntax to select and style HTML elements. jQuery supports events, effects, HTML/CSS manipulation, and AJAX and comes with many built-in animation effects and events. Developers can include jQuery in their projects by downloading it or linking to it from a CDN. Basic jQuery syntax uses the $ sign to select elements and perform actions on them.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views24 pages

    Jquery PDF

    Uploaded by

    SWorD Z
    jQuery is a lightweight JavaScript library that simplifies DOM manipulation and AJAX calls. It was created in 2006 and uses CSS selector syntax to select and style HTML elements. jQuery supports events, effects, HTML/CSS manipulation, and AJAX and comes with many built-in animation effects and events. Developers can include jQuery in their projects by downloading it or linking to it from a CDN. Basic jQuery syntax uses the $ sign to select elements and perform actions on them.

    Copyright:

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

    jQuery

    Trainer: Shanthini
    jQuery
    • jQuery is a small and lightweight JavaScript library.
    • jQuery is cross-platform & Open Source.
    • Created by John Resig in 2006
    • jQuery moto is "write less do more".
    • jQuery simplifies AJAX call and DOM manipulation.
    • Supports all advanced CSS3 selectors
    • jQuery comes with plenty of built-in animation effects.
    • jQuery offers a wide variety of events, such as a user clicking on a link, without
    cluttering the HTML code.
    • Supports AJAX
    Installing jQuery
    Steps for adding Jquery to your web pages:

    • Download the jQuery library from jQuery.com


    Go to http://docs.jquery.com/Main_Page and download.
    <head>
    <script src="jquery-3.5.1.min.js"></script>
    </head>

    or

    • Include jQuery from a CDN (Content Delivery Network), like Google


    https://ajax.googleapis.com/ajax/libs/jquery/l .8.2/jquery.min.js
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    Syntax
    Basic syntax is:

    $(selector).action()

    • “$” sign is to define/access jQuery


    • “(selector)” is to query (or find) HTML elements
    • jQuery ”action()” is the action which needs to be performed on the element(s)
    Document Ready?
    Rules to follow to work with jQuery:
    • Wait for the document to load completely.
    • How can we achieve? document.ready helps.
    • Syntax:

    $(document).ready(function()
    {
    // do stuff when DOM is ready
    });
    • document.ready helps us to make sure that the document is finished loading.
    • And then execute the jQuery code
    jQuery Selectors
    • Selectors helps to select and manipulate HTML elements.
    • Selectors start with dollar sign and parentheses: $() - factory function.
    • This can also be replaced by jQuery()
    • We can use all CSS selectors to jQuery
    • Below are the type of selectors available in jQuery:
    • The Tag Selector
    • The #id Selector
    • The .class Selector
    • Universal Selector (*) – Syntax: $('*')
    • Multiple Selector – Example: $('p strong, .myclass')
    Jquery : Css
    • The css() method sets or returns one or more style properties
    for the selected elements.

    • To return the value of a specified CSS property, use the


    following syntax: $(selector). css("propertyname", name");
    jQuery Events
    • Events represents the precise moment when something happens.
    Examples:
    • moving a mouse over an element Mouse Events Keyboard Form Document/Window
    Events Events Events
    • selecting a radio button
    • clicking on an element click keypress submit load

    Syntax: dblclick keydown change resize

    $(“selector_name").click(); mouseenter keyup focus scroll


    mouseleave blur unload
    jQuery Effects / Methods
    • Few jQuery effects are:
    • Hide
    • Show
    • Toggle
    • Slide
    • Fade
    • Animate
    jQuery - HTML
    • Get and Set Content methods:

    • text() - Sets or returns the text content of selected elements

    • html() - Sets or returns the content of selected elements (including


    HTML markup)

    • val() - Sets or returns the value of form fields


    Traversing
    Traversing
    • In jQuery, traversing refers to moving through the DOM tree to access certain
    HTML elements.

    • By using jQuery, you can traverse upwards the DOM tree.

    • There are three main methods used to retrieve parents or other ancestors.
    • .parent(): return direct parent and traverse one level up the DOM tree.

    • .parents(): return all ancestors up to the root, can filter the search.

    • .parentsUntil(): return all ancestors in between two specified elements.


    Filtering
    Filter Methods return * element of the specified elements.
    • first() - returns the first element
    $("div").first();
    • last() - returns the first element
    $("div").last();
    • eq() - returns an element with a specific index number
    $("p").eq(1);
    • filter() – specify a criteria to be filtered
    $("p").filter(".intro");
    • not() - returns all elements that do not match the criteria
    $("p").not(".intro");
    AJAX
    Way to exchange data with a server, and update parts of a web page –

    without reloading the whole page.

    • AJAX = Asynchronous JavaScript and XML.

    • Loading data in the background and display it on the webpage

    • Group of inter-related technologies like JavaScript, DOM, XML, HTML/XHTML,


    CSS, XMLHttpRequest etc.
    load() Method
    • The jQuery load() method is a simple, but powerful AJAX method.

    • This loads data from a server & puts the returned data into the selected
    element.

    • Syntax:

    [selector].load( URL, [data], [callback] );

    • URL – Mandatory – Specifies the server URL

    • Data – Optional – Set of values to send along with the request

    • Callback – Optional – Execute after load method is completed


    Callback Parameter
    • responseTxt - contains the resulting content if the call succeeds

    • statusTxt - contains the status of the call

    • xhr - contains the XMLHttpRequest object


    Browsers
    All the available browsers cannot support AJAX. Here is a list of major browsers
    that support AJAX.

    • Mozilla Firefox 1.0 and above.

    • Netscape version 7.1 and above.

    • Apple Safari 1.2 and above.

    • Microsoft Internet Explorer 5 and above.

    • Konqueror.

    • Opera 7.6 and above.


    AJAX methods in jquery

    jQuery Ajax
    Methods Description
    ajax() Sends asynchronous http request to the server.

    get() Sends http GET request to load the data from the server.

    Post() Sends http POST request to submit or load the data to the server.

    getJSON() Sends http GET request to load JSON encoded data from the server.

    getScript() Sends http GET request to load the JavaScript file from the server and then
    executes it.

    load() Sends http request to load the html or text content from the server and add
    them to DOM element(s).
    AJAX Events

    jQuery Ajax Events Description


    ajaxComplete() Register a handler function to be called when Ajax requests
    complete.
    ajaxError() Register a handler function to be called when Ajax requests
    complete with an error.

    ajaxSend() Register a handler function to be called before Ajax request


    is sent.
    ajaxStart() Register a handler function to be called when the first Ajax
    request begins.
    ajaxStop() Register a handler function to be called when all the Ajax
    requests have completed.

    ajaxSuccess() Register a handler function to be called when Ajax request


    completes successfully.
    jQuery $.get() and $.post()
    Method
    • $.get() method requests data from the server with an HTTP GET request.

    • Syntax:
    $.get(URL,callback);

    • $.post() method requests data from the server using an HTTP POST request.

    • Syntax:
    $.post(URL,data,callback);
    Get example
    Jquery Code

    $("button").click(function(){
    $.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
    });
    });

    ASP Code

    <%
    response.write("This is some text from an external ASP file.")
    %>
    Post example
    • Jquery code:
    $("button").click(function(){
    $.post("demo_test_post.asp",
    {
    name: "Donald Duck",
    city: "Duckburg"
    },
    function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
    });
    });

    ASP:
    <%
    dim fname,city
    fname=Request.Form("name")
    city=Request.Form("city")
    Response.Write("Dear " & fname & ". ")
    Response.Write("Hope you live well in " & city & ".")
    %>
    Thank you

    You might also like