打开一个网页，如果 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 选择器，另外还有一些非标准的选择器，详情见 ，下面是一些常见选择器的用法：
$('#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，那么它就是可见的。但是 <tr> 例外，jQuery 会根据 <tr> 元素的 CSS 中 display 属性去判断元素是否可见。
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 提供了一些伪选择器来选择表单元素，非常有用。
:button 选择按钮
:checkbox 选择多选框
:checked 选择被选中的表单元素
:disabled 选择被禁用的表单元素
:enabled 选择被启用的表单元素
:file 选择 type="file" 的表单元素
:image 选择 type="image" 的表单元素
…… ……
$('#myForm :input'); // 选择所有可输入的表单元素
如何使用选择器