15. Non-Minified JavaScript
/*!
* jQuery JavaScript Library v1.8.2
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
*
* Copyright 2012 jQuery Foundation and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: Thu Sep 20 2012 21:13:05 GMT-0400 (Eastern Daylight Time)
*/
(function( window, undefined ) {
var
// A central reference to the root jQuery(document)
rootjQuery,
// The deferred used on DOM ready
17. Document Object Model (DOM)
<html>
<head>
<title>My Page</title>
<script
type="text/javascript“
src="http://code.jquery.com/jquery-1.7.1.min.js ">
Document
</script>
</head>
<body> Head Body
<div>
<p>
Title a <a href="Page2.htm">link</a> Div
This Script Div
</p>
</div>
<div> P UL
Colors:
<ul>
<li>Red</li>
A LI LI LI
<li>Orange</li>
<li>Yellow</li>
</ul>
</div>
</body>
</html>
18. Getting an Element
<script type="text/javaScript">
var id = "Div1";
var myDiv = document.GetElementById(id);
</script>
…
<div id="Div1">
…
</div>
19. Cross-Browser
• Javascript
var id = "Div1";
var 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];
}
• jQuery
var elm = $("#Div1");
21. “jQuery” Keyword
• jQuery
• $
• Represents the jQuery object
• Indicates what follows is jQuery
22. Selectors
• Returns a set of objects
• Call method on each object
• Bind event to each object
23. CSS Selectors
h2 {
font-family: "Calibri"; Tag name
font-size: 66pt;
font-weight: bold;
}
.FootNote {
font-family: "Calibri"; Class name
font-size: 18pt;
font-weight: bold;
}
#MyElement {
font-family: “Times New Roman"; Element ID
font-color: red;
}
div#MyDiv {
font-family: “Arial"; Combine selectors
font-size: 48pt;
}
24. jQuery Selectors
• $(selector)
• where selector is:
Selector Select by… Example
"#xxx" Id $("#MyDiv")
".xxx" className $(".MyClass")
"xxx" element type $("a")
xxx variable name $(document)
33. Ajax
$.ajax({
url: "CustomerWs.asmx/GetCustomerName",
dataType: "text",
type: "POST",
data: {},
error: function (err) {
// Code to run when error returned
},
success: function (data) {
// Code to run when successfully returned
}