J query
30
How I Learned To Stop Worrying and Love jQuery David Giard, Sogeti USA C# MVP MCTS, MCSD, MCSE, MCDBA DavidGiard.com
-
Upload
david-giard -
Category
Technology
-
view
912 -
download
5
description
How I Learned to stop worrying and love jQuery
Transcript of J query
How I LearnedTo Stop Worryingand Love jQuery
David Giard, Sogeti USAC# MVPMCTS, MCSD, MCSE, MCDBA
DavidGiard.com
JavaScript
• Dynamic language• Client-side (usually)• Interact with DOM
JavaScript in your page
• <script type="text/javascript"> … </script>
• <script type="text/javascript“ src=“xxx.js"> </script>
JavaScript: The Good Parts
• Interactive web pages• Fast• Ajax
JavaScript: The Bad Parts
• Cross-browser issues• Cross-platform issues
JavaScript Frameworks
• jQuery• Prototype• Dojo• Mootools• ExtJs• etc…
jQuery
jQuery
• JavaScript Abstraction• Cross-Browser• Built-In Functions• Fast• Unobtrusive• Popular• Ships with Visual Studio 2010
jQuery Popularity
Source: http://royal.pingdom.com
jQuery Popularity
Source: http://royal.pingdom.com
jQuery Popularity• Twitter.com• Wikipedia.org• MLB.com• Amazon.com• Bing.com• Microsoft.com• Bit.ly• ESPN.com• Digg.com• Reddit.com• Netflix.com• WordPress.com
Unobtrusive JavaScript• Obtrusive
<a href=“” onclick=“DoSomething();”> Click Me</a>
• Unobtrusive<script type="text/javascript"> $(document).ready(function(){ $(“#MyLink”).click(function(){
DoSomething(); }); </script>
<a href=“” id=“Link1”> Click Me </a>
Enable jQuery
• Download from jQuery.com• <script
type="text/javascript" src="jquery-1.6.1.min.js"></script>
Content Delivery Network• <script
type="text/javascript" src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
• <script type="text/javascript" src=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
• <script type="text/javascript" src=“http://code.jquery.com/jquery-1.6.1.min.js "></script>
Cross-Browser• Javascriptvar elm = null; if (document.getElementById) { elm = document.getElementById(id); } else if (document.all) { elm = document.all[id]; } else if (document.layers) { elm = document.layers[id]; }
• jQueryvar elm = $(“#id”);
jQuery Syntax
• jQuery keyword• Selectors• Events• Functions / Methods
“jQuery” Keyword
• jQuery• $• Represents the jQuery object• Indicates what follows is jQuery
Selectors
• Returns a set of objects• Call method on each object• Bind event to each object
CSS Selectorsh2 {
font-family: "Calibri";font-size: 66pt;font-weight: bold;
}.FootNote {
font-family: "Calibri";font-size: 18pt;font-weight: bold;
}#MyElement {
font-family: “Times New Roman";font-color: red;
}Div#MyDiv {
font-family: “Arial";font-size: 48pt;
}
Tag name
Class name
Element ID
Combine selectors
jQuery Selectors
• $(selector)• where selector is:
Selector Select by… ‘#xxx’ id‘.xxx’ className‘xxx’ element typexxx variable name
Example$(‘a’)$(‘#MyDiv’)$(‘.MyClass’)$(document)
(document).ready
$(document).ready(function(){…
});
Events
$(document).ready(function(){ $(“#MyDiv”).click(function(){ … });});
Methods
$(document).ready(function(){ $(“#MyDiv”).click(function(){ $(“a”).attr(“target”, “_blank”); });});
Combining Selectors
• Containership$(‘selector1’ ‘selector2’)Ex:
$(‘div a’)• Narrow scope
$(‘Selector1Selector2’)Ex:
$(‘a#MyLink’)• Filter
$(selector1).filter(selector2)Ex:
$(‘#MyDiv’).filter(‘#MyLink’)
Set-based Selectors
• $(‘div:first')• $(‘div:last')• $(‘div:even')• $(‘div:odd')
Ajax
• Call web service from jQuery
Plug-Ins
• jQuery is extensible!• jQueryUI
jQuery UI
Help!
• docs.jquery.com• api.jquery.com• jqueryui.com/demos
Telerik
• Telerik.com
