Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 18

    Uploaded by

    kmani11811
    11 views17 pages

    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

    Copyright:

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

    Lecture 18

    Uploaded by

    kmani11811

    Copyright:

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

    Web Technologies

    jQuery Basics
    Today’s Lecture
    • jQuery Introduction
    – Advantages of using jQuery
    – Adding jQuery to Web Pages
    • jQuery Syntax
    • jQuery Selectors
    • jQuery Events
    jQuery
    • jQuery was created in 2006 by John Resig.
    • It’s a JavaScript Library, that simplifies JavaScript programming.
    • It was designed to handle Browser Incompatibilities and to simplify
    HTML/DOM Manipulation, CSS Manipulation, HTML Event
    Methods, Effects and Animations, and AJAX.
    • jQuery is a lightweight, fast, and feature-rich JavaScript library.
    – It's based on the principle "write less, do more".
    – Purpose of jQuery is to make it much easier to use JavaScript on
    website.
    • Many of the biggest companies on the web use jQuery.
    – Such as Google, Microsoft, IBM, and Netflix.
    jQuery
    • Advantages of using jQuery
    – Simplify Common JavaScript Tasks
    • We can easily create feature-rich and interactive web pages
    with fewer lines of codes.
    – Save Time
    • We can save time and efforts by using jQuery inbuilt effects.
    – Easy to Use
    • Anybody with basic working knowledge of HTML, CSS and
    JavaScript can start development with jQuery.
    – Compatible with Browsers
    • It’s compatible with all major modern browsers.
    • Examples are Chrome, Firefox, Safari, and Internet Explorer.
    – Absolutely Free
    • It’s free to download and use.
    jQuery
    Adding jQuery to Web Pages
    • There are two ways to start using jQuery on website:
    o Download jQuery Library (from jQuery.com)
    <head><script src="jquery-3.7.1.min.js"></script></head>
    o Include jQuery from a CDN (like Google)
    • If don't want to download and host jQuery, we can include it
    from a CDN (Content Delivery Network):
    <head>
    <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
    </script>
    </head>
    jQuery Syntax
    • jQuery uses CSS syntax to select elements.
    • It uses jQuery object to select HTML elements and performs actions
    on it.
    • Basic syntax is $(selector).action();
    – $ Dollar sign access jQuery
    – (selector) defines to "query (or find)" HTML elements
    – action() defines an action on the element(s)
    • Example:
    $("this").hide() //hides current element
    $("p").hide() //hides all <p> elements
    $(".test").hide() //hides all elements with class="test"
    $("#test").hide() //hides element with id="test"
    jQuery Selectors
    • jQuery selectors are used to "find" (or select) HTML elements based
    on their name, id, classes, types, attributes, values of attributes and
    much more.
    • Example:
    $(".feature"); // class selector
    $("b, i"); //multiple selector
    $("a[target="_blank"]"); //attribute selector
    element Selector
    • jQuery element selector selects elements based on element name.
    • Example: when user clicks on a button, all <p> elements will hide.

    before clicking button

    after clicking button


    .class Selector
    • jQuery .class selector finds elements with a specific class.
    • To find elements with a specific class, write a . period character,
    followed by name of the class.
    • Example: when user clicks on a button, elements with class="test"
    will hide.

    before clicking button

    after clicking button


    #id Selector
    • jQuery #id selector finds elements with a specific id.
    • To find an element with a specific id, write a # hash character,
    followed by id of the HTML element.
    • Example: when user clicks on a button, element with id="test" will
    hide.

    before clicking button

    after clicking button


    More Examples of jQuery Selectors
    jQuery Events
    • Visitors' action(s) that a web page can respond to are called events.
    – Example: by moving a mouse over an element, and clicking on
    an element etc.
    Some Common DOM Events
    jQuery Events
    • Some Common jQuery Event Methods
    – click()
    • It executed when user clicks on the HTML element:
    $("p").click(function(){
    $(this).hide();});
    – dblclick()
    • It executed when user double-clicks on the HTML element:
    $("p").dblclick(function(){
    $(this).hide();});
    – blur()
    • It executed when the form field loses focus:
    $("input").blur(function(){
    $(this).css("background-color", "green");});
    jQuery Events
    • Some Common jQuery Event Methods
    – mouseenter()
    • It executed when mouse pointer enters the HTML element:
    $("#p1").mouseenter(function(){
    alert("You entered p1!");});
    – mouseleave()
    • It executed when mouse pointer leaves the HTML element:
    $("#p1").mouseleave(function(){
    alert("You now leave p1!");});
    – mousedown()
    • It executed when left, middle or right mouse button is
    pressed down while the mouse is over the HTML element:
    $("#p1").mousedown(function(){
    alert("Mouse down over p1!");});
    jQuery Events
    • Attach Multiple Events
    – on()
    • It attaches more than one event handlers for selected
    elements.
    • Attach multiple event handlers to a <p> element:

    before

    when mouse enter

    when mouse leave

    when clicking
    Summary of Today’s Lecture
    • jQuery Introduction
    – Advantages of using jQuery
    – Adding jQuery to Web Pages
    • jQuery Syntax
    • jQuery Selectors
    • jQuery Events
    References
    • https://jquery.com/
    • https://learn.shayhowe.com/advanced-html-css/jquery/
    • https://www.w3schools.com/jquery/default.asp
    • https://www.tutorialrepublic.com/jquery-tutorial/

    You might also like