jquery - universitas indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jquery.pdf · jquery •...
TRANSCRIPT
![Page 1: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/1.jpg)
JQUERY
![Page 2: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/2.jpg)
2
What?
<html> <head> <title>jQuery Example</title> <script type= ” text/javascript” src= ”http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js ” ></script> <script type= ” text/javascript ” >
$(document).ready(function() {document.write(” Hello, World! ”);});
</script> </head>
<body> <h1>Hello</h1>
</body> </html>
http://www.tutorialspoint.com/
![Page 3: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/3.jpg)
jQuery
jQuery is a lightweight, open-source
JavaScript library that simplifies
interaction between HTML and
JavaScript
![Page 4: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/4.jpg)
jQuery
• DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content.
• Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
• AJAX Support − The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
http://www.tutorialspoint.com/
![Page 5: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/5.jpg)
jQuery
• Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.
• Lightweight − The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
• Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
• Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax
http://www.tutorialspoint.com/
![Page 6: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/6.jpg)
jQuery Selectors
![Page 7: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/7.jpg)
$(“*”) // find everything$(“*”) // find everything
All Selector
Selectors return a pseudo-array of jQuery elements
![Page 8: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/8.jpg)
$(“div”)
// <div>Hello jQuery</div>
$(“div”)
// <div>Hello jQuery</div>
Basic Selectors
Yes, jQuery implements CSS Selectors!
$(“#usr”)
// <span id=“usr”>John</span>
$(“#usr”)
// <span id=“usr”>John</span>
$(“.menu”)
// <ul class=“menu”>Home</ul>
$(“.menu”)
// <ul class=“menu”>Home</ul>
By Tag:
By ID:
By Class:
![Page 9: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/9.jpg)
$(“div.main”) // tag and class
$(“table#data”) // tag and id
$(“div.main”) // tag and class
$(“table#data”) // tag and id
More Precise Selectors
![Page 10: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/10.jpg)
// find by id + by class
$(“#content, .menu”)
// multiple combination
$(“h1, h2, h3, div.content”)
// find by id + by class
$(“#content, .menu”)
// multiple combination
$(“h1, h2, h3, div.content”)
Combination of Selectors
![Page 11: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/11.jpg)
$(“table td”) // descendants
$(“tr > td”) // children
$(“label + input”) // next
$(“#content ~ div”) // siblings
$(“table td”) // descendants
$(“tr > td”) // children
$(“label + input”) // next
$(“#content ~ div”) // siblings
Hierarchy Selectors
![Page 12: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/12.jpg)
$(“tr:first”) // first element
$(“tr:last”) // last element
$(“tr:lt(2)”) // index less than
$(“tr:gt(2)”) // index gr. than
$(“tr:eq(2)”) // index equals
$(“tr:first”) // first element
$(“tr:last”) // last element
$(“tr:lt(2)”) // index less than
$(“tr:gt(2)”) // index gr. than
$(“tr:eq(2)”) // index equals
Selection Index Filters
![Page 13: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/13.jpg)
$(“div”).is(“:visible”) // if visible
$(“div”).is(“:hidden”) // if not
$(“div”).is(“:visible”) // if visible
$(“div”).is(“:hidden”) // if not
Visibility Filters
![Page 14: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/14.jpg)
$(“div[id]”) // has attribute
$(“div[dir=‘rtl’]”) // equals to
$(“div[id^=‘main’]”) // starts with
$(“div[id$=‘name’]”) // ends with
$(“a[href*=‘msdn’]”) // contains
$(“div[id]”) // has attribute
$(“div[dir=‘rtl’]”) // equals to
$(“div[id^=‘main’]”) // starts with
$(“div[id$=‘name’]”) // ends with
$(“a[href*=‘msdn’]”) // contains
Attribute Filters
![Page 15: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/15.jpg)
$(“input:checkbox”)// checkboxes
$(“input:radio”) // radio buttons
$(“:button”) // buttons
$(“:text”) // text inputs
$(“input:checkbox”)// checkboxes
$(“input:radio”) // radio buttons
$(“:button”) // buttons
$(“:text”) // text inputs
Forms Selectors
![Page 16: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/16.jpg)
$(“input:checked”) // checked
$(“input:selected”)// selected
$(“input:enabled”) // enabled
$(“input:disabled”)// disabled
$(“input:checked”) // checked
$(“input:selected”)// selected
$(“input:enabled”) // enabled
$(“input:disabled”)// disabled
Forms Filters
![Page 17: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/17.jpg)
$(“select[name=‘ddl’] option:selected”).val()$(“select[name=‘ddl’] option:selected”).val()
Find Dropdown Selected Item
<select name=“cities”>
<option value=“1”>Jakarta</option>
<option value=“2” selected=“selected”>Bandung</option>
<option value=“3”>Surabaya</option>
</select>
<select name=“cities”>
<option value=“1”>Jakarta</option>
<option value=“2” selected=“selected”>Bandung</option>
<option value=“3”>Surabaya</option>
</select>
![Page 18: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/18.jpg)
SELECTORS DEMO
![Page 19: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/19.jpg)
4/14/15
<html> <head> <title>jQuery Example</title> <script type="text/javascript" src="jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("p").css("background-color", "yellow"); }); </script> </head><body> <h1>Hello</h1> <p>Lorem Ipsum Dolom .sdl;as;a lda;sld;asld;asl</p><br /> OKE.</body></html>
selector.css( PropertyName, PropertyValue );selector.css( {key1:val1, key2:val2....keyN:valN})
![Page 20: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/20.jpg)
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div").click(function () { var content = $(this).html(); $("#result").text( content ); }); }); </script> <style> #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on the square below:</p> <span id="result"> </span> <div id="division" style="background-color:blue;"> This is Blue Square!! </div> </body></html>
![Page 21: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/21.jpg)
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript"> $(document).ready(function() { var title = $("em").attr("title"); $("#divid").text(title); }); </script> </head> <body> <div> <em title="Bold and Brave">This is first paragraph.</em> <p id="myid">This is second paragraph.</p> <div id="divid"></div> </div> </body></html>
![Page 22: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/22.jpg)
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#myimg").attr("src", "/images/jquery.jpg"); }); </script> </head>
<body> <div> <img id="myimg" src="wrongpath.jpg" alt="Sample image" /> </div> </body>
</html>
![Page 23: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/23.jpg)
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("em").addClass("selected"); $("#myid").addClass("highlight"); }); </script>
<style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <em title="Bold and Brave">This is first paragraph.</em> <p id="myid">This is second paragraph.</p> </body></html>
![Page 24: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/24.jpg)
<html> <head> <title>The JQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("p").find("span").addClass("selected"); }); </script>
<style> .selected { color:red; } </style> </head> <body> <p>This is 1st paragraph and <span>THIS IS RED</span></p> <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p> </body></html>
![Page 25: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/25.jpg)
$(“p”).html(“<div>Hello $!</div>”);
// escape the content of div.b
$(“div.a”).text($(“div.b”).html());
$(“p”).html(“<div>Hello $!</div>”);
// escape the content of div.b
$(“div.a”).text($(“div.b”).html());
Getting and Setting Inner Content
![Page 26: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/26.jpg)
// get the value of the checked checkbox$(“input:checkbox:checked”).val();// get the value of the checked checkbox$(“input:checkbox:checked”).val();
Getting and Setting Values
// set the value of the textbox$(“:text[name=‘txt’]”).val(“Hello”);// set the value of the textbox$(“:text[name=‘txt’]”).val(“Hello”);
// select or check lists or checkboxes$(“#lst”).val([“NY”,”IL”,”NS”]);// select or check lists or checkboxes$(“#lst”).val([“NY”,”IL”,”NS”]);
![Page 27: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/27.jpg)
Handling CSS Classes
// add and remove class$(“p”).removeClass(“blue”).addClass(“red”);
// add and remove class$(“p”).removeClass(“blue”).addClass(“red”);
// add if absent, remove otherwise$(“div”).toggleClass(“main”);
// add if absent, remove otherwise$(“div”).toggleClass(“main”);
// test for class existance if ($(“div”).hasClass(“main”)) { //… }
// test for class existance if ($(“div”).hasClass(“main”)) { //… }
![Page 28: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/28.jpg)
// select > append to the end$(“h1”).append(“<li>Hello $!</li>”);
// select > append to the beginning$(“ul”).prepend(“<li>Hello $!</li>”);
// select > append to the end$(“h1”).append(“<li>Hello $!</li>”);
// select > append to the beginning$(“ul”).prepend(“<li>Hello $!</li>”);
Inserting new Elements
// create > append/prepend to selector$(“<li/>”).html(“9”).appendTo(“ul”);
$(“<li/>”).html(“1”).prependTo(“ul”);
// create > append/prepend to selector$(“<li/>”).html(“9”).appendTo(“ul”);
$(“<li/>”).html(“1”).prependTo(“ul”);
![Page 29: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/29.jpg)
// select > replace$(“h1”).replaceWith(“<div>Hello</div>”);
// select > replace$(“h1”).replaceWith(“<div>Hello</div>”);
Replacing Elements
// create > replace selection$(“<div>Hello</div>”).replaceAll(“h1”);
// create > replace selection$(“<div>Hello</div>”).replaceAll(“h1”);
![Page 30: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/30.jpg)
$(“h3”).each(function(){$(this).replaceWith(“<div>”
+ $(this).html() + ”</div>”);
});
$(“h3”).each(function(){$(this).replaceWith(“<div>”
+ $(this).html() + ”</div>”);
});
Replacing Elements while keeping the content
![Page 31: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/31.jpg)
// remove all children$(“#mainContent”).empty();
// remove all children$(“#mainContent”).empty();
Deleting Elements
// remove selection$(“span.names”).remove();
// remove selection$(“span.names”).remove();
// change position$(“p”).remove(“:not(.red)”)
.appendTo(“#main”);
// change position$(“p”).remove(“:not(.red)”)
.appendTo(“#main”);
![Page 32: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/32.jpg)
$(“a”).attr(“href”,”home.htm”);// <a href=“home.htm”>…</a>
$(“a”).attr(“href”,”home.htm”);// <a href=“home.htm”>…</a>
Handling attributes
// set the same as the first one$(“button:gt(0)”).attr(“disabled”, $(“button:eq(0)”).attr(“disabled));
// set the same as the first one$(“button:gt(0)”).attr(“disabled”, $(“button:eq(0)”).attr(“disabled));
// remove attribute - enable$(“button”).removeAttr(“disabled”)
// remove attribute - enable$(“button”).removeAttr(“disabled”)
![Page 33: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/33.jpg)
$(“img”).attr({“src” : “/images/smile.jpg”,“alt” : “Smile”,“width” : 10,“height” : 10
});
$(“img”).attr({“src” : “/images/smile.jpg”,“alt” : “Smile”,“width” : 10,“height” : 10
});
Setting multiple attributes
![Page 34: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/34.jpg)
// get style$(“div”).css(“background-color”);
// get style$(“div”).css(“background-color”);
CSS Manipulations
// set style $(“div”).css(“float”, “left”);
// set style $(“div”).css(“float”, “left”);
// set multiple style properties$(“div”).css({“color”:”blue”,
“padding”: “1em” “margin-right”: “0”, marginLeft: “10px”});
// set multiple style properties$(“div”).css({“color”:”blue”,
“padding”: “1em” “margin-right”: “0”, marginLeft: “10px”});
![Page 35: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/35.jpg)
// get window heightvar winHeight = $(window).height();
// set element height$(“#main”).height(winHeight);
//.width() – element
//.innerWidth() – .width() + padding
//.outerWidth() – .innerWidth() + border
//.outerWidth(true) – including margin
// get window heightvar winHeight = $(window).height();
// set element height$(“#main”).height(winHeight);
//.width() – element
//.innerWidth() – .width() + padding
//.outerWidth() – .innerWidth() + border
//.outerWidth(true) – including margin
Dimensions
The default unit is Pixel (px)
![Page 36: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/36.jpg)
// from the document$(“div”).offset().top;
// from the parent element$(“div”).position().left;
// scrolling position$(window).scrollTop();
// from the document$(“div”).offset().top;
// from the parent element$(“div”).position().left;
// scrolling position$(window).scrollTop();
Positioning
![Page 37: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/37.jpg)
Events
![Page 38: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/38.jpg)
$(document).ready(function(){//…
});
$(document).ready(function(){//…
});
When the DOM is ready…
Fires when the document is ready for programming.
Uses advanced listeners for detecting.
window.onload() is a fallback.
![Page 39: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/39.jpg)
// execute always$(“div”).bind(“click”, fn);
// execute only once$(“div”).one(“click”, fn);
// execute always$(“div”).bind(“click”, fn);
// execute only once$(“div”).one(“click”, fn);
Attach Event
Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click,
dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit,
keydown, keypress, keyup, error
(or any custom event)
![Page 40: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/40.jpg)
jQuery.Event object
![Page 41: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/41.jpg)
$(“div”).unbind(“click”, fn);$(“div”).unbind(“click”, fn);
Detaching Events
(Unique ID added to every attached function)
![Page 42: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/42.jpg)
$(“div”).trigger(“click”);$(“div”).trigger(“click”);
Events Triggering
Triggers browser’s event action as well.
Can trigger custom events.
Triggered events bubble up.
![Page 43: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/43.jpg)
// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()
// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()
Events Helpers
And many others…
![Page 44: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/44.jpg)
// use different triggering function$(“div”).triggerHandler(“click”);
// use different triggering function$(“div”).triggerHandler(“click”);
Preventing Browser Default Action
// prevent default action in handlerfunction clickHandler(e) {
e.preventDefault();}
// prevent default action in handlerfunction clickHandler(e) {
e.preventDefault();}
// or just return falsefunction clickHandler(e) {return false;}
// or just return falsefunction clickHandler(e) {return false;}
![Page 45: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/45.jpg)
// stop bubbling, keep other handlerfunction clickHandler(e) {
e.stopPropagation();}
// stop bubbling, keep other handlerfunction clickHandler(e) {
e.stopPropagation();}
Preventing Bubbling
// stop bubbling and other handlersfunction clickHandler(e) {
e.stopImmediatePropagation();}
// stop bubbling and other handlersfunction clickHandler(e) {
e.stopImmediatePropagation();}
// or just return falsefunction clickHandler(e) {return false;}
// or just return falsefunction clickHandler(e) {return false;}
![Page 46: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/46.jpg)
// attach live event(“div”).live(“click”, fn);
// detach live event(“div”).die(“click”, fn);
// attach live event(“div”).live(“click”, fn);
// detach live event(“div”).die(“click”, fn);
Live Events
Currently supported events:click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
![Page 47: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/47.jpg)
EVENTS DEMO
![Page 48: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/48.jpg)
Effects
![Page 49: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/49.jpg)
// just show$(“div”).show();
// reveal slowly, slow=600ms$(“div”).show(“slow”);
// hide fast, fast=200ms$(“div”).hide(“fast”);
// hide or show in 100ms $(“div”).toggle(100);
// just show$(“div”).show();
// reveal slowly, slow=600ms$(“div”).show(“slow”);
// hide fast, fast=200ms$(“div”).hide(“fast”);
// hide or show in 100ms $(“div”).toggle(100);
Showing or Hiding Element
![Page 50: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/50.jpg)
$(“div”).slideUp();
$(“div”).slideDown(“fast”);
$(“div”).slideToggle(1000);
$(“div”).slideUp();
$(“div”).slideDown(“fast”);
$(“div”).slideToggle(1000);
Sliding Elements
![Page 51: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/51.jpg)
$(“div”).fadeIn(“fast”);
$(“div”).fadeOut(“normal”);
// fade to a custom opacity$(“div”).fadeTo (“fast”, 0.5);
$(“div”).fadeIn(“fast”);
$(“div”).fadeOut(“normal”);
// fade to a custom opacity$(“div”).fadeTo (“fast”, 0.5);
Fading Elements
Fading === changing opacity
![Page 52: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/52.jpg)
$(“div”).hide(“slow”, function() {alert(“The DIV is hidden”);
});
$(“div”).show(“fast”, function() {$(this).html(“Hello jQuery”);
}); // this is a current DOM element
$(“div”).hide(“slow”, function() {alert(“The DIV is hidden”);
});
$(“div”).show(“fast”, function() {$(this).html(“Hello jQuery”);
}); // this is a current DOM element
Detecting animation completion
Every effect function has a (speed, callback) overload
![Page 53: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/53.jpg)
// .animate(options, duration)$(“div”).animate({
width: “90%”,opacity: 0.5,borderWidth: “5px”
}, 1000);
// .animate(options, duration)$(“div”).animate({
width: “90%”,opacity: 0.5,borderWidth: “5px”
}, 1000);
Custom Animation
![Page 54: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/54.jpg)
$(“div”).animate({width: “90%”},100).animate({opacity: 0.5},200).animate({borderWidth: “5px”});
$(“div”).animate({width: “90%”},100).animate({opacity: 0.5},200).animate({borderWidth: “5px”});
Chaining Animation
By default animations are queued and than performed one by one
![Page 55: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/55.jpg)
$(“div”).animate({width: “90%”},
{queue:false, duration:1000}).animate({opacity : 0.5});
$(“div”).animate({width: “90%”},
{queue:false, duration:1000}).animate({opacity : 0.5});
Controlling Animations Sync
The first animation will be performed immediately without queuing
![Page 56: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/56.jpg)
EFFECTS DEMO
![Page 57: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/57.jpg)
AJAX with jQuery
![Page 58: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/58.jpg)
$(“div”).load(“content.htm”);
// passing parameters$(“#content”).load(“getcontent.aspx”,
{“id”:”33”, “type”:”main”});
$(“div”).load(“content.htm”);
// passing parameters$(“#content”).load(“getcontent.aspx”,
{“id”:”33”, “type”:”main”});
Loading content
![Page 59: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/59.jpg)
$.get(“test.aspx”, {id:1},function(data){alert(data);});
$.post(“test.aspx”, {id:1},function(data){alert(data);});
$.get(“test.aspx”, {id:1},function(data){alert(data);});
$.post(“test.aspx”, {id:1},function(data){alert(data);});
Sending GET/POST requests
![Page 60: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/60.jpg)
$.getJSON(“users.aspx”, {id:1},function(users){
alert(users[0].name);});
$.getJSON(“users.aspx”, {id:1},function(users){
alert(users[0].name);});
Retrieving JSON Data
![Page 61: JQUERY - Universitas Indonesiawcw.cs.ui.ac.id/teaching/imgs/bahan/wdp/jQuery.pdf · jQuery • Animations − The jQuery comes with plenty of built-in animation effects which you](https://reader031.vdocuments.mx/reader031/viewer/2022020203/5a710de67f8b9aac538c7ed1/html5/thumbnails/61.jpg)
$.getScript(“script.js”,function(){
doSomeFunction();});
$.getScript(“script.js”,function(){
doSomeFunction();});
Retrieving JS Files