jQuery学习笔记——简介、选择器

由于时间紧任务急，我必须马上把前端这套东西流程走通，为了第一步能先看懂师兄们写的项目代码，我开始了jQuery的学习。。。

---

jQuery简单介绍

简介

jQuery是继Prototype后的又一个优秀的JavaScript库，是一个创建于2006年的开源项目。它凭借简洁的语法、跨平台的兼容性，极大简化了开发人员遍历dom文档、html文档、操作dom、处理事件、执行动画和开发ajax的操作。
jQuery强调写得少，做得多。它独特的选择器、链式操作、事件处理机制和封装完善的ajax都是其他js库望尘莫及的。

优势
轻量级、强大的选择器、出色的DOM封装、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式操作方法、丰富的插件支持、隐式迭代。

配置环境
不需要特别安装，只要在页面标签内写一行标签引入即可，此方法是在百度上调用jquery。

或者采用本地存放jquery方法：在jquery官网下载一个jquery.js文件，放在本地项目所在webroot的js文件夹内，再在标签内写一行标签：

代码风格
链式操作风格

• 对于同一个对象不超过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{
  CSS规则
}
|以文档元素作为选择符|a{
 font-size:14px;
}|
|ID选择器|#{
  CSS规则
}|以文档元素的唯一标识符ID作为选择符|#note{
 font-size:14px;
}|
|类选择器|E.className{
  CSS规则
}|以文档元素的class作为选择符|div.note{
 font-size:14px;
}|
|群组选择器|E1,E2,E3{
  CSS规则
}|多个选择符应用同样的样式规则|td,p,a{
 font-size:14px;
}|
|后代选择器|E F{
  CSS规则
}|元素E的任意后代元素F|#links a{
 font-size:14px;
}|
|通配选择器|*{
  CSS规则
}|以文档的所有元素作为选择符|*{
 font-size:14px;
}|

这就尴尬了，回车的代码都显示出来了，下次还是粘贴表格图片好了。br是回车的意思。

几乎所有主流浏览器都支持上面这些选择器。此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器，但主流浏览器并不支持所有CSS选择器~~

##### 二、jQuery选择器
jQuery选择器完全继承了CSS风格，可以便捷迅速的找出特定的DOM元素，无需担心浏览器是否支持这一选择器，jQuery的行为都必须在获取到元素后才能生效。

**jQuery选择器的优势**
- 简洁的写法
`比如：用$("#ID")代替document.getElementById()函数`
- 支持CSS1到CSS3选择器
- 完善的处理机制
即使用jQuery获取网页中不存在的元素也不会报错~

**jQuery选择器**
- 基本选择器
最常用、最简单的选择器。通过id、class、标签名等来查找DOM元素。在网页中，每个id只能用一次，class可以重复使用。
![基本选择器.png](http://upload-images.jianshu.io/upload_images/3194437-e65454196c993553.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，如后代元素、子元素、相邻元素和同辈元素等，那么需要用层次选择器。
![层次选择器.png](http://upload-images.jianshu.io/upload_images/3194437-d22423bdc2d380fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 过滤选择器（基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象过滤选择器）
过滤选择器是通过特定过滤规则来筛选所需的DOM元素，选择器以：开头。
1、基本过滤选择器

![基本过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-ddb6a1bd9854e375.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2、内容过滤选择器

![内容过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-117e3b25c6291c89.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3、可见性过滤选择器

![可见性过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-5ae089bd11d57148.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、属性过滤选择器
它的过滤规则是通过元素的属性来获取相应的元素。

![属性过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-79e6394dd6d46f67.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5、子元素过滤选择器
需要注意父元素和子元素的区分。

![子元素过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-5d32d3712baf3bed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6、表单对象属性过滤选择器
此属性主要对所选择的表单元素进行过滤。.

![表单对象过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-4495001092c17929.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 表单选择器
它可以方便的获取到表单的某个或某类型的元素。
![表单选择器.png](http://upload-images.jianshu.io/upload_images/3194437-880d30f3f0ca61b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##### 三、jQuery选择器注意事项
1、选择器中含有特殊符号
- 含有"·"、"#"、"（"、"]"等特殊字符：
在特殊符号前加"\\"
- 属性选择器的@符号问题：
由于jQuery版本问题，如果属性选择器前面有@，则去掉

2、选择器中含有空格的注意事项
多一个少一个空格会得到不同结果，这点需要注意