jQuery选择器之层级选择器

节点与节点直接就会存在父子，兄弟，祖孙的关系

子元素 后代元素 兄弟元素 相邻元素

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

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

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

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

$('div > p')

$('div p')

$(".prev + div")

$(".prev ~ div")

jQuery选择器之类选择器

$( ".class" )

jQuery选择器之id选择器

$( "#id" )

id是唯一的，每个id值在一个页面中只能使用一次。
如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。
但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

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'); //给第一个元素设置颜色

jQuery对象转成DOM对象

    1、利用数组下标的方式读取到jQuery中的DOM对象

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

2、通过jQuery自带的get()方法

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素

$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，

因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

jQuery选择器之可见性筛选选择器

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

1. CSS display的值是none。

2. type="hidden"的表单元素。

3. 宽度和高度都显式设置为0。

4. 一个祖先元素是隐藏的，该元素是不会在页面上显示

5. CSS visibility的值是hidden

6. CSS opacity的指是0

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

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

jQuery选择器之内容筛选选择器

注意事项：

1. :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

3. :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

$(:first)选取第一个元素
$(:last)选取最后一个元素
$(:not(selector))筛选所选元素
$(:eq(index))选择任意index元素
$(:gt(index))选择所有index大于所选index的元素
$(:lt(index))选择所有index小于所选index的元素
$(:even)选择偶数元素，从0开始计数
$(:odd) 选择奇数元素，从0开始计数
$(:header)选取标题元素
$(:root)选取根元素

<span>解析：$( "parent &gt; child" ) </span><br /><span>子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。</span><br /><br /><span>$("ancestor descendant") </span><br /><span>后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等</span><br /><br /><span>$("prev + next")</span><br /><span>相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素</span><br /><br /><span>$("prev ~ siblings")</span><br /><span>一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器</span>

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

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

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

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

<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

使用ele.data()场景：动态自定义html标签内部内容

静态存数据

$.data(“element”，"key","value");

$.data("element","key",{attr:val1,attr:val2});

静态取数据

$.data("element","key")

//取属性值

$.data("element","key").attr;

动态

 //通过.data方式设置数据

        ele.data("a","data test2");

        ele.data("b",{name:"慕课网"});

        //通过.data方式取出数据

        var reset =ele.data("a")+"</br>"+ele.data("b").name;

        ele.find("span").append(reset);