认识jQuery
JavaScript程序封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。
jQuery的优势：
①轻量级
②强大的选择器：jQuery允许开发者使用从css1到css3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。
③出色的DOM操作的封装。
④可靠的事件处理机制
⑤完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHTTPRequest对象的创建和实用的问题。
⑥不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。
⑦出色的浏览器兼容性。作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。jQuery能够在IE6.0+、FF3.6+、Safari 5.0+、Opera和Chrome等浏览器下正常运行。
⑧链式操作方式。对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。
⑨隐式迭代。当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。
10、行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。
11、丰富的插件支持。
12、完善的文档。
13、开源
jQuery提供两种方法将jquery对象转换为DOM对象：即[index]和get(index)
[index]方法：
var $cr=$("#cr");//jquery对象 var cr=$cr[0];//DOM对象
get[index]方法：
var $cr=$("#cr");//jquery对象 var vr=$cr.get(0);//DOM对象
DOM对象转换为jquery对象
对于DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
var cr=document.getElementById("cr"); var $cr=$(cr);
DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但是jQuery对象提供了一套更加完善的工作用于操作DOM。
平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。
jQuery选择器：利用jQuery选择器可以非常便捷和快速的找出特定的DOM元素，然后为它们添加相应的行为。
jQuery的行为规则都必须在获取到元素后才能生效。
jQuery获取到元素的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="one" id="one">
id为one，class为one的div
<div class="mini">class为mini的div</div>
</div>
<div class="one" id="two" title="test">
id为two，class为one，title为test的div
<div class="mini" title="other">class为mini，title为other的div</div>
<div class="mini" title="test">class为mini，title为test的div</div>
</div>
<div class="one">
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini" title="tesst">class为mini，title为tesst的div</div>
</div>
<div style="display: none" class="none">style的display为none的div</div>
<div class="hide">class为hide的div</div>
<div>包含input的type为“hidden”的div <input type="hidden" size="8"></div>
<span id="mover">正在执行动画的</span>
</body>
</html>
div,span,p{
width: 140px;
height: 140px;
margin: 5px;
background:#aaa;
border:#000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini{
width: 55px;
height: 55px;
background-color: #aaa;
font-size:12px;
}
div.hide{
display: none;
}
$(".demo").click(function(){ ……})
| $("#id") | document.getElementById() |
| $(".tagName") | document.getElementByTagName() |
$("#tt")获取的永远是对象，即使是网页上没有此元素。
因此，使用jQuery检查某个元素在网页上是否存在的时候，应该根据获取到元素的长度来判断。
if($("#tt").length>0){
//do something
}
或者转化成DOM对象来判断，代码如下：
if($("#tt")[0]{
//do something
})
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
CSS选择器找到元素后添加样式，而jQuery选择器找到元素后添加行为。
$('#tt)获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时，应该根据获取到元素的长度来判断，代码如下：
if($("#tt").length>0){ //do something }
或者转化为DOM对象来判断，代码如下：
if($("#tt")[0]){ //do something }
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
//选取#prev之后的所有同辈div元素 $("#prev~div").css("background","#bbffaa"); //选取#prev所有的同辈div元素，无论前后位置 $("#prev").siblings("div").css("background","#bbffaa")
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素。
过滤选择器分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
eq(index)只匹配一个元素，而:nth-child将为每一个符合条件的父元素匹配子元素。
nth-child(index)的index是从1开始的，而:eq(index)是从0开始的。
选择器中含有空格的注意事项：
var $t_a=$('.test :hidden');//选取class为test的元素里面的隐藏内容 var $t_b=$('.test:hidden');//选取隐藏的class为test的元素
