J Query

UNIT 5
JQUERY API
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.
• The jQuery library contains the following features:
– HTML/DOM manipulation
– CSS manipulation
– HTML event methods
– Effects and animations
– AJAX
– Utilities
What jQuery can do?
It can make things like:
• HTML document traversal and manipulation,
• Event handling,
• Animation,
• Ajax much simpler with an easy to use API that
works across multiple browsers.
• It is made for easy manipulation of elements on
web page.
Who developed jQuery?
• jQuery’s original creator is John Resig, whose
website is located at www.ejohn.org.
• John resides in Brooklyn, New York, and is
presently the Dean of Computer Science at Khan
Academy.
• John still helps with defining the direction and
goals of the jQuery project, but jQuery has largely
been transitioned to a large team of people.
Obtaining and Installing jQuery
There are several ways to start using jQuery on your
web site. You can:
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google.
There are two versions of jQuery available for
downloading:
• Production version - this is for your live website
because it has been minified and compressed
• Development version - this is for testing and
development (uncompressed and readable code)
• Both versions can be downloaded from jQuery.com.
• The jQuery library is a single JavaScript file, and you
reference it with the HTML <script> tag (notice that
the <script> tag should be inside the <head> section):
Obtaining and Installing jQuery
• <head>
<script src="jquery-3.3.1.min.js"></script>
</head>
• Place the downloaded file in the same directory
as the pages where you wish to use it.
jQuery CDN
• If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
• Both Google and Microsoft host jQuery.
• To use jQuery from Google or Microsoft, use one of the
following:
Google CDN:
• <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.
3.1/jquery.min.js"></script>
</head>
Microsoft CDN:
• <head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquer
y-3.3.1.min.js"></script>
</head>
jQuery Syntax (Programming Conventions)
• With jQuery you select (query) HTML elements
and perform "actions" on them.
• 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)
Simple 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".
Programming Conventions
• The Document Ready Event.
• $(document).ready(function(){
// jQuery methods go here...
});
• This is to prevent any jQuery code from running
before the document is finished loading (is ready).
• The jQuery team has also created an even shorter
method for the document ready event:
• $(function(){
// jQuery methods go here...
});
Markup and CSS Conventions
• It’s important that your web documents be well organized,
cleanly written, and appropriately named and stored.
• When selecting id and class names, make sure that they are
descriptive and are contained in a namespace.
• When defining CSS, avoid using generic type selectors.
Make your CSS more specific. This can also help with
preventing conflicts.
• Organize your files in a coherent manner. Group files from
the same project in the same folder; separate multiple
projects with multiple folders.
• Avoid inaccessible markup. Stay away from frames, where
possible.
• Organize your markup using semantically appropriate
elements. Place paragraphs in <p> elements. Place lists in
<ul> or <ol> elements. Use <h1> through <h6> for
headings, and so on.
JavaScript Conventions
• Include all script in external documents.
• Write clean, consistent code—JavaScript code
should be neatly formatted and organized in a
consistent, predicable way.
• Namespace JavaScript code—JavaScript variables,
functions, objects, and the like should be
namespaced to minimize potential namespace
conflicts and collisions with other JavaScript
applications.
• Avoid browser detection—Browser detection
should be avoided where possible. Instead,
SELECTING AND FILTERING
• Using markup and CSS, we can assign id and class
names to elements, and we can control the
presentational aspects of elements specifically using
selectors.
• In jQuery, the concept of selectors as applied to CSS
is also applied to the concept of the Document Object
Model (DOM).
• In the DOM, every element that exists in the markup
of our document is available and we can traverse the
DOM and select the elements we want to work with
using selectors, just like we use in your CSS style
sheets.
• After selecting elements from the DOM, we can apply
behaviour to them.
• 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:.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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:
<!DOCTYPE html>
<html>
<head>
<script>
$("#test").hide();
});
});
</script>
</head>
<body>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">

