chapter 5 jquery อ. ยืนยง กันทะเนตร...

CHAPTER 5jQuery

อ. ยื�นยืง กั�นทะเนตรคณะเทคโนโลยื�สารสนเทศและกัารส��อสาร

มหาวิ�ทยืาล�ยืพะเยืา

1

Content• jQuery Introduction• jQuery Get Started• jQuery Syntax• jQuery Selectors• jQuery Event Methods• jQuery Effects - Hide and Show• jQuery Effects - Fading• jQuery Effects - Sliding• jQuery Effects - Animation

2

Content• jQuery Stop Animations• jQuery Callback Functions• jQuery - Chaining• jQuery - Get Content and Attributes• jQuery - Set Content and Attributes• jQuery - Add Elements• jQuery - Remove Elements• jQuery - Get and Set CSS Classes• jQuery - css() Method

3

jQuery IntroductionWhat 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.

The jQuery library contains the following features:• HTML/DOM manipulation• CSS manipulation• HTML event methods• Effects and animations• AJAX• Utilities

4

jQuery Get StartedAdding jQuery to Your Web PagesThere 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

5

Downloading jQuery Download => jQuery.com

The jQuery library is a single JavaScript file, and you reference it with the HTML

<head><script src="jquery-1.11.3.min.js"></script>

</head>

jQuery SyntaxjQuery SyntaxBasic 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".

6

jQuery Syntax (cont.)The Document Ready Event

$(document).ready(function(){

// jQuery methods go here...

});

7

jQuery SelectorsjQuery SelectorsjQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

8

http://www.w3schools.com/cssref/css_selectors.asp

jQuery Selectors (cont.)The element SelectorExample$(document).ready(function(){ $("button").click(function(){ $("p").hide(); //use <p> elements });});

9

The #id SelectorExampleExample$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); //use id #test });});

jQuery Selectors (cont.)The .class SelectorExample$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); //use class .test });});

10

More Examples of jQuery SelectorsSyntax Description

$(“*") Selects all elements$(this) Selects the current HTML element$("p.intro") Selects all <p> elements with class="intro"$("p:first") Selects the first <p> element

jQuery Event MethodsWhat are Events?

11

Mouse Events Keyboard Events Form Events Document/Window Eventsclick keypress submit loaddblclick keydown change resizemouseenter keyup focus scrollmouseleave blur unload

jQuery Syntax For Event Methods

$("p").click(function(){ // action goes here!!});

jQuery Event Methods (cont.)Commonly Used jQuery Event Methods

click()Example$("p").click(function(){ $(this).hide();});

dblclick()Example$("p").dblclick(function(){ $(this).hide();}); 12


mouseenter()Example$("#p1").mouseenter(function(){ alert("You entered p1!");});

mouseleave()Example$("#p1").mouseleave(function(){ alert("Bye! You now leave p1!");});

13


mousedown()Example$("#p1").mousedown(function(){ alert("Mouse down over p1!");});

mouseup()Example$("#p1").mouseup(function(){ alert("Mouse up over p1!");});

14


hover()Example$("#p1").hover(function(){ alert("You entered p1!");},function(){ alert("Bye! You now leave p1!");});

focus()Example$("input").focus(function(){ $(this).css("background-color", "#cccccc");});

15


focus() And blue()$("input").focus(function(){ $(this).css("background-color", “red"); }); $("input").blur(function(){ $(this).css("background-color", “green"); });

16

jQuery Effects - Hide and ShowjQuery hide() and show()

Syntax: $(selector).hide(speed,callback);

Example$("#hide").click(function(){ $("p").hide(1000);});

$("#show").click(function(){ $("p").show(500);}); 17

jQuery Effects - Hide and Show (cont.)jQuery toggle()With jQuery, you can toggle between the hide() and show() methods with the toggle() method.

Example$("button").click(function(){ $("p").toggle();});

18

jQuery Effects - FadingWith jQuery you can fade elements in and out of visibility.

jQuery Fading Methods• fadeIn()• fadeOut()• fadeToggle()• fadeTo()

19

jQuery Effects - Fading (cont.)jQuery fadeIn() And fadeOut() Method

Syntax:$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);

Example$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000);});

20

jQuery Effects - Fading (cont.)jQuery fadeToggle() Method

Syntax:$(selector).fadeToggle(speed,callback);

Example$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000);});

21

jQuery Effects - Fading (cont.)jQuery fadeTo() MethodThe jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).

