1. 层级选择器都有一个参考节点

2. 后代选择器包含子选择器的选择的内容

3. 一般兄弟选择器包含相邻兄弟选择的内容

4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

jQuery选择器之全选择器（*选择器）

jquery:

$( "*" )

原生：

document.getElementsByTagName('*')

兼容性问题：

1. IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的

2. getElementById的参数在IE8及较低的版本不区分大小写

3. IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A

4. IE8及较低的版本，浏览器不支持getElementsByClassName

jQuery选择器之元素选择器

元素选择器：根据给定（html）标记名称选择所有的元素

$( "element" )

原生方法getElementsByTagName('')

通过getElementsByTagName方法得到页面所有的<div>元素

document.getElementsByTagName('div')

jquery方法

$("p")选取所有的<p>元素

jQuery选择器之类选择器

$( ".class" )

JavaScript的原生getElementsByClassName('')

jQuery选择器之id选择器

$( "#id" )

Query内部使用JavaScript函数document.getElementById('')来处理ID的获取

相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。

如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

普通处理，通过标准JavaScript处理：

var p = document.getElementById('imooc');
p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';

jQuery的处理：

var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

.css()的优先级要高于。addClass()的优先级

子选择器：$('parent > child')

后代选择器：$('ancestor descendant')

相邻（下一个）兄弟选择器：$("prev + next")

一般兄弟选择器（所有）：$("prev ~ siblings")

当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。

$("div[name]") 含有name属性的
$("div[name='test']") name为test的
$("div[name~='test']") name有空格且有test的
$("div[name!='test']") name不为test的
$("div[name*='test']") name包含test的
$("div[name^='test']") name开头为test的
$("div[name$='test']") name结尾为test的
$("div[id][name^='test']") 有id属性且name开头为test的

可维护性：

.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式

通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦

灵活性：

通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的

样式值：

.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

样式的优先级：

css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下

外部样式 < 内部样式 < 内联样式

1. .addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上

2. 通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的

通过.css方法设置的样式属性优先级要高于.addClass方法

总结：

.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则
如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

1. .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名

2. .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

3. .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值

4. .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

注意事项：

1. toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加

2. toggleClass会保留原有的Class名后新增，通过空格隔开

.html(),.text()和.val()的差异总结：  

1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。