$(document).ready(function() {
var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>
<body>
<div>
<em title = "Bold and Brave">This is first paragraph.</em>
<p id = "myid">This is second paragraph.</p>
<div id = "divid"></div>
</div>
</body></html>
SET THE VALUE OF ATTRIBUTE
<html>
<head>
<title>The jQuery Example</title>
<base href="https://www.tutorialspoint.com" />
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">

$(document).ready(function() {
$("#myimg").attr("src", "/jquery/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
</div>
</body>
</html>
The class Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
</body>
</html>
The class Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
</body>
</html>
The class Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$("p.intro").hide();
});
});
</script>
</head>
<body>
<h2 class="intro">This is a heading</h2>
<p class="intro">This is a paragraph.</p>

</body>
</html>
The universal Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$("*").hide();
});
});
</script>
</head>
<body>
</body>
</html>
The this Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$(this).hide();
});
});
</script>
</head>
<body>
</body>
</html>
The first Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$("p:first").hide();
});
});
</script>
</head>
<body>
</body>
</html>
The first Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$("ul li:first-child").hide();
});
});
</script> </head>
<body>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>Click me</button></body>
</html>
The attribute Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$("[href]").hide();
});
});
</script>
</head>
<body>
<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
<p><a href="https://www.w3schools.com/css/">CSS Tutorial</a></p>
</body>
</html>
The attribute with value Selector:
<!DOCTYPE html>
<html>
<head>
<script>
$("a[target='_blank']").hide();
});
});
</script></head><body>
<p><a href="https://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="https://www.w3schools.com/css/">CSS Tutorial</a></p>
</body>
</html>
The attribute with value Selector:
<tr>
<!DOCTYPE html> <td>Centro comercial Moctezuma</td>
<html> <td>Mexico</td>
<head> </tr>
<script <tr>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jque <td>Ernst Handel</td>
ry.min.js"></script> <td>Austria</td>
<script> </tr>
$(document).ready(function(){ <tr>
$("tr:even").css("background-color", "yellow"); <td>Island Trading</td>
}); <td>UK</td>
</script> </tr>
</head> </table>
<body>
</body>
<h1>Welcome to My Web Page</h1> </html>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
• jQuery provides several methods such as filter(), first(), last(), eq(), slice(), has(), not(), etc. that you can use to
narrow down the search for elements in a DOM tree.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery first() Demo</title>
<style type="text/css">
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("ul li").first().addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Last list item</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selecting an Element by Index in jQuery</title>
.highlight{
background: yellow;
}
</style>
$("ul li").eq(1).addClass("highlight");
});
</script>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Fourth list item</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filtering the Selection of Elements in jQuery via Selectors</title>
.highlight{
background: yellow;
}
</style>
$("ul li").filter(":even").addClass("highlight");
});
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filtering the Selection of Elements in jQuery via Function</title>
.highlight{
background: yellow;
}
</style>
$("ul li").filter(function(index){
return index % 2 !== 0;
}).addClass("highlight");
});
</script>
</head>
<body>
<h2>Another Unordered List</h2>
<ul>
</ul>
</body></html>
<html >
<head>
<title>Selecting Elements that Contain Specific Child Elements in jQuery</title>
.highlight{
background: yellow;
}
</style>
$("ul li").has("ul").addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>
<ul>
<li>Section 2.1</li>
</ul>
</li>
<li>Section 4</li> </ul>
</body>
</html>
Slicing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selecting the Elements by Range of Indices in jQuery</title>
.highlight{
background: yellow;
}
</style>
$("ul li").slice(0, 2).addClass("highlight");
});
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
Working with an Element’s Relatives
• Parent() and parents(): used to select an element’s
parent and ancestors.
• Children(): used to select an element’s immediate
children
• Siblings(): used to select an elements siblings
(surrounding elements)
• Prev(): previous element
• Next(): next element
• Prevall(): all previous sibling elements
• Nextall(); all siblings next to the current element
• Not(): used to remove elements from a selection
using selector.
• Eq(): used to select an element based on its offset or
index value.
Adding to a selection
<!DOCTYPE html>
<html>
<head>
<script>
$("h1").add("p").add("span").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome</h1>
<p>A p element.</p>
<p>Another p element.</p>
<span>A span element.</span>

<span>A span element.</span><br><br>
<div>This example adds the same css style for both p and span elements, as the existing h1 element.</div>
</body>
</html>
The various Event wrapper methods
• Click(): Attaches/Triggers the click event
• Hover(): Attaches two event handlers to the
hover event
• On(): Attaches event handlers to elements
• Off(): Removes event handlers attached with the
on() method
Click event
Hover event
Attaching other events
• On () method: Attaches event handlers to
elements
Attaching persistent event handlers
• On() method: Attaches event handlers to
elements
removing event handlers
• Off method:
Creating custom events
• Custom events are created using the same
methods that you use to attach standard events;
on() and off().
• The only difference is that custom events require
custom names .
• Custom names should simply require whatever
you intend the event to provide.
Manipulating content and attributes
• Setting, Retrieving, and Removing Attributes,
– Attr()
– Removeattr()
• Setting Multiple Attributes: attr() method
• Manipulating Class Names
– Addclass()
– Hasclass()
– Removeclass()
– Toggleclass()
• Manipulating HTML and Text Content
– Html() method
– Text() method
– Append()
– Prepend()
– Insertbefore()
– Insertafter()
• Replacing Elements: replacewith() and replaceall() methods.
• Removing Content: empty () and remove() methods
• Cloning Content: clone() method
Iteration of Arrays and objects
• Enumerating arrays: means to examine items one
by one
– Each() method : used for enumerating or iterating over an
array
• Filtering a selections and arrays
– Filter() method
– Grep () method
• Mapping a Selection or an Array: map() method
• Array utility methods:
– makeArray(data) method
– inArray()
– Merge() method
End of UNIT 5

J Query

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

J Query

Uploaded by

Copyright:

Available Formats

UNIT 5

<script type = "text/javascript" language = "javascript">

<script type = "text/javascript" language = "javascript">

<h2 class="intro">This is a heading</h2>

<p class="intro">This is a paragraph.</p>

<span>A span element.</span>

You might also like