Syntax:$(selector).fadeTo(speed,opacity,callback);

Example$("button").click(function(){ $("#div1").fadeTo("slow", 0.15); $("#div2").fadeTo("slow", 0.4); $("#div3").fadeTo("slow", 0.7);});

22

jQuery Effects - SlidingjQuery Sliding MethodsWith jQuery you can create a sliding effect on elements.jQuery has the following slide methods:• slideDown()• slideUp()• slideToggle()

23

jQuery Effects - Sliding (cont.)jQuery slideDown() And slideUp() MethodSyntax:

$(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);

Example$("#flip").click(function(){ $("#panel").slideDown();});

24

jQuery Effects - Sliding (cont.)jQuery slideToggle() MethodSyntax:

$(selector).slideToggle(speed,callback);

Example$("#flip").click(function(){ $("#panel").slideToggle();});

25

jQuery Effects - AnimationjQuery Animations - The animate() MethodSyntax:

$(selector).animate({params},speed,callback);

Example$("button").click(function(){ $("div").animate({left: '250px'});});

*remember to first set the CSS position property of the element to relative, fixed, or absolute!

26

jQuery Effects - Animation (cont.)jQuery Animations - The animate() MethodSyntax:

$(selector).animate({params},speed,callback);

Example$("button").click(function(){ $("div").animate({left: '250px'});});

*remember to first set the CSS position property of the element to relative, fixed, or absolute!

27

jQuery Stop AnimationsjQuery stop() MethodSyntax:$(selector).stop(stopAll,goToEnd);

Example$(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); });}); 28

<style> #panel, #flip { padding: 5px; font-size: 18px; text-align: center; background-color: #555; color: white; border: solid 1px #666; border-radius: 3px;}#panel { padding: 50px; display: none;}</style>

jQuery Callback FunctionsjQuery Callback Functionssyntax: $(selector).hide(speed,callback);

Example with Callback$("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); });});

29

jQuery - ChainingjQuery Callback Functionssyntax: $(selector).hide(speed,callback);

Example with Callback

$("button").click(function(){ $("#p1").css("color", "red").slideUp(2000).slideDown(2000);});

30

jQuery - Get Content and AttributesGet Content - text(), html(), and val()Example$("#btn1").click(function(){ alert("Text: " + $("#test").text());});$("#btn2").click(function(){ alert("HTML: " + $("#test").html());});$("#btn3").click(function(){ alert("Value: " + $("#test2").val());});

31

jQuery - Get Content and Attributes (cont.)Get Attributes - attr()Example$("button").click(function(){ alert($("#w3s").attr("href"));});

32

jQuery - Set Content and AttributesSet Content - text(), html(), and val()Example$("#btn1").click(function(){ $("#test1").text("Hello world!");});$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){ $("#test3").val("Dolly Duck");});

33

jQuery - Set Content and Attributes (cont.)Set Attributes - attr()Example$("button").click(function(){ $("#w3s").attr("href","http://www.w3schools.com/jquery");});

34

jQuery - Add ElementsAdd New HTML ContentWe will look at four jQuery methods that are used to add new content:• append() - Inserts content at the end of the selected elements• prepend() - Inserts content at the beginning of the selected

elements• after() - Inserts content after the selected elements• before() - Inserts content before the selected elements

35

jQuery - Add Elements (cont.)jQuery append() MethodExample

$("p").append("Some appended text.");

36

jQuery prepend() MethodExample

$("p").prepend("Some prepended text.");

jQuery after() and before() MethodsExample

$("img").after("Some text after");$("img").before("Some text before");

jQuery - Remove ElementsjQuery remove() MethodExample

$("#div1").remove();

37

jQuery empty() MethodExample

$("#div1").empty();

Filter the Elements to be RemovedExample

$("p").remove(".test, .demo");

jQuery - Get and Set CSS ClassesExample Stylesheet.blue { color: blue;}

38

jQuery addClass() Example$("button").click(function(){ $("h1, h2, p").addClass("blue");});

jQuery romoveClass() Example$("button").click(function(){ $("h1, h2, p").removeClass("blue");});

Or use toggleClass()$("h1, h2, p").toggleClass("blue");

jQuery - css() MethodReturn a CSS Property

$("p").css("background-color");

39

Set a CSS Property$("p").css("background-color", "yellow");

Set Multiple CSS Properties$("p").css({"background-color": "yellow", "font-

size": "200%"});

40

THE END

chapter 5 jquery อ. ยืนยง กันทะเนตร...

Documents