jQuery入门基础知识学习指南
打开一个网页，如果HTML没有完全加载完毕，就去操作页面中元素是不安全的，但是监测HTML是否加载完毕呢？jQuery提供了一个$(document).ready()方法，任何ready中的代码在HTML完全加载完成后才会被执行。
$(document).ready(function(){
console.log('ready!');
});
此外，它还有一个简写方式
$(function(){
console.log('ready!');
});
$(document).ready()中并非只能执行匿名方法，执行一个已命名的方法也是可以的：
functionreadyFn(){
//codetorunwhenthedocumentisready
}
$(document).ready(readyFn);
选择元素
jQuery最基本的概念就是“选择一些元素，然后对它们做一些事情”。jQuery支持大多数的CSS3选择器，另外还有一些非标准的选择器，详情见http://api.jquery.com/category/selectors/，下面是一些常见选择器的用法：
$('#myId');//此ID在页面中必须唯一
$('div.myClass');//如果指定了元素类型，那么性能会有所提升
$('input[name=first_name]');//速度有点慢，尽量避免这种用法
$('#contentsul.peopleli');
$('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){
varwidth=elem.offsetWidth,height=elem.offsetHeight,
skip=elem.nodeName.toLowerCase()==="tr";
//doestheelementhave0height,0width,
//andit'snota<tr>?
returnwidth===0&&height===0&&!skip?
//thenitmustbehidden
true:
//butifithaswidthandheight
//andit'snota<tr>
width>0&&height>0&&!skip?
//thenitmustbevisible
false:
//ifwegethere,theelementhaswidth
//andheight,butit'salsoa<tr>,
//socheckitsdisplaypropertyto
//decidewhetherit'shidden
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元素
$('ulli').filter('.current');//带有类current的无序列表
$('ulli').first();//无序列表中的第一个元素
$('ulli').eq(5);//第六个
选择表单元素
jQuery提供了一些伪选择器来选择表单元素，非常有用。
- :button选择按钮
- :checkbox选择多选框
- :checked选择被选中的表单元素
- :disabled选择被禁用的表单元素
- :enabled选择被启用的表单元素
- :file选择type="file"的表单元素
- :image选择type="image"的表单元素
- …………
$('#myForm:input');//选择所有可输入的表单元素
如何使用选择器
执行了选择器之后，就可以调用选择器中的方法了。这些方法分为两类：getter和setter，getter返回结果集中第一个元素的属性，setter可以设置结果集中所有元素的属性。
链式操作
jQuery选择器中的大多数方法都会返回的都是jQuery对象本身，所以在调用一个方法后，可以继续在这个方法上继续调用其它方法，犹如连招一般：
$('#content').find('h3').eq(2).html('newtextforthethirdh3!');
对于链式操作而言，保持代码的可读性很重要：
$('#content')
.find('h3')
.eq(2)
.html('newtextforthethirdh3!');
如果再链式操作中，选择器中的元素有所变化，那么可以用$.fn.end方法返回到最初的结果集：
$('#content')
.find('h3')
.eq(2)
.html('newtextforthethirdh3!')
.end()//返回最初的结果集
.eq(0)
.html('newtextforthefirsth3!');
链式操作非常好用，以至于现在很多其它JavaScript库都加入了类似特性。但是对于链式操作也要小心使用，过长的链式操作会给代码的修改和调试带来困难。对于链式操作的长度没有硬性规定—只要你觉得能Hold住。
jQuery对有些方法进行了“重载”，所有对某元素赋值或取值的时候所用的方法名是一样的，只是参数列表不同。当用jQuery方法对元素赋值的时候，它称为setter，取值的时候称为getter。setter会对选择器中的所有所有元素赋值，getter只取得选择器中第一个元素的值。
$('h1').html('helloworld');//setter
varstr=$('h1').html();//getter
setter返回的是jQuery对象，可以继续在这个对象上调用jQuery方法（链式操作），getter仅放回我们想要的值，返回值不是jQuery对象，所以不能继续链式操作了。
jQuery操作CSS
jQuery可以很方便的设置或取得元素的CSS属性。
CSS属性如果要想在JavaScript中使用，多要转换成骆驼命名法（camelcased），例如CSS中的font-size属性，在JavaScript中对应的是fontSize，但是jQuery的$.fn.css方法对此做了特殊处理，无论使用哪种写法都可以。
例如：
varstrsize1=$('h1').css('fontSize');//返回"19px"
varstrsize2=$('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操纵元素大小及位置信息的简单举例。