Scribd Logo
Upload

Welcome to Scribd!

  • 58 views

    Introduction To Jquery: Study Guide For Module No. 6

    Uploaded by

    Dhan Cabugao
    The document provides an overview and study guide for a module on jQuery. It introduces jQuery as a JavaScript library that simplifies interaction between HTML and JavaScript. The module objectives are to learn jQuery concepts, embedding jQuery in web pages, selectors, events, and methods. Key points covered include the basics of jQuery syntax, how to select elements, common events, and some example jQuery methods. Learning activities are included to apply concepts from the module.

    Copyright:

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

    You might also like

    Introduction To Jquery: Study Guide For Module No. 6

    Uploaded by

    Dhan Cabugao
    58 views9 pages
    The document provides an overview and study guide for a module on jQuery. It introduces jQuery as a JavaScript library that simplifies interaction between HTML and JavaScript. The module objectives are to learn jQuery concepts, embedding jQuery in web pages, selectors, events, and methods. Key points covered include the basics of jQuery syntax, how to select elements, common events, and some example jQuery methods. Learning activities are included to apply concepts from the module.

    Original Description:

    Original Title

    jqueryNotes

    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
    The document provides an overview and study guide for a module on jQuery. It introduces jQuery as a JavaScript library that simplifies interaction between HTML and JavaScript. The module objectives are to learn jQuery concepts, embedding jQuery in web pages, selectors, events, and methods. Key points covered include the basics of jQuery syntax, how to select elements, common events, and some example jQuery methods. Learning activities are included to apply concepts from the module.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    58 views9 pages

    Introduction To Jquery: Study Guide For Module No. 6

    Uploaded by

    Dhan Cabugao
    The document provides an overview and study guide for a module on jQuery. It introduces jQuery as a JavaScript library that simplifies interaction between HTML and JavaScript. The module objectives are to learn jQuery concepts, embedding jQuery in web pages, selectors, events, and methods. Key points covered include the basics of jQuery syntax, how to select elements, common events, and some example jQuery methods. Learning activities are included to apply concepts from the module.

    Copyright:

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

    FM-AA-CIA-15 Rev.

    0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

    STUDY GUIDE FOR MODULE NO. 6

    Introduction to jQuery

    MODULE OVERVIEW

    jQuery is a Javascript library with the philosophy “write less, do more”. It was conceived in 2006
    by John Resig. The contents of the module include embedding juery scripts in a web page, its
    basic syntax, selectors, event handling and jQuery method effects.

    MODULE LEARNING OBJECTIVES

    At the end of this module, students are expected to:

    1. Learn the basic concepts of jQuery

     Understand Javascript libraries, jQuery and its benefits

     Embed jQuery scripts in a web page

     Understand the use of jQuery selector

    2. Discover event handling in jQuery

     Understand the use of jQuery effects method

    LEARNING CONTENTS (Javascript Libraries, JQuery and its Benefits)

    6.1. JavaScript Libraries, jQuery and its Benefits


    Javascript libraries are aimed to simplify the use of JavaScript and makes it more
    accessible by creating easy-to-use controls. It has simpler syntax and supports different
    browsers (cross browser). One of which is jQuery.

    jQuery is a javascript library/framework that is fast, concise, lightweight which is based


    on the principle “write less, do more”. It is CSS 3 compliant, supports myriad of
    browsers and has a great community. It simplifies that interaction of HTML and
    Javascript.

    It was originally created by John Resig in early 2006. The jQuery project is currently run
    and maintained by a distributed group of developers as an open source project.

    .LEARNING CONTENTS (Embedding in a Page)

    6.2 Embedding in a Page

    <html>
    <head>
    <script src=“path/jquery-
    x.x.js"></script>
    $(function() {
    // Start here
    });

     The <script> element – the jQuery code can be placed inside the <script> element.

    PANGASINAN STATE UNIVERSITY 1


    FM-AA-CIA-15 Rev. 0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

     The $function (handler) – this statement is known as ready event where the handler
    is basically a function to be executed safely as the document is ready to be
    manipulated.

    LEARNING CONTENTS (Basic Syntax)

    6.3 Basic Syntax

    A jQuery statement starts with the dollar sign ($) and ends with a semicolon (;). The
    dollar sign ($) is an alias for jQuery.

    LEARNING CONTENTS (Selecting Elements with jQuery)

    6.4 Selecting Elements with jQuery

    Selecting the elements through typical Javascript approach can be tedious but jQuery
    can be of great help. The following are the common ways of selecting elements on a
    page and do something with them using jQuery.

    1. Selecting By Id

    $(“#header”)

    <body>
    <div id=“header”>
    <span id=“logo”>Logo
    here…</span>
    <ul class=“menu”>
    <li>user name</li>

    …..
    <li>logout</li>
    </ul>
    </div>
    ……
    </body>

    PANGASINAN STATE UNIVERSITY 2


    FM-AA-CIA-15 Rev. 0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

    2. Selecting By Class

    $(“.updated”)

    3. Selecting by tag name

    $(“table”)

    4. Combine them

    $(“#header ul.menu li”)


    <body>

     <div id=“header”>
     <span id=“logo”>Logo
    here…</span>

     <ul class=“menu”>
     <li>user name</li>

     …..

    <li>logout</li>
    </ul>
    </div>
    ……
    </body>

    LEARNING CONTENTS (Events)

    6.5 Events

    Events are often triggered by the user’s interaction with the web page such moving a
    mouse over an element, selecting a radio button, clicking on an element among others.
    These are user actions that a web page can respond to. Some of the commonly used
    events are listed in the table below.

    Table 6.1

    Mouse Keyboard Form Events Document/Window


    Events Events Events

    click keypress submit load

    dblclick keydown change resize

    mouseenter keyup focus scroll

    mouseleave blur unload

    PANGASINAN STATE UNIVERSITY 3


    FM-AA-CIA-15 Rev. 0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

    Example:

    <script>
    $(function() {
    $(“#message”).click(function(){
    alert(“Hello World”);
    })
    });
    </script>

    <span id=“message”> Click Me </span>

    When you click “Click Me” text, this will display alert with the text “Hello World”.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-
    3.5.0.js"></script>
    <script>
    $(function(){

    $("p").click(function(){
    alert("Hello World");
    });

    $( "#target2" ).blur(function() {
    alert( "Handler for .blur() called." );
    });

    $( "li" ).hover(
    function() {
    $( this ).append( $( "<span>***</span>" ) );
    }, function() {
    $( this ).find( "span").last().remove();
    };

    $('#target1').keypress(function(e) {
    code = e.which;
    if(code.toString() == 13) {
    alert('Hello, '+$("#target1").val()+' You pressed
    enter!');
    }
    });

    PANGASINAN STATE UNIVERSITY 4


    FM-AA-CIA-15 Rev. 0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

    });
    </script>
    </head>
    <body>
    <p> Click Me</p>
    <input id="target1" type="text">
    <input id="target2" type="text">
    <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Chips</li>
    <li>Socks</li>
    </ul>
    </body>
    </html>

    PANGASINAN STATE UNIVERSITY 5


    FM-AA-CIA-15 Rev. 0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

    LEARNING ACTIVITY 1

    Checkpoint: Home-Based Activity

    The following will be submitted on the specified d ate. It includes softcopy of the UI and
    codes and the physic al files for the activity.

    1. Crete a navigation menu that changes color (use hover event) and when the user

    clicks the item, it loads a website to the container. See jQuery load() method.

    Item

    Item

    Item

    Item

    PANGASINAN STATE UNIVERSITY 6


    FM-AA-CIA-15 Rev. 0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

    LEARNING CONTENTS (jQuery Methods)

    6.6 jQuery Methods


    jQuery provides various methods for different tasks eg.DOM manipulation, ajax etc.
    Some of the methods are discussed as follows. For the complete set of methods and its
    categories visit api.jquery.com.

    Effects

    In jQuery, the following are methods for creating animation effects.


     Hide()
     Show()
     Toggle()
     Slide()

    jQuery hide() and show()

    With jQuery, you can hide and hsow HTML elements with the hide() and show()
    methods.

    Syntax:

     $(selector).hide(speed, callback);
     $(selector).show(speed, callback);

    Example:

    $("button").click(function(){
     $("p").hide(3000,function(){

     alert("The paragraph is now hidden");

     });
    });

    jQuery fadeIn(), fadeout(), fadeToggle(), fadeTo()


    With jQuery you can fade an element in and out of visibility. jQuery has the
    following fade methods:
     fadeIn()
     fadeOut()
     fadeToggle()
     fadeTo()

    Syntax:

     $(selector).fadeIn(speed,callback);

     $(selector).fadeOut(speed,callback);

     $(selector).fadeToggle(speed,callback);

     $(selector).fadeTo(speed,callback);

    Example:

    PANGASINAN STATE UNIVERSITY 7


    FM-AA-CIA-15 Rev. 0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

    $("button").click(function(){
    $("p").fadeToggle(3000,function(){

    alert("The paragraph is now


    shown/hidden");
    });
    });

    jQuery slideDown(), slideUp(), slideToggle

    With jQuery you can create a sliding effect on elements. It has the following slide
    methods:
     slideDown()
     slideUp()
     slideToggle()

    Syntax:

     $(selector).slideDown(speed,callback);

     $(selector).slideUp(speed,callback);

     $(selector).slideToggle(speed,callback);

    Example:

    $("button").click(function(){

    $("#flip").slideToggle(3000,function(){
    alert("The paragraph is now
    shown/hidden");
    });

    });

    PANGASINAN STATE UNIVERSITY 8


    FM-AA-CIA-15 Rev. 0 10-July-2020

    Study Guide in WS101 Web Systems and Technologies 1 Module No. 6

    LEARNING ACTIVITY 2

    Checkpoint: Home-Based Activity

    The following will be submitted on the specified date. It includes softcopy of the UI and codes
    and the physic al files for the activity.

    1. Modify the previous lab activity and integrate jQuery effects.

    SUMMARY

    REFERENCES

    Lengstorf, J. and Wald, K (2016). “Pro PHP and JQUERY. 2nd edition. Spring Science and
    Business Media: NewYork.

    Online Learning Materials


    api.juery.com
    tutorialrepublic.com/jquery-tutorial

    w3schools.com/jquery

    PANGASINAN STATE UNIVERSITY 9

    You might also like