Scribd
Upload
46 views

Jquery: Write Less Do More

This document provides an introduction to jQuery, a JavaScript library. It explains that jQuery simplifies JavaScript programming and is easy to learn. It then demonstrates common jQuery code including selecting elements, handling events, hiding/showing elements, fading elements, sliding elements, getting and setting content and attributes, adding and removing elements, working with CSS classes, traversing elements, and using AJAX.

Uploaded by

Md Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
46 views

Jquery: Write Less Do More

This document provides an introduction to jQuery, a JavaScript library. It explains that jQuery simplifies JavaScript programming and is easy to learn. It then demonstrates common jQuery code including selecting elements, handling events, hiding/showing elements, fading elements, sliding elements, getting and setting content and attributes, adding and removing elements, working with CSS classes, traversing elements, and using AJAX.

Uploaded by

Md Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 20

1

jQuery
Write less do more 16/12/2016

By iBrahim Moullablad
2

16/12/2016

What is jQuery

•jQuery is a JavaScript
Library.
•jQuery greatly simplifies
JavaScript programming.
•jQuery is easy to learn.
3

16/12/2016

Example of jQuery code


•$(document).ready(function()
{
$(“x").click(function(){
alert(“Hello Soft High
Tech”);
});
});
4

16/12/2016

jQuery Selectors
• $("p").hide()
Demonstrates the jQuery hide() method, hiding all
<p> elements.
• $("#test").hide()
Demonstrates the jQuery hide() method, hiding the
element with id="test".
• $(".test").hide()
Demonstrates the jQuery hide() method, hiding all
elements with class="test".
• $(this).hide()
Demonstrates the jQuery hide() method, hiding the
current HTML element.
5

16/12/2016

jQuery Events
• jQuery click()
Demonstrates the jQuery click() event.
• jQuery dblclick()
Demonstrates the jQuery dblclick() event.
• jQuery mouseenter()
Demonstrates the jQuery mouseenter() event.
• jQuery mouseleave()
Demonstrates the jQuery mouseleave() event.
• jQuery mousedown()
Demonstrates the jQuery mousedown() event.
• jQuery mouseup()
Demonstrates the jQuery mouseup() event.
• jQuery hover()
Demonstrates the jQuery hover() event.
• jQuery focus() and blur()
Demonstrates the jQuery focus() and blur() events.
6

16/12/2016

jQuery Hide/Show
• jQuery hide()
Demonstrates the jQuery hide() method.
• jQuery hide() and show()
Demonstrates jQuery hide() and show()
methods.
• jQuery hide()
Another hide demonstration. How to hide parts
of text.
7

16/12/2016

jQuery Fade
• jQuery fadeIn()
Demonstrates the jQuery fadeIn() method.
• jQuery fadeOut()
Demonstrates the jQuery fadeOut() method.
• jQuery fadeTo()
Demonstrates the jQuery fadeTo() method.
8

16/12/2016

jQuery Slide
• jQuery slideDown()
Demonstrates the jQuery slideDown() method.
• jQuery slideUp()
Demonstrates the jQuery slideUp() method.
9

16/12/2016

jQuery HTML Get Content and


Attributes
• jQuery text() and html() - Get content
Get content with the jQuery text() and html()
methods.
• jQuery val() - Get content
Get the value of a form field with the jQuery val()
method.
• jQuery attr() - Get attribute value
Get the value of an attribute with the jQuery
attr() method.
10

16/12/2016

jQuery Set Content and Attributes


• jQuery text(), html(), and val() - Set content
Set content with the jQuery text(), html() and
val() methods.
• jQuery attr() - Set attribute value
Set attribute value with the jQuery attr()
method.
11

16/12/2016

jQuery Add Elements/Content


• jQuery append()
Insert content at the end of the selected HTML
elements.
• jQuery prepend()
Insert content at the beginning of the selected
HTML elements.
• jQuery after() and before()
Insert content after and before the selected
HTML elements.
12

16/12/2016

jQuery Remove Elements/Content


• jQuery remove()
Remove the selected element(s).
• jQuery empty()
Remove all child elements of the selected
element(s).
• jQuery remove() - with a parameter
Filter the elements to be removed
13

16/12/2016

jQuery Get and Set CSS Classes


• jQuery addClass()
Add class attributes to different elements.
• jQuery addClass() - Multiple classes
Specify multiple classes within the addClass()
method.
• jQuery removeClass()
Remove a specific class attribute from different
elements.
14

16/12/2016

jQuery css() Method

• jQuery css() - return CSS property


Return the value of a specified CSS property
from the FIRST matched element.
• jQuery css() - set CSS property
Set a specified CSS property for ALL matched
elements.
• jQuery css() - set CSS properties
Set multiple CSS properties for ALL matched
elements.
15

16/12/2016

jQuery Traversing Ancestors


• jQuery parent()
Demonstrates the jQuery parent() method.
• jQuery parents()
Demonstrates the jQuery parents() method.
• jQuery parentsUntil()
Demonstrates the jQuery parentsUntil() method.
16

16/12/2016

jQuery Traversing Descendants


• jQuery children()
Demonstrates the jQuery children() method.
• jQuery find()
Demonstrates the jQuery find() method.
17

16/12/2016

jQuery Traversing Filtering


• jQuery first()
Demonstrates the jQuery first() method.
• jQuery last()
Demonstrates the jQuery last() method.
• jQuery eq()
Demonstrates the jQuery eq() method.
• jQuery not()
Demonstrates the jQuery not() method.
18

16/12/2016

jQuery AJAX load() Method


• $(document).ready(function(){
• $("button").click(function(){
• $("#div1").load("demo_test.txt",
function(responseTxt, statusTxt, xhr){
• if(statusTxt == "success")
• alert("External content loaded successfully!");
• if(statusTxt == "error")
• alert("Error: " + xhr.status + ": " +
xhr.statusText);
• });
• });
• });
19

16/12/2016

jQuery AJAX get() and post() Methods


• $(document).ready(function(){
• $("button").click(function(){
• $.post("demo_test_post.asp",
• {
• name: "Donald Duck",
• city: "Duckburg"
• },
• function(data,status){
• alert("Data: " + data + "\nStatus: " + status);
• });
• });
• });
20

16/12/2016

Thank U 4 UR Time!

You might also like