Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 2

    Uploaded by

    omid
    7 views8 pages

    Original Title

    LECTURE 2

    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
    7 views8 pages

    Lecture 2

    Uploaded by

    omid

    Copyright:

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

    Computer Science

    5th Web Design


    1st Semester
    2023 - 2024

    jQuery
    jQuery Selectors

    Mr. Omeed M Mohammed


    What is DOM?
     Document Object Model (DOM) - allows us to create, change, or remove elements from the
    HTML or XML documents.

     The Document Object Model (DOM) is a programming interface for web documents. It
    represents the page so that programs can change the document structure, style, and content.
    The DOM represents the document as nodes and objects; that way, programming languages can
    interact with the page.

    03/09/2024 2
    What is $(document).ready(function(){} )

    $(document).ready is a jQuery event. It fires as soon as the DOM is loaded and


    ready to be manipulated by script. This is the earliest point in the page load
    process where the script can safely access elements in the page's html DOM. This
    event is fired before all the images, css etc.. are fully loaded.

    03/09/2024 3
    jQuery Selectors
     jQuery selectors allow you to select and manipulate HTML element(s).

     jQuery selectors are used to "find" (or select) HTML elements based on their
    name, id, classes, types, attributes, values of attributes and much more. It's
    based on the existing CSS Selectors, and in addition, it has some own custom
    selectors.

     All selectors in jQuery start with the dollar sign and parentheses: $().

    03/09/2024 4
    jQuery Selectors

    jQuery Selectors can find HTML elements (ie. Select HTML elements) based on the
    following:

     HTML element Name jQuery Selector Syntax


     Element ID
    $(document).ready(function(){ $
     Element Class (selector) });
     Element attribute name
     Element attribute value

    03/09/2024 5
    jQuery Selectors

    Selector Name Description

    The element Represents an HTML element name available in the


    Selector DOM. For example $('p') selects all paragraphs <p> in
    the document.

    Represents a HTML element available with the given ID


    The #id in the DOM. For example $('#some-id') selects the single
    Selector element in the document that has some-id as element
    Id.

    The Represents a HTML elements available with the given


    .class class in the DOM. For example $('.some-class') selects all
    Selector elements in the document that have a class of some-
    class.

    03/09/2024 6
    Example #1
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $("p").hide();
    });
    });
    </script>
    </head>
    <body>

    <h2>This is a heading</h2>
    <p>1st paragraph.</p>
    <p>2nd paragraph.</p>
    <button>Click to hide all paragraphs</button>
    </body>
    </html>
    03/09/2024 7
    03/09/2024 8

    You might also like