Scribd
Upload
37 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
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
37 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
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