jQuery学习笔记——简介、选择器
由于时间紧任务急，我必须马上把前端这套东西流程走通，为了第一步能先看懂师兄们写的项目代码，我开始了jQuery的学习。。。
jQuery简单介绍
简介
jQuery是继Prototype后的又一个优秀的JavaScript库，是一个创建于2006年的开源项目。它凭借简洁的语法、跨平台的兼容性，极大简化了开发人员遍历dom文档、html文档、操作dom、处理事件、执行动画和开发ajax的操作。
jQuery强调写得少，做得多。它独特的选择器、链式操作、事件处理机制和封装完善的ajax都是其他js库望尘莫及的。
优势
轻量级、强大的选择器、出色的DOM封装、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式操作方法、丰富的插件支持、隐式迭代。
配置环境
不需要特别安装，只要在页面<head>标签内写一行标签引入即可，此方法是在百度上调用jquery。
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
或者采用本地存放jquery方法：在jquery官网下载一个jquery.js文件，放在本地项目所在webroot的js文件夹内，再在<head>标签内写一行标签：
<script type="text/javascript" src="jquery.js"></script>
代码风格
链式操作风格
- 对于同一个对象不超过3个操作的，可以写在一行
- 对于同一个对象较多操作，建议每一行写一个操作
- 对于多个对象少量操作，可以每个对象写一行，如果涉及子元素，可以适当缩进
jQuery对象和DOM对象
DOM：document object model 文档对象模型
jQuery对象：通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，jQuery对象可以使用jQuery里的方法。
$("#foo").html();
等同于
document.getElementById("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法。DOM对象也不能使用jQuery里的方法。
jQuery对象和DOM对象的相互转换
获取jQuery对象：var $variable = jQuery 对象;
获取DOM对象：var variable = DOM 对象;
1、 jQuery对象-->DOM对象
[index]和get(index)
- [index]方法
var $cr = $("#cr");
var cr = $cr[0];
```-
- get(index)方法
var $cr = $("#cr");
var cr = $cr.get(0);
2、DOM对象--> jQuery对象
var cr = document.getElementById("cr");
var $cr = $(cr);
- 平时用到的jQuery对象都是通过$()函数制造出来的，$()函数是jQuery对象的制造工厂。
#### jQuery选择器
选择器是jQuery的根基，对事件处理、遍历DOM、Ajax操作都依赖于选择器。
##### 一、CSS选择器
要使某个样式应用于特定的HTML元素，需要找到该元素，在CSS中，执行这一任务的表现规则称为CSS选择器。
|选择器|语法|描述|示例|
|:--|:--|:--|:--|
|标签选择器|E{<br/> CSS规则<br/>}<br/>|以文档元素作为选择符|a{<br/> font-size:14px;<br/>}|
|ID选择器|#{<br/> CSS规则<br/>}|以文档元素的唯一标识符ID作为选择符|#note{<br/> font-size:14px;<br/>}|
|类选择器|E.className{<br/> CSS规则<br/>}|以文档元素的class作为选择符|div.note{<br/> font-size:14px;<br/>}|
|群组选择器|E1,E2,E3{<br/> CSS规则<br/>}|多个选择符应用同样的样式规则|td,p,a{<br/> font-size:14px;<br/>}|
|后代选择器|E F{<br/> CSS规则<br/>}|元素E的任意后代元素F|#links a{<br/> font-size:14px;<br/>}|
|通配选择器|*{<br/> CSS规则<br/>}|以文档的所有元素作为选择符|*{<br/> font-size:14px;<br/>}|
这就尴尬了，回车的代码都显示出来了，下次还是粘贴表格图片好了。br是回车的意思。
几乎所有主流浏览器都支持上面这些选择器。此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器，但主流浏览器并不支持所有CSS选择器~~
##### 二、jQuery选择器
jQuery选择器完全继承了CSS风格，可以便捷迅速的找出特定的DOM元素，无需担心浏览器是否支持这一选择器，jQuery的行为都必须在获取到元素后才能生效。
**jQuery选择器的优势**
- 简洁的写法
`比如：用$("#ID")代替document.getElementById()函数`
- 支持CSS1到CSS3选择器
- 完善的处理机制
即使用jQuery获取网页中不存在的元素也不会报错~
**jQuery选择器**
- 基本选择器
最常用、最简单的选择器。通过id、class、标签名等来查找DOM元素。在网页中，每个id只能用一次，class可以重复使用。
- 层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，如后代元素、子元素、相邻元素和同辈元素等，那么需要用层次选择器。
- 过滤选择器（基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象过滤选择器）
过滤选择器是通过特定过滤规则来筛选所需的DOM元素，选择器以：开头。
1、基本过滤选择器
2、内容过滤选择器
3、可见性过滤选择器
4、属性过滤选择器
它的过滤规则是通过元素的属性来获取相应的元素。
5、子元素过滤选择器
需要注意父元素和子元素的区分。
6、表单对象属性过滤选择器
此属性主要对所选择的表单元素进行过滤。.
- 表单选择器
它可以方便的获取到表单的某个或某类型的元素。
##### 三、jQuery选择器注意事项
1、选择器中含有特殊符号
- 含有"·"、"#"、"（"、"]"等特殊字符：
在特殊符号前加"\\"
- 属性选择器的@符号问题：
由于jQuery版本问题，如果属性选择器前面有@，则去掉
2、选择器中含有空格的注意事项
多一个少一个空格会得到不同结果，这点需要注意
