Scribd
Upload
35 views

Jquery

This document discusses jQuery, a JavaScript library that simplifies HTML document manipulation. It allows selecting elements using CSS-style selectors, adding/removing/modifying attributes and styles, handling events, and animating elements. Some key points covered include downloading and including jQuery, selecting elements, manipulating attributes and styles, adding event listeners, inserting/removing elements, and traversing the DOM tree up and down. jQuery simplifies tasks like DOM manipulation, event handling, animation, and Ajax interactions that commonly require many lines of JavaScript code to accomplish.

Uploaded by

Suhaib Rehman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
35 views

Jquery

This document discusses jQuery, a JavaScript library that simplifies HTML document manipulation. It allows selecting elements using CSS-style selectors, adding/removing/modifying attributes and styles, handling events, and animating elements. Some key points covered include downloading and including jQuery, selecting elements, manipulating attributes and styles, adding event listeners, inserting/removing elements, and traversing the DOM tree up and down. jQuery simplifies tasks like DOM manipulation, event handling, animation, and Ajax interactions that commonly require many lines of JavaScript code to accomplish.

Uploaded by

Suhaib Rehman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

WEB DEVELOPMENT

jquery
SUHAIB REHMAN
TRAINER
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.
Include jquery Visit:” https://jquery.com/download/”
To minimize the use of js and css
document.querySelector(“h1”)

$(“h1”)

document.querySelectorAll(“h1”)

$(“h1”)
Adding CSS

$("h1").css("color","red")

Console.log($("h1").css("color"))
Retuns the current value
Adding CSS

$("h1").addClass(“menu”)

$("h1").removeClass(“menu”)

$("h1"). hasClass(“menu”)
Change text

$("h1").text(“Hi! How are you”)

$(“button").html(“<em>click</em”)
Click

$(“button").text(“<em>click</em”)
<em>Click</em>
Manipulate Attributes

$(“img").attr(“src”)
Get attribute

$(“a").attr(“href”,”http://www.google.com”)
set attribute
Add Event Listener

$(“h1").click(function(){

$(“h1").css(“color”,” purple”)
})

$(“button").click(function(){

$(“h1").css(“color”,” purple”)
})
Add Event Listener

$(“h1").on(“keypress”,function(event){

$(“h1"). text(event.key)
})

$(“button").click(function(){

$(“h1").css(“color”,” purple”)
})
Add Elements in jquery
$(“h1").before(““<button>New</button>”)
<button>New</button> <h1>hello</h1>

$(“h1").after(““<button>New</button>”)
<h1>hello</h1> <button>New</button>

$(“h1").append(““<button>New</button>”)
<h1>hello <button>New</button> </h1>

$(“h1").prepend(““<button>New</button>”)
<h1> <button>New</button> hello </h1>
Jquery Effects

With the help of jquery, we can apply amazing effects like


• show,
<script>
• hide,
$(document).ready(function() {
• fade-in,
$("#show").click(function(){
• fade-out,
$("#box").fadeIn(1000);
• slide-up,
});
• slide-down,
$("#hide").click(function(){
• toggle
$("#box").fadeOut(1000);
});
});
</script>
Jquery Animation

$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Call back function use

$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
});
Jquery Traversing

With jQuery you can traverse up the DOM tree to find ancestors of an element.

Traversing Up the DOM Tree


Three useful jQuery methods for traversing up the DOM tree are:
The parent() method returns the direct parent element of the
1. parent() selected element.

2. parents() This method only traverse a single level up the DOM tree.
3. parentsUntil()
The parents() method returns all ancestor elements of the
selected element, all the way up to the document's root
element (<html>).
The parentsUntil() method returns all ancestor elements
between two given arguments.
parent
parents

Returns all the ancestors of ul that are div


Parent until

Returns all the ancestors of ul that are div


Jquery Traversing

With jQuery you can traverse up the DOM tree to find ancestors of an element.

Traversing Down the DOM Tree


Three useful jQuery methods for traversing up the DOM tree are:

1. children()
2. find()
The children() method returns all direct children of the selected element.
This method only traverses a single level down the DOM tree.

The find() method returns descendant elements of the selected


element, all the way down to the last descendant.

You might also like