jQuery基础——样式篇

jQuery基础——样式篇

jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化，由于减少了一些代码，使得该版本比 jQuery 1.x 更小且更快。
如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。

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

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

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

层级选择器

选择器

基本筛选选择器

注意事项：
+ :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
+ gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

内容筛选选择器

注意事项：

• :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
• 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
• :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

可见性筛选选择器

`:hidden`选择器，不仅仅包含样式是`display="none"`的元素，还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素：

CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式

属性筛选选择器

子元素筛选选择器

注意事项：

• :first只匹配一个单独的元素，但是:firs