Scribd
Upload
72 views18 pages

Jquery: Ia Lab

jQuery is a JavaScript library that simplifies HTML/DOM manipulation, CSS manipulation, event handling, animation, and Ajax interactions for rapid web development. It works by using CSS-style selectors to select and manipulate HTML elements via JavaScript. Some key points: - jQuery greatly reduces the amount of code needed for common tasks like selecting elements, animating properties, handling events, and making Ajax requests. - jQuery selectors allow selecting elements based on various attributes like ID, class, type and more using CSS-style syntax. - Common event methods in jQuery include click, change, mouseenter and more to define actions in response to user interactions. - jQuery provides methods like load

Uploaded by

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

Jquery: Ia Lab

jQuery is a JavaScript library that simplifies HTML/DOM manipulation, CSS manipulation, event handling, animation, and Ajax interactions for rapid web development. It works by using CSS-style selectors to select and manipulate HTML elements via JavaScript. Some key points: - jQuery greatly reduces the amount of code needed for common tasks like selecting elements, animating properties, handling events, and making Ajax requests. - jQuery selectors allow selecting elements based on various attributes like ID, class, type and more using CSS-style syntax. - Common event methods in jQuery include click, change, mouseenter and more to define actions in response to user interactions. - jQuery provides methods like load

Uploaded by

nada abdelrahman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

jQuery

IA Lab
Intro

One important thing to know is that jQuery is


just a JavaScript library. All the power of
jQuery is accessed via JavaScript, so having a
strong grasp of JavaScript is essential for
understanding, structuring, and debugging your
code. While working with jQuery regularly can,
over time, improve your proficiency with
JavaScript, it can be hard to get started
writing jQuery without a working knowledge of
JavaScript's built-in constructs and syntax.
What is jQuery

 jQuery is a lightweight, "write less, do more", JavaScript


library.
 The purpose of jQuery is to make it much easier to use
JavaScript on your website.
 jQuery takes a lot of common tasks that require many
lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
 jQuery also simplifies a lot of the complicated things from
JavaScript, like AJAX calls and DOM manipulation.
What is jQuery

 ThejQuery library contains the following


features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
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
How jQuery Works
Adding jQuery to Your Web Pages

 There are several ways to start using jQuery on


your web site. You can:
 Download the jQuery library from jQuery.com
<head>
<script src="jquery-
3.4.1.min.js"></script>
</head>
 Include jQuery from a CDN, like Google

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
jQuery Syntax

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".
jQuery Selectors

 jQuery selectors are one of the most important parts of


the jQuery library.
 Query 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: $().
jQuery Selectors
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to
"_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to
"_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
jQuery Event Methods

 jQuery is tailor-made to respond to events in an HTML


page.
 All the different visitors' actions that a web page can
respond to are called events.
 An event represents the precise moment when something
happens.
 Examples:
 moving a mouse over an element
 selecting a radio button
 clicking on an element
jQuery Event Methods

Mouse Events Keyboard Events Form Events Document/Window


Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
jQuery Syntax For Event Methods

 In jQuery, most DOM events have an equivalent jQuery method.


 To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
 The next step is to define what should happen when the event fires. You must
pass a function to the event:
$("p").click(function(){
// action goes here!!
});
<html>
<head>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body></html>
jQuery and AJAX?

 jQuery provides several methods for AJAX


functionality.
 With the jQuery AJAX methods:
 you can request text, HTML, XML, or JSON from
a remote server using both HTTP Get and HTTP
Post
 youcan load the external data directly into the
selected HTML elements of your web page
jQuery load() Method
 The jQuery load() method is a simple, but powerful
AJAX method.
 The load() method loads data from a server and puts
the returned data into the selected element.
 Syntax:
$(selector).load(URL,data,callback);
 The required URL parameter specifies the URL you
wish to load.
 The optional data parameter specifies a set of
querystring key/value pairs to send along with the
request.
 The optional callback parameter is the name of a
function to be executed after the load() method is
completed.
jQuery - AJAX get() and post() Methods

 Two commonly used methods for a request-response


between a client and server are: GET and POST.
 GET - Requests data from a specified resource
 POST - Submits data to be processed to a specified
resource
 GET is basically used for just getting (retrieving) some
data from the server. Note: The GET method may return
cached data.
 POST can also be used to get some data from the server.
However, the POST method NEVER caches data, and is
often used to send data along with the request.
Thank you

You might also like