Scribd
Upload
61 views

J Query 1

Uploaded by

jasneet kaur
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
61 views

J Query 1

Uploaded by

jasneet kaur
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

What is 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

Before you start studying jQuery, you should have a basic knowledge of:

 HTML
 CSS
 JavaScript

jQuery Running Programs:


1. Download the jQuery library file from the official website
2. Use online the jQuery CDN links

Introduction to jQuery
 jQuery 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.
 jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the
principle "write less, do more".
 It's easy-to-use APIs makes the things like HTML document traversal and
manipulation, event handling, adding animation effects to a web page much
simpler that works seamlessly across all the major browsers like Chrome,
Firefox, Safari, Internet Explorer, etc.

Applications of jQuery
 It can easily select elements to perform manipulation.
 It can easily create effect like show or hide elements, sliding transition, and
so on.
 It can easily create complex CSS animation with fewer lines of code.
 It can easily manipulate DOM elements and their attributes.
 It can easily implement Ajax to enable asynchronous data exchange between
client and server.
 It can easily traverse all around the DOM tree to locate any element.
 It can easily perform multiple actions on an element with a single line of
code.
 It can easily get or set dimensions of the HTML elements.

Advantages of using jQuery


 Save lots of time — It can save lots of time and efforts by using the jQuery inbuilt
effects and selectors and concentrate on other development work.
 Simplify common JavaScript tasks — jQuery considerably simplifies the
common JavaScript tasks. Now It can easily create feature rich and interactive web
pages with fewer lines of codes, a typical example is implementing Ajax to update
the content of a page without refreshing it.
 Easy to use — jQuery is very easy to use. Anybody with the basic working
knowledge of HTML, CSS and JavaScript can start development with jQuery.
 Compatible with browsers — jQuery is created with modern browsers in mind
and it is compatible with all major modern browsers such as Chrome, Firefox,
Safari, Internet Explorer, etc.
 Absolutely Free — It is completely free to download and use.

Standard jQuery Syntax


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

Example

<script>
$(document).ready(function()
{
// Some code to be executed...
});
</script>

Explanation of code
If It are completely new to the jQuery, It might think what that code was all about. OK, let's go through each of
the parts of this script one by one.
 The <script> element — Since jQuery is just a JavaScript library, so the jQuery code can be placed inside
the <script> element. However, if It want to place it in an external JavaScript file, which is preferred, It just
remove this part.
 The $(document).ready(handler); — This statement is typically known as ready event. Where the handler is
basically a function that is passed to the ready() method to be executed safely as soon as the document is ready
to be manipulated i.e. when the DOM hierarchy has been fully constructed.

Example

<html>
<head>
<title>First jQuery Example</title>
<script src="jquery-3.6.4.min.js"></script>
<script >
$(document).ready(function()
{
$("p").css("background-color", "red");
});
</script>
</head>
<body>
<p>The first paragraph is selected.</p>
<p>The second paragraph is selected.</p>
<p>The third paragraph is selected.</p>
</body>
</html>

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: $().

The element Selector


The jQuery element selector selects elements based on the element name. You can select
all <p> elements on a page like this:

$("p")
Example

When a user clicks on a button, all <p> elements will be hidden:

Example
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.4.min.js"></script> <script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>

The #id Selector


The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id
should be unique within a page, so you should use the #id selector when you want to find a
single, unique element. To find an element with a specific id, write a hash character, followed by
the id of the HTML element:

$("#test")

Example

When a user clicks on a button, the element with id="test" will be hidden:

Example
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

The .class Selector


The jQuery .class selector finds elements with a specific class. To find elements with a specific
class, write a period character, followed by the name of the class:

$(".test")

Example

When a user clicks on a button, the elements with class="test" will be hidden:

Example
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

You might also like