5. Hide divs with pure JavaScript
divs = document.getElementByTagName(âdivâ);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ânoneâ;
}
6. Hide divs with pure JavaScript
divs = document.getElementByTagName(âdivâ);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ânoneâ;
}
Hide divs with jQuery
$(âdivâ).hide();
20. Selector Examples
$(â#contentâ) get element with id content
$(âli:firstâ) get first list item
$(âtr:oddâ) get odd numbered table rows
$(âa[target=_blank]â)
get all links whoâs target is â_blankâ
21. Selector Examples
$(â#contentâ) get element with id content
$(âli:firstâ) get first list item
$(âtr:oddâ) get odd numbered table rows
$(âa[target=_blank]â)
get all links whoâs target is â_blankâ
$(âform[id^=step]â)
get all forms whoâs id starts with âstepâ
39. jQuery Factory Method $()
You can also pass $() a function
to run the function after the page loads.
40. jQuery Factory Method $()
You can also pass $() a function
to run the function after the page loads.
$(function(){
});
41. jQuery Factory Method $()
You can also pass $() a function
to run the function after the page loads.
$(function(){
code here will execute after DOM is ready
});
42. jQuery Factory Method $()
You can also pass $() a function
to run the function after the page loads.
$(function(){
code here will execute after DOM is ready
});
Note: This is essentially the same as..
$(document).ready(function(){ });
43. jQuery Factory Method $()
You can also pass $() a function
to run the function after the page loads.
$(function(){
code here will execute after DOM is ready
});
Note: This is essentially the same as..
$(document).ready(function(){ });
..you will see this in tutorials around the net
44. Moving Elements Examples
Get element with ID foo and add some HTML.
$(â#fooâ)
<html>
<body>
<div>jQuery</div>
<div id=âfooâ>example</div>
</body>
</html>
45. Moving Elements Examples
Get element with ID foo and add some HTML.
$(â#fooâ).append(â<p>test</p>â);
<html>
<body>
<div>jQuery</div>
<div id=âfooâ>example</div>
</body>
</html>
46. Moving Elements Examples
Get element with ID foo and add some HTML.
$(â#fooâ).append(â<p>test</p>â);
<html>
<body>
<div>jQuery</div>
<div id=âfooâ>example<p>test</p></div>
</body>
</html>
47. Moving Elements Examples
Move paragraphs to element with id âfooâ
$(âpâ)
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
<div id=âfooâ>example</div>
</body>
</html>
48. Moving Elements Examples
Move paragraphs to element with id âfooâ
$(âpâ) .appendTo(â#fooâ);
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
<div id=âfooâ>example</div>
</body>
</html>
49. Moving Elements Examples
Move paragraphs to element with id âfooâ
$(âpâ) .appendTo(â#fooâ);
<html>
<body>
<div>jQuery</div>
<div id=âfooâ>example
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>
63. Attributes
Set border to 1px black
$(...).css(âborderâ, â1px solid blackâ);
Set various css properties.
$(...).css({
âbackgroundâ: âyellowâ,
âheightâ: â400pxâ
});
64. Attributes
Set border to 1px black
$(...).css(âborderâ, â1px solid blackâ);
Set various css properties.
$(...).css({
âbackgroundâ: âyellowâ,
âheightâ: â400pxâ
});
Set all linkâs href attribute to google.com
$(âaâ).attr(âhrefâ, âhttp://google.comâ);
67. Attributes
Replace HTML with a new paragraph.
$(...).html(â<p>Iâm new</p>â);
<div>whatever</div> turns into
<div><p>Iâm new</p></div>
68. Attributes
Replace HTML with a new paragraph.
$(...).html(â<p>Iâm new</p>â);
<div>whatever</div> turns into
<div><p>Iâm new</p></div>
Set checkboxes attribute âcheckedâ to checked.
$(â:checkboxâ).attr(âcheckedâ,âcheckedâ);
69. Attributes
Replace HTML with a new paragraph.
$(...).html(â<p>Iâm new</p>â);
<div>whatever</div> turns into
<div><p>Iâm new</p></div>
Set checkboxes attribute âcheckedâ to checked.
$(â:checkboxâ).attr(âcheckedâ,âcheckedâ);
Set input value to 3.
$(...).val(â3â);
70. Attributes
Replace HTML with a new paragraph.
$(...).html(â<p>Iâm new</p>â);
<div>whatever</div> turns into
<div><p>Iâm new</p></div>
Set checkboxes attribute âcheckedâ to checked.
$(â:checkboxâ).attr(âcheckedâ,âcheckedâ);
Set input value to 3. Get input value.
$(...).val(â3â); $(...).val();
73. Events
When a button is clicked, do something.
$(âbuttonâ).click(function(){
something();
});
74. Events
When a button is clicked, do something.
$(âbuttonâ).click(function(){
something();
});
Setup a custom event and trigger it.
$(âbuttonâ).bind(âexpandâ, function(){
something();
});
$(âbutton:firstâ).trigger(âexpandâ);
75. Events
When a button is clicked, do something.
$(âbuttonâ).click(function(){
something();
});
Setup a custom event and trigger it.
$(âbuttonâ).bind(âexpandâ, function(){
something();
});
$(âbutton:firstâ).trigger(âexpandâ);
Unbind custom event.
$(âbuttonâ).unbind(âexpandâ);
85. Animation / Effects
With each click, slide up / slide down a div.
$(...).click(function(){
$(âdiv:firstâ).slideToggle();
});
86. Animation / Effects
With each click, slide up / slide down a div.
$(...).click(function(){
$(âdiv:firstâ).slideToggle();
});
Animate elements to 300px wide in .5 seconds.
$(...).animate({ âwidthâ: â300pxâ }, 500);
87. Animation / Effects
With each click, slide up / slide down a div.
$(...).click(function(){
$(âdiv:firstâ).slideToggle();
});
Animate elements to 300px wide in .5 seconds.
$(...).animate({ âwidthâ: â300pxâ }, 500);
Take focus off elements by fading them to
30% opacity in .5 seconds
$(...).fadeTo(500, 0.3);
92. Traversing Examples
Move paragraphs to element with id âfooâ
$(âtableâ)
<html>
<body>
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
</body>
</html>
93. Traversing Examples
Move paragraphs to element with id âfooâ
$(âtableâ) .next()
<html>
<body>
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
</body>
</html>
94. Traversing Examples
Move paragraphs to element with id âfooâ
$(âtableâ) .next()
<html>
<body>
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
</body>
</html>
95. Traversing Examples
Move paragraphs to element with id âfooâ
$(âtableâ) .next().find(âpâ);
<html>
<body>
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
</body>
</html>
107. jQuery isnât only about simpler code
and being more productive
It is also about..
108. jQuery isnât only about simpler code
and being more productive
It is also about..
great community
test coverage plugins books
support
tutorials
open (free) license speed
light weight code
109. Led to World Domination
jQuery
http://google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype
+javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
110. Usage Across Top 10,000 Sites
http://trends.builtwith.com/javascript
111. Plugins
jQuery has hundreds of plugins at
http://plugins.jquery.com/
jQuery UI
Set of official user interface
components at:
http://jqueryui.com
112. Support
jQuery general discussion mailing list
http://forum.jquery.com
jQuery discussion docs page
http://docs.jquery.com/Discussion
jQuery IRC room
#jquery on FreeNode.net
113. Books
Learning jQuery 1.3 jQuery in Action
by Karl Swedberg Yahuda Katz
http://www.amazon.com/gp/product/1847196705? http://www.amazon.com/gp/product/1933988355?
ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&cam ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&camp
p=1789&creative=9325&creativeASIN=1847196705 =1789&creative=9325&creativeASIN=1933988355