Scribd
Upload
28 views

Lecture 1

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
28 views

Lecture 1

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/ 12

Computer Science

5th Web Design


1st Semester
2023 - 2024

jQuery
Introduction

Mr. Omeed M Mohammed


Content

Introduction to Web Development


What is jQuery?
Why jQuery?
Pros jQuery.
Starting jQuery

03/09/2024 3
What is jQuery?
 The purpose of jQuery is to make it much easier to use JavaScript on your
website.

 jQuery is a lightweight, "write less, do more", JavaScript library.

 jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX
calls and DOM manipulation.

 jQuery has been designed to simplify HTML DOM tree traversal and
manipulation, as well as event handling, CSS animation, and Ajax.

03/09/2024 4
What You Should Already Know
Before you start studying jQuery, you should have a basic knowledge of:

 HTML
 CSS
 JavaScript

03/09/2024 5
jQuery library
The jQuery library contains the following features:

 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX

03/09/2024 6
Why jQuery?
There are lots of other JavaScript libraries out there, but jQuery is probably the
most popular, and also the most extendable.

Many of the biggest companies on the Web use jQuery, such as:

• Google
• Microsoft
• IBM
• Netflix

03/09/2024 7
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing
some action on the element(s).

Basic syntax is: $(selector).action()


• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
03/09/2024 8
Advantages of jQuery
1. Easy to learn
2. Write less do more
3. Excellent API Documentation
4. Cross-browser support
5. Unobtrusive

03/09/2024 9
How to use jQuery?
There are two ways to use jQuery.

1. Local Installation − You can download jQuery library on your local machine and
include it in your HTML code.

2. CDN Based Version − You can include jQuery library into your HTML code
directly from Content Delivery Network (CDN).

03/09/2024 10
Example 1
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$("h1").html("Hello, World!");
});
</script>
</head>
<body>
<h1>web Design </h1>
</body>
</html>
03/09/2024 11
03/09/2024 12

You might also like