Scribd
Upload
5 views36 pages

2.13 JS Vs JQuery

The document provides an overview of jQuery, a JavaScript library that simplifies web scripting tasks. It covers jQuery's features, advantages, and basic syntax, along with examples of how to select and manipulate HTML elements. Additionally, it explains how to include jQuery in web pages and highlights the importance of the document ready event for executing jQuery code.

Uploaded by

Karthikeyini S
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
5 views36 pages

2.13 JS Vs JQuery

The document provides an overview of jQuery, a JavaScript library that simplifies web scripting tasks. It covers jQuery's features, advantages, and basic syntax, along with examples of how to select and manipulate HTML elements. Additionally, it explains how to include jQuery in web pages and highlights the importance of the document ready event for executing jQuery code.

Uploaded by

Karthikeyini S
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/ 36

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

You might also like