Scribd
Upload
53 views8 pages

Lecture 2

This document provides an overview and introduction to jQuery selectors. It defines the Document Object Model (DOM) as a programming interface that allows manipulating web page structure, style, and content. It explains that $(document).ready ensures scripts only run after the DOM is loaded. It lists different jQuery selector types for finding elements by name, id, class, attributes, and more. Examples are provided to select elements and hide paragraphs with a click handler.

Uploaded by

omid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
53 views8 pages

Lecture 2

This document provides an overview and introduction to jQuery selectors. It defines the Document Object Model (DOM) as a programming interface that allows manipulating web page structure, style, and content. It explains that $(document).ready ensures scripts only run after the DOM is loaded. It lists different jQuery selector types for finding elements by name, id, class, attributes, and more. Examples are provided to select elements and hide paragraphs with a click handler.

Uploaded by

omid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 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