開啟一個網頁，如果 HTML 沒有完全載入完畢，就去操作頁面中元素是不安全的，但是監測 HTML 是否載入完畢呢？ jQuery 提供了一個 $(document).ready() 方法，任何 ready 中的程式碼在 HTML 完全載入完成後才會執行。
$(document).ready(function() {
console.log('ready!');
});
此外，它還有一個簡寫方式
$(function() {
console.log('ready!');
});
$(document).ready() 中並非只能執行匿名方法，執行一個已命名的方法也是可以的：
function readyFn() {
// code to run when the document is ready
}
$(document).ready(readyFn);
選擇元素
jQuery 最基本的概念就是「選擇一些元素，然後對它們做些什麼」。 jQuery 支援大多數的 CSS3 選擇器，另外還有一些非標準的選擇器，詳情請見 http://api.jquery.com/category/selectors/，以下是一些常見選擇器的用法：
$('#myId'); // 此 ID 在页面中必须唯一
$('div.myClass'); // 如果指定了元素类型，那么性能会有所提升
$('input[name=first_name]'); // 速度有点慢，尽量避免这种用法
$('#contents ul.people li');
$('a.external:first');
$('tr:odd');
$('#myForm :input'); // 选择表单中的所有 input 类元素
$('div:visible');
$('div:gt(2)'); // 页面中除了前 3 个 DIV 之外的所有 DIV
$('div:animated'); // 所有正在执行动画的 DIV
要注意的地方
當使用 :visible 和 :hidden 這種偽選擇器的時候，jQuery 實際上是去檢測他們在頁面中是否可見，還不是它們 css 中的 display 的值。也就是說，當一個元素在頁面正的物理寬度和高度都大於 0，那麼它就是可見的。但
jQuery 的具體實作方式可以參考一下程式碼：
jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth, height = elem.offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";
// does the element have 0 height, 0 width,
// and it's not a <tr>?
return width === 0 && height === 0 && !skip ?
// then it must be hidden
true :
// but if it has width and height
// and it's not a <tr>
width > 0 && height > 0 && !skip ?
// then it must be visible
false :
// if we get here, the element has width
// and height, but it's also a <tr>,
// so check its display property to
// decide whether it's hidden
jQuery.curCSS(elem, "display") === "none";
};
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
選擇器結果集中是否包含有元素
執行了一個選擇器之後，如何判斷選擇器是否選擇到了元素，可能會想當然的寫下：
if ($('div.foo')) { ... }
其實這樣寫是不對的，因為不管選擇器是否選擇到元素，它都會回傳一個對象，而對象的布林值肯定為 true，所以，所以此方法是行不通的。其實選擇器回傳物件中有一個length 屬性，透過這個屬性，可以確定選擇器中到底有幾個元素，如果裡面一個元素都沒選擇到，那麼回傳0-false，如果選擇到了元素，傳回元素的實際數目-true。
if ($('div.foo').length) { ... }
做個快取給選擇器
每做一次選擇器，jQuery 都要執行很多程式碼，如果你需要多次使用相同的一個選擇器，最好給選擇器做個緩存，以避免重複執行選擇器。
var $divs = $('div');
注意，此段程式碼中用作快取變數的變數名稱以$ 開頭，這個美元符號在JavaScript 中僅是一個普通的字符，沒有其它特殊意義，這裡使用$ 開頭，也僅僅是一個約定俗成的習慣，並非強制要求。
一旦選擇器被快取到變數中，就可以在變數中呼叫 jQuery 的方法了，跟呼叫選擇器沒什麼兩樣。
另外還要注意的是，選擇器只能選擇頁面目前中的元素，如果在執行了選擇器後又往頁面中添加元素，那麼後天加的元素並沒有包含在先前的選擇器中，除非往頁面中新增元素後再次執行選擇器。
有過濾功能的選擇器
有時候執行一個選擇器之後，並非結果集中的所有元素都是我們想要的，那麼就需要對結果集再進行一次過濾：
$('div.foo').has('p'); // 所有包含有 <p> 的 div.foo
$('h1').not('.bar'); // 没有被标记 bar 这个类的 h1 元素
$('ul li').filter('.current'); // 带有类 current 的无序列表
$('ul li').first(); // 无序列表中的第一个元素
$('ul li').eq(5); // 第六个
選擇表單元素
jQuery 提供了一些偽選擇器來選擇表單元素，非常有用。
$('#myForm :input'); // 选择所有可输入的表单元素
如何使用選擇器
執行了選擇器之後，就可以呼叫選擇器中的方法了。這些方法分為兩類：getter 和 setter，getter 傳回結果集中第一個元素的屬性，setter 可以設定結果集中所有元素的屬性。
鍊式操作
jQuery 選擇器中的大多數方法都會回傳的都是 jQuery 物件本身，所以在呼叫一個方法後，可以繼續在這個方法上繼續呼叫其它方法，猶如連招一般：
$('#content').find('h3').eq(2).html('new text for the third h3!');
對於鍊式操作而言，保持程式碼的可讀性很重要：
$('#content')
.find('h3')
.eq(2)
.html('new text for the third h3!');
如果再鍊式操作中，選擇器中的元素有所變化，那麼可以用 $.fn.end 方法回到最初的結果集：
$('#content')
.find('h3')
.eq(2)
.html('new text for the third h3!')
.end() // 返回最初的结果集
.eq(0)
.html('new text for the first h3!');
链式操作非常好用，以至于现在很多其它 JavaScript 库都加入了类似特性。但是对于链式操作也要小心使用，过长的链式操作会给代码的修改和调试带来困难。对于链式操作的长度没有硬性规定 — 只要你觉得能 Hold 住。
jQuery 对有些方法进行了“重载”，所有对某元素赋值或取值的时候所用的方法名是一样的，只是参数列表不同。当用 jQuery 方法对元素赋值的时候，它称为 setter，取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值，getter 只取得选择器中第一个元素的值。
$('h1').html('hello world'); // setter
var str = $('h1').html(); // getter
setter 返回的是 jQuery 对象，可以继续在这个对象上调用 jQuery 方法（链式操作），getter 仅放回我们想要的值，返回值不是 jQuery 对象，所以不能继续链式操作了。
jQuery 操作 CSS
jQuery 可以很方便的设置或取得元素的 CSS 属性。
CSS 属性如果要想在 JavaScript 中使用，多要转换成骆驼命名法（camel cased），例如 CSS 中的 font-size 属性，在 JavaScript 中对应的是 fontSize，但是 jQuery 的 $.fn.css 方法对此做了特殊处理，无论使用哪种写法都可以。
例如：
var strsize1 = $('h1').css('fontSize'); // 返回 "19px"
var strsize2 = $('h1').css('font-size'); // 同上
$('h1').css('fontSize', '100px'); // 给单个属性赋值
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 给多个属性赋值
上面可以看到，一次性给多个属性赋值的时候，实际上传入的是一个对象，这个对象中包含了一些可以表示 CSS 属性的键-值对，在 jQuery 的很多 setter 方法中都有类似用法。
jQuery 操作元素的 class 属性
作为一个 getter，$.fn.css 确实很好用，但是应该尽量避免将其作为 setter 使用，因为一般不建议在 JavaScript 代码中包含太多的样式代码。比较靠谱的方法是把样式规则单独分开写成类（class），然后用 JavaScript 将类应用到元素上即可：
var $h1 = $('h1');
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');
if ($h1.hasClass('big')) { ... }
尺寸
jQuery 中有很多方法可以用来获取或者修改元素的尺寸或者位置信息。
$('h1').width('50px'); // 设置所有 h1 元素的宽度
$('h1').width(); // 得到第一个 h1 元素的宽度
$('h1').height('50px'); // 设置所有 h1 元素的高度
$('h1').height(); // 得到第一个 h1 元素的高度
$('h1').position(); // 返回第一个 h1 元素
// 的位置信息，此返回值是一个对象
// 此位置是相对其父元素的位置的偏移量
这里只是对 jQuery 操纵元素大小及位置信息的简单举例。
