Skip to content

Commit

Permalink
More improvments to the intro talk.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeresig
jeresig committed Feb 15, 2010
1 parent eac8f1e commit b7a4ae1
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 31 deletions.
71 changes: 40 additions & 31 deletions intro/index.html
View file
Expand Up @@ -10,6 +10,11 @@
<script src="slideshow.js"></script>
</head>
<body>
<a href="http://jquery.com/"><img src="jquery_logo.png" class="logo"/></a>
<div class="slide main">
<h1>Introduction to jQuery</h1>
<br/><br/><br/><img src="jquery_logo.png"/>
</div>
<div class="slide">
<h1>What is jQuery?</h1>
<ul>
Expand Down Expand Up @@ -163,7 +168,7 @@ <h1>Chaining</h1>
$("div").hide().css("color","blue");
$("div").hide().css("color","blue").remove();</pre>
</div>
<div class="slide" id="traverse">
<div class="slide" id="chaintraverse">
<h1>Chained Traversal</h1>
<pre class="javascript">$("button")
.parent().css("border", "3px solid red")
Expand All @@ -178,10 +183,14 @@ <h1>Chained Traversal</h1>
<div class="slide">
<h1>Do something with them</h1>
<ul>
<li>Now that we've found the elements we're looking for, let's change them! <ul>
<li>Attributes (addClass, attr)</li>
<li>CSS (css)</li>
<li>Manipulation (append, prepend, remove, clone)</li>
<li>Interaction (click, hover, toggle)</li>
<li>Animations (hide, show, slideDown, fadeOut)</li>
<li>Events (click, hover, toggle)</li>
<li>Effects (hide, show, slideDown, fadeOut)</li>
<li>Ajax (load, get, post)</li>
</ul></li>
</ul>
</div>
<div class="slide" id="after">
Expand All @@ -208,7 +217,7 @@ <h1>Manipulation - .append()</h1>
</div>
<div class="slide" id="css">
<h1>Manipulation - .css()</h1>
<pre class="javascript">$("a").css({
<pre class="javascript">$("li a").css({
color: "red",
fontWeight: "bold"
});</pre>
Expand All @@ -218,15 +227,28 @@ <h1>Manipulation - .css()</h1>
<li><a href="http://microsoft.com/">Microsoft</a></li>
<li><a href="http://yahoo.com/" target="_blank">Yahoo</a></li>
</ul>
</div>
</div>
<div class="slide" id="html">
<h1>HTML Selector</h1>
<pre class="javascript">$("&lt;li>&lt;a>&lt;/a>&lt;/li>")
.find("a")
.attr("href", "http://ejohn.org/")
.html("John Resig")
.end()
.appendTo("ul");</pre>
<ul>
<li><button class="run">Run</button></li>
</ul>
</div>
<div class="slide" id="submit">
<h1>Event - .submit()</h1>
<pre class="javascript run">$("form").submit(function(){
if ( $("#name").val() == "" ) {
if ( $("#name").val() === "" ) {
$("span.help").show();
return false;
}
});</pre>
<script>$("#submit form").submit(function(){ return false; });</script>
<ul>
<li><form>Name: <input type="text" id="name"/>
<input type="submit" value="Send"/></form></li>
Expand All @@ -247,9 +269,9 @@ <h1>Event - .click()</h1>
<div class="slide" id="hover">
<h1>Event - .hover()</h1>
<pre class="javascript run">$("li").hover(function(){
$(this).animate({marginLeft: 38, marginRight: 0});
$(this).animate({marginLeft: 38, marginRight: 0});
}, function(){
$(this).animate({marginLeft: 18, marginRight: 18});
$(this).animate({marginLeft: 18, marginRight: 18});
});</pre>
<style>#hover li { background: #666; }</style>
<ul>
Expand Down Expand Up @@ -368,18 +390,6 @@ <h1>Ajax - .load()</h1>
<div class="load">hello!</div>
<style>div.load { margin-left: 36px;}</style>
</div>
<div class="slide" id="html">
<h1>HTML Selector</h1>
<pre class="javascript">$("&lt;li>&lt;a>&lt;/a>&lt;/li>")
.find("a")
.attr("href", "http://ejohn.org/")
.html("John Resig")
.end()
.appendTo("ul");</pre>
<ul>
<li><button class="run">Run</button></li>
</ul>
</div>
<div class="slide">
<h1>jQuery Bookmarklet</h1>
<ul>
Expand All @@ -388,6 +398,16 @@ <h1>jQuery Bookmarklet</h1>
<li><a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet</a></li>
</ul>
</div>
<div class="slide">
<h1>Build a Todo List</h1>
<ul>
<li>Take a plain (no JavaScript) todo list and make it nice and Ajax-y.</li>
<li><a href="http://ejohn.org/apps/workshop/todo/">http://ejohn.org/apps/workshop/todo/</a></li>
<li>Edit your code:<br><a href="http://ejohn.org/apps/workshop/todo/?action=edit">http://ejohn.org/apps/workshop/todo/?action=edit</a></li>
<li>Reset data:<br><a href="http://ejohn.org/apps/workshop/todo/?action=reset">http://ejohn.org/apps/workshop/todo/?action=reset</a></li>
<li>View final:<br><a href="http://ejohn.org/apps/workshop/todo/?action=done">http://ejohn.org/apps/workshop/todo/?action=done</a></li>
</ul>
</div>
<div class="slide">
<h1>jQuery Plugins</h1>
<ul>
Expand Down Expand Up @@ -422,16 +442,6 @@ <h1>What Makes a Plugin?</h1>
return elem.parentNode.nodeName.toLowerCase() === "ul";
};</pre>
</div>
<div class="slide">
<h1>Build a Todo List</h1>
<ul>
<li>Take a plain (no JavaScript) todo list and make it nice and Ajax-y.</li>
<li><a href="http://ejohn.org/apps/workshop/todo/">http://ejohn.org/apps/workshop/todo/</a></li>
<li>Edit your code:<br><a href="http://ejohn.org/apps/workshop/todo/?action=edit">http://ejohn.org/apps/workshop/todo/?action=edit</a></li>
<li>Reset data:<br><a href="http://ejohn.org/apps/workshop/todo/?action=reset">http://ejohn.org/apps/workshop/todo/?action=reset</a></li>
<li>View final:<br><a href="http://ejohn.org/apps/workshop/todo/?action=done">http://ejohn.org/apps/workshop/todo/?action=done</a></li>
</ul>
</div>
<div class="slide">
<h1>jQuery UI</h1>
<ul>
Expand Down Expand Up @@ -494,6 +504,5 @@ <h1>jQuery Books</h1>
<li>jQuery Cookbook (O'Reilly)</li>
</ul>
</div>
<img src="jquery_logo.png" class="logo"/>
</body>
</html>
6 changes: 6 additions & 0 deletions intro/style.css
View file
Expand Up @@ -71,4 +71,10 @@ img.logo {
bottom: 0;
right: 0;
width: 100px;
border: 0;
}

div.slide.main {
background: #1E2837;
text-align: center;
}

0 comments on commit b7a4ae1

Please sign in to comment.