HTML 页面组成：
基本的标签 + 样式 + 行为
markup : HTML标签
style : 样式，CSS
script : 行为，jQuery
Write less, do more!
var checkedValue = jQuery('input:radio[name="someRadio"]:checked').val();
你需要什么功能？
页面事件处理
数据校验-获取不同标签的值
异步请求后台获取数据
jQuery能提供给你哪些功能？
Event事件处理
selector选择器定位元素并取值
Ajax，get,post
Just begin
self-named: jQuery
alias: $
Unobtrusive JavaScript 非侵入式的脚本-不要把脚本写在标签上，而应该分离。
achieving better page organization and increased code versatility.
就像CSS样式表一样，将标签和样式分离开，这样管理起来更加方便，也更清晰，更加合理
Separating style from structure : use CSS
Separating behavior from structure : use jQuery
Make sure that the button element exists before we attempt to augment it
1.x and 2.x , download which ?
从2.0开始，jQuery只关注未来的趋势，而不会兼顾老版本浏览器IE6,IE7,IE8
因此，jQuery将删除那些处理浏览器兼容性的代码，使得代码量减少了12%左右，而且更快
如果需要支持IE8以下的浏览器，只能选择1.x版本
compressed or uncompressed ?
生产上使用compressed，因为体积更小
测试使用uncompressed，因为格式化了，可读性好
use CDN to include jQuery in our web pages
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- 如果下载失败，则引入自己的js -->
<script>window.jQuery || document.write('<script src="javascript/jquery-1.11.0.min.js"><\/script>');</script>
jQuery对象
//expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery;
GitHub
jQuery’s modules
ajax: Contains all the Ajax functions like ajax(), get() and post().
effects: Contains the methods that allow animations like animate() and slideUp().
event: Contains the methods to attach event handler to the browser events like on() and off().
jQuery fundamentals
jQuery focuses on retrieving elements from HTML pages and performing operations upon them.
致力于通过选择器获取元素，并在这些元素上施加行为
selectors
by type : input
by attributes : [name='xxx']
by position: parent child
You must waiting until the page is loaded before performing page operations,
The jQuery library is exposed through a property called jQuery and a shortcut called $. \
Using them we have access to the properties and the methods .
jQuery's utilities or jQuery utility methods
使用jQuery工具箱中的方法
var trimmed = $.trim(someString);
$.trim() 去除字符串两端的空格
$.isArray() 测试参数是否为数组类型
注意：这些方法实际上是$()function中的方法（JavaScript中，方法中可以在定义方法）
jQuery chaining: a programming technique to call several methods in a single statement.
var obj = new Obj();
obj.method().anotherMethod().yetAnotherMethod();
select elements from the DOM
two parameters: a selector and a context(optionally).
通过context的设置，可以
XML might be familiar with XPath as a means to select elements within an XML document.
jQuery中的选择器类似与通过XPath解析XML中的节点
find all the <p> contained in a <div>. Contained doesn't mean the <div> is the parent of the <p>, it can also be a generic ancestor.
首先根据指定的context定位元素，然后再根据selector进行查询
var paragraphsInDiv = = jQuery("p", "div");
var paragraphsInDiv = = $("p", "div");
查询器将返回的数据封装为一个数组并在此基础上进行包装，并提供一系列的方法来处理这个对象
术语叫做jQuery wrapper or wrapped set
jQuery wrapper methods, is that when they’re done with their action (like a hide operation),
they return the same group of elements, ready for another action.
当处理完一个方法后，会返回同样的数据集，以便对其调用其他function
A better place to put code using jQuery
The document ready handler
Traditionally:
window.onload=funciton(){//do stuff here}
需要等待DOM tree构建完成，以及其它资源(image,flash,etc)被加载并呈现到窗口之后，才会触发window.onload事件
jQuery way:
jQuery provides a simple means to trigger the execution of code once the DOM tree has loaded (only waiting the DOM,without waiting for external resources)
jQuery(document).ready(handler);
$(handler);
jQuery(document).ready(function() {
// your code goes here...
});
jQuery(function() {
// your code goes here...
});
Best practices:
put the libraries included in your page before the closing <body> tag!
At that point, all of the other elements are already in the DOM.
So you can completely avoid the use of $(document).ready .
把<script>放到</body>标签签名，将其作为DOM的一部分
As we’ve seen, the jQuery() function can be used to do the following:
• Select and wrap DOM elements to be operated upon by wrapper methods 选择得到结果，对结果进行包装，提供包装后的方法对结果进行处理
• Serve as a namespace for global utility functions 提供全局工具方法
• Establish code to be executed when the DOM is ready for manipulation 文档加载完毕才开始对元素进行操作