taiwan java user group JQuery

1. Jiayun Zhou
2008.11.22
TWJUG

2. JavaScript Library

10. Query

11. Database?

12. SQL?

13. Select...

15. document.getElementById(quot;idquot;)

16. document.getElementById(quot;idquot;)
jQuery:
$(quot;#idquot;)

17. The jQuery function
$(...) = jQuery(...)

18. document.getElementsByTagName
(quot;divquot;)

19. document.getElementsByTagName
(quot;divquot;)
jQuery:
$(quot;divquot;)

20. <input name=quot;mailquot; type=quot;textquot; />
document.getElementsByName
(quot;mailquot;)

21. <input name=quot;mailquot; type=quot;textquot; />
document.getElementsByName
(quot;mailquot;)
jQuery:
$(quot;input[name='mail']quot;)

22. <input name=quot;mailquot; type=quot;textquot; />
document.getElementsByName
(quot;mailquot;)
jQuery:
$(quot;*[name='mail']quot;)

23. The power of Selectors

25. $(quot;*[name='mail']quot;)

27. $(...)

30. jQuery Object

32. All the magic

34. Attributes API

35. $(quot;imgquot;).attr(quot;srcquot;)
$(quot;imgquot;).attr(quot;srcquot;,
quot;/new/icon.pngquot;)

36. Traversing API

37. Manipulation API

38. $(quot;divquot;).html()
$(quot;divquot;).html(quot;<span class='red'>Hello
<b>World</b></span>quot;)

39. CSS API

40. $(quot;divquot;).css(quot;colorquot;)
$(quot;divquot;).css(quot;colorquot;,quot;redquot;)

41. Events API

42. $(quot;pquot;).click(fn)
$(quot;pquot;).click(function() {
// do something
});
$(quot;pquot;).click()

43. Effects API

44. $(quot;pquot;).show()
$(quot;pquot;).hide()

45. Ajax API

46. $(quot;pquot;).load( url, [data], [callback] )
$(quot;pquot;).load(quot;another.htmlquot;)

48. Chaining

49. $(quot;aquot;).attr(quot;hrefquot;,
quot;foo.htmlquot;).show().html(quot;fooquot;);

50. Ex. 1 – Mousedown

53. $(document).ready(function(){
$(quot;aquot;).mousedown(
function() {
$(this).click(function () { return false; });
goURL($(this).attr(quot;hrefquot;));
});
});

55. $(document).ready(function(){
$(quot;a[target='middlearea']quot;).mousedown(
function() {
$(this).click(function () { return false; });
goIframeURL($(this).attr(quot;hrefquot;));
});
});

57. $(document).ready(function(){
$(quot;a[target!='middlearea']quot;).mousedown(
function() {
$(this).click(function () { return false; });
goURL($(this).attr(quot;hrefquot;));
});
});

58. Try it yourself

60. Demo 1

61. Ex. 2 – Marquee

63. $(document).ready(function(){
$.ajaxSetup({
cache: false
});
setTimeout(quot;loadInfo()quot;, 60000);
setTimeout(quot;loadMar()quot;, 60000);
});

64. function loadInfo() {
$(quot;#infoULquot;).load(quot;header.do?method=infoquot;,
null, infoCallback);
}
function loadMar() {
$(quot;#marquot;).load(quot;header.do?method=marqueequot;,
null, marCallback);
}

65. function infoCallback(responseText, textStatus,
XMLHttpRequest) {
setTimeout(quot;loadInfo()quot;, 60000);
}
function marCallback(responseText, textStatus,
XMLHttpRequest) {
setTimeout(quot;loadMar()quot;, 60000);
}

66. Demo 2

67. Ex. 3 – On Idle Action

70. include.jsp
$(document).ready(function(){
$(quot;iframequot;).load(function(){
$.cookie('lastAction', new Date().getTime());
});
});

71. index.jsp
$(document).ready(function(){
setTimeout(quot;checkLastAction()quot;, 60000);
});

72. function checkLastAction() {
var interval = new Date().getTime() -
$.cookie('lastAction');
if (interval > (20 * 60 * 1000)) {
$(quot;iframe[name='bodyFrame']quot;)
.attr(quot;contentWindowquot;).location.href =
$(quot;iframe[name='bodyFrame']quot;).attr(quot;srcquot;);
$.cookie('lastAction', new Date().getTime());
}
setTimeout(quot;checkLastAction()quot;, 60000);
}

73. Thanks