Docstoc

jquery

Document Sample
jquery Powered By Docstoc
					Dylan Beattie
www.dylanbeattie.net/jquery/
I’m not a web designer – I’m a programmer.
I’m not a Javascript or jQuery guru
 But I don’t need to be – that’s John Resig’s job
I’m just someone who writes web pages
 I want to add drag’n’drop, ajax, animation and 
 other neat usability enhancements
 I want the underlying markup to stay clean, 
 minimalist and meaningful
 I don’t have time to master the quirks of four 
 different browsers 
An object‐oriented Javascript framework
Written in Javascript for Javascript
Delivered alongside your HTML pages
Runs inside your browser
Provides elegant, powerful methods for 
adding interactive behaviour to web pages
Handles all the weird cross‐browser stuff for 
you so you can get on with your job
Usability benefits of rich interfaces and AJAX
Achieve in a few lines of code what used to 
require a dedicated front‐end developer.
“Web 2.0” sites raising clients’ and users’ 
expectations. 
Syntax based on web standards (CSS)
Already part of ASP.NET MVC 
Will be included in VS2010
jQuery provides a rich framework on top of 
HTML and CSS
Underlying content is still text/html
 Accessible – screen readers & mobile devices
 Discoverable ( = “Googlability”)
 Maintainable – code in your favourite editor
Use progressive enhancement
 Deliver basic pages to basic devices
 Inject rich behaviour on supported clients.
 Aka “code on demand” if REST is your thing.
Download jQuery from jquery.com
 Latest version 1.3, released last week.
Link to it from your <head /> section
That’s it.
Intellisense code completion is available in 
VS2008
 You’ll need Visual Studio 2008 with SP1
 And the VS2008 Hotfix
 And the jquery‐1.3‐vsdoc.js file
 Links are on my blog
<html>
<head>
  <title>jQuery Demo</title>




</head>
<body style=“display: none; font‐size: 300%;">
  <!‐‐ notice the body is empty... ‐‐>
</body>
</html>
<html>
<head>
  <title>jQuery Demo</title>
  <script src=“jquery‐1.3.js"
  type="text/javascript"></script>




</head>
<body style=“display: none; font‐size: 300%;">
  <!‐‐ notice the body is empty... ‐‐>
</body>
</html>
<html>
<head>
  <title>jQuery Demo</title>
  <script src=“jquery‐1.3.js"
  type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
       $("body")
           .html("<h1>Hello, World!</h1>")
           .fadeIn(2500);
    });
  </script>
</head>
<body style=“display: none; font‐size: 300%;">
  <!‐‐ notice the body is empty... ‐‐>
</body>
</html>
                                          Run the demo...
1. Wait until something happens
2. Find (or create) an element on the page
3. Do something interesting with it

That’s all.
jQuery provides consistent, normalized event 
handlers across multiple browsers
Mouse and keyboard events
 click, dblclick, focus, hover, keypress
Special events
 ready() event – fires once when the document is 
 initialized
 Callback events from animations and ajax
 requests.
The “Query” part of jQuery
Replaces JS methods like 
  document.getElementById()
Syntax based on CSS 2 & 3
 CSS : “make that paragraph blue”
 jQuery : “make that paragraph dance”
CSS            jQuery            What it means

p { }          $(“p”)            All the paragraphs

form label { } $(“form label”)   All the labels that are inside 
                                 forms
a.menuItem { } $(“a.menuItem”)   Every <A /> with a 
                                 class=“menuItem”
div#menu { }   $(“div#menu”)     The specific DIV with id=“menu”

div#menu a { } $(“div#menu a”)   Every <A /> tag inside <div 
                                 id=“menu”>
http://localhost:1985/example01.html

Followed by demo – refactoring verbose jQuery
  to idiomatic jQuery – aka “how to reduce this 
  example to 4 lines of code”
Manipulate attributes and HTML directly
  .css(), .addClass(), .removeClass() let you modify the 
  appearance of your page
  .append(), .prepend() allow you to insert new HTML 
  elements
Use jQuery’s built‐in effects library
  fade, slideDown, slideUp, show, hide, toggle, animate
Initiate an AJAX request
  And then do something interesting with the results
 jQuery has a built‐in getJSON() method

$.getJSON(
  “/Film/JsonData”,
  { filmId: 12 },
  function(filmData) {
    // do something clever 
    // with jsonData here
  });
 ASP.NET MVC has built‐in object    JSON 
 serialization support

public ActionResult JsonData(int filmId) {
  Film film = FilmRepository.Load(filmId);
  return(new JsonResult() {
    Data = film;
    ContentType = “application/json”
  });
}
http://localhost:1985/example02.html
www.dylanbeattie.net/jquery/

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1
posted:10/18/2012
language:Unknown
pages:19