lec 14-15 Jquery_All About J-query_.pptx

Lecture 14 -15
(Overview / Basics)

 jQuery Introduction
 Using jQuery
 Making sure Document is Ready
 jQuery Selectors
 jQuery Statement
 Reading / Setting CSS Properties
 Adding / Removing / Modifying Elements
 Basic Animation & Effects
 AJAX
 Learn More: http://api.jquery.com/

 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 AJAX( Asynchronous java
scripts and X ML) and DOM manipulation

 Jquery Feature
 HTML/DOM and CSS manipulation
 Cross-browser Compatibility (jQuery will run exactly the same in all
major browsers)
 HTML Events and methods
 Ajax requests http requests made by browsers
 Helpful Utilities like .In Array () and .Extend()
 Plugins simply new method that we use to extend j query
prototype objects

1. For short selectors
2. Variety of Animation Functions
3. Easy Dom Manipulation
4. Easy CSS Styling
5. Easy DOM traversing
6. SimpleAjax Code

 Two main Benefits
1. Browser Independent
2. Increase Coding Speed

 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):

3 steps to implement Jquery in HTML
Step 1: Download Jquery.js file
Step 2: Include Jquery .jsfile in html file
step 3 : Do Jquery code in <Script >tag

<html>
<head>
<script src: jquery.js></script>
<script>
</script>
</head>
ORYou can write script tag inside body
<Body>
<h1> Jquery </h1 >
<Script>
</script>
</body>

Notepad
Notepad ++
VS Code
Sublime
Atom

<html>
<head>
<title> working with jquery</title>
<script src: “jquery-3.7.1.min.js”></script>
</head>
<body>
<h1>jquery implementation</h1>
</body>
</html>

 If you don't want to download and host
jQuery yourself,
you can include it from aCDN (Content
Delivery Network).
 Google is an example of someone who host
jQuery:

<html>
<head>
<title>Using jQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7
.1/jquery.min.js"></script>
</head>
<body>
<h1>Using jQuery</h1>
</body>
</html>

Basic syntax is:The jQuery syntax is tailor-made for selecting HTML
elements and performing some action on the element(s).
$(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)
Example:
 .
$("p").hide() Hides all <p> elements
$(".test").show() Displays HTML elements having class=“test”

 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:

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ // Allow to execute a function when doc is fully loaded
$("button").click(function(){
$("*").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</button>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<button>Click me to hide paragraphs</button>
</body>

<!DOCTYPE html>
<html>
<head>
<script>
$(this).hide();
});
});
</script>
</head>
<body>
</body>

<!DOCTYPE html><html>
<head>
<script>
$("ul li:first").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>
</body>

.html() Sets or returns the content of selected elements
.css() Sets or returns one or more style properties for selected elements
.before() Inserts content before selected elements
.append() Inserts content at the end of selected elements
.attr() Sets or returns attributes/values of selected elements
.text() Sets or returns the text content of selected elements
.val() Sets or returns the value attribute of the selected elements (for
form elements)
.remove() Removes all child nodes and content from selected elements

<!DOCTYPE html>
<html>
<head>
<script>
$("p").before("<p>Hello world!</p>");
});
});
</script>
</head>
<body>
<button>Insert content before each p element</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
$("p").remove();
});
});
</script>
</head>
<body>
<button>Remove all p elements</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
$("p").html("Hello world!");
});
});
</script>
</head>
<body>
<button>Change content of all p elements</button>
</body>
</html>

Add New Elements:
Removing Elements:
See: Example 04

All the different visitors' actions that a web page can respond to are
called events.The jQuery event handling methods are core functions
in jQuery
An event represents the precise moment when something happens.
Examples:
 moving a mouse over an element
 selecting a radio button
 clicking on an element
 The term "fires/fired" is often used with events. Example: "The
keypress event is fired, the moment you press a key".

 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 even
$("p").click(function(){
// action goes here!!
});
See: http://www.w3schools.com/jquery/jquery_events.asp

 The click() method attaches an event handler
function to an HTML element.
 The function is executed when the user clicks
on the HTML element
 The $(document).ready() method allows us to
execute a function when the document is
fully loaded

See: http://www.w3schools.com/jquery/jquery_ref_events.asp

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></scri
pt>
<script>
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>

<!DOCTYPE html>
<html>
<head>
<script>
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>

 Q.no1 SelectAll button elements and input
element's of type =button using Jquery
 Q.no: 02 Insert contents “Long Live
Pakistan” at the end of selected elements
 Q.no 03 Remove the child elements from
the selected elements.
 Q.no 04 hide and show selected Elements
using hide and show method.

lec 14-15 Jquery_All About J-query_.pptx

More Related Content

Similar to lec 14-15 Jquery_All About J-query_.pptx

More from MuhammadAbubakar114879

Recently uploaded

lec 14-15 Jquery_All About J-query_.pptx