Permalink
Browse files

More improvments to the intro talk.

  • Loading branch information...
1 parent eac8f1e commit b7a4ae12b3626eb1e8f15982794e4cf902dc11a2 @jeresig committed Feb 15, 2010
Showing with 46 additions and 31 deletions.
  1. +40 −31 intro/index.html
  2. +6 −0 intro/style.css
View
@@ -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>
@@ -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")
@@ -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">
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
View
@@ -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.