PHP & JS FRAMEWORK 1
20CSI504-PHP & JS FRAMEWORK
MODULE :II
MODULE NAME : J AVA S C R I P T F U N D A M E N TA L S
TOPIC : J S V S J Q U E RY
FA C U LT Y : D R . S . K A RT H I K E Y I N I , A P / M . T E C H C S E
JQUERY
▣ jQuery is a JavaScript Library.
▣ jQuery greatly simplifies JavaScript programming.
▣ jQuery is easy to learn.
▣ jQuery is a powerful and widely used JavaScript library to simplify
common web scripting task.
What You Can Do
with jQuery
▣ There are lot more things you can do with jQuery.
▣ You can easily select elements to perform manipulation.
▣ You can easily create effect like show or hide elements, sliding
transition, and so on.
▣ You can easily create complex CSS animation with fewer lines of
code.
▣ You can easily manipulate DOM elements and their attributes.
▣ You can easily implement Ajax to enable asynchronous data exchange
between client and server.
▣ You can easily traverse all around the DOM tree to locate any element.
▣ You can easily perform multiple actions on an element with a single line
of code.
▣ You can easily get or set dimensions of the HTML elements.
▣ The list does not end here, there are many other interesting things that
you can do with jQuery.
Advantages of Using
jQuery
▣ Save lots of time
▣ Simplify common JavaScript tasks
▣ Easy to use
▣ Compatible with browsers
▣ Absolutely Free
What You Should
Already Know
Before you start studying jQuery, you should have a basic knowledge
of:
▣ HTML
▣ CSS
▣ JavaScript
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.
JQUERY LIBRARY
The jQuery library contains the following features:
▣ HTML/DOM manipulation
▣ CSS manipulation
▣ HTML event methods
▣ Effects and animations
▣ AJAX
▣ Utilities
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
▣ Include jQuery from a CDN, like Google
CODE TO ACCESS
JQUERY
▣ 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:
▣ <head>
<script src="jquery-3.4.1.min.js"></script>
</head>
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.
▣ Google CDN:
▣ <head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
JQUERY MICROSOFT
CDN
Microsoft CDN:
▣ <head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.4.1.min.js"></script>
</head>
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".
The Document Ready
Event
▣ You might have noticed that all jQuery methods in our examples,
are inside a 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).
EXAMPLE
▣ Here are some examples of actions that can fail if methods are
run before the document is fully loaded:
▣ Trying to hide an element that is not created yet
▣ Trying to get the size of an image that is not loaded yet
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.
▣ 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")
<!DOCTYPE html>
<html> <head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3
.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(“tr:odd").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>
Example: Select
Elements by Name
<script>
$(document).ready(function () {
$('p').append('This is paragraph.'); // appends text to all p
elements
$('div').append('This is div.'); // appends text to all div
elements
});
</script>
<body>
<div>
<p>hello</p>
<p></p>
</div>
<p></p> helloThis is paragraph.
This is paragraph.
<div></div>
This is div.
</body>
This is paragraph.
This is div.
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")
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.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>
Select Elements by Id
▣ The following figure shows which DOM elements will be returned from $
('#myDiv1') & $'(#prg2').
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")
<head><script>
$(document).ready(function(){
$("button").click(function(){
$(“p.test").hide();
});
});
</script> </head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p class=“test2”>This is another paragraph.</p>
<p
<p
<button>Click me</button>
</body>
More Examples of jQuery Selectors
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "yellow");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "red");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>
jQuery Custom
Selector
▣ In addition to the CSS defined selectors, jQuery provides its own
custom selector to further enhancing the capabilities of selecting
elements on a page.
<script>
$(document).ready(function(){
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
});
</script>
Exercise
1. Hide all odd table rows in a table.
2. Hide all elements with an href attribute.
3. Hide all elements in the document
36
