今天完成的事情：

继续看JQ基础应用。

1、创建节点与处理属性，看4个例子：

$("<div></div>")

$("<div>我是文本节点</div>")

$("<div id='test' class='aaron'>我是文本节点</div>")

$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

特点是保留HTML的结构书写方式，非常的简单、方便和灵活。

2、DOM内部插入append()与appendTo()

$(“div”).append(“<p>在div中，追加内容p</p>”);  //div中增加p

$(“<p>p中的内容，放入div中</p>”).appendTo(“div”);  //将p放入div中

两个是相反的逻辑，appendTo具有指向性。

这个是追加在尾部的，头部插入使用prepend()与prependTo()。

3、DOM外部插入after()与before()

增加相邻兄弟节点的参数，原节点自动上移或下移。

相似选择器insertAfter()与insertBefore()，这个不支持多参数插入，其余跟after和before差不多，感觉没啥用啊。。

4、节点删除之empty()/remove()/detach()

(1)empty()清空后代节点，自身框架仍然在。

<div class="hello"><p>111</p></div>

//通过empty处理

$('.hello').empty();

//结果：<p>111</p>被移除

<div class="hello"></div>

(2)remove() //通过remove处理

$('.hello').remove()

//结果：<div class="hello"><p>111</p></div> 全部被移除

//节点不存在了,同时绑定的事件也会被销毁

(3)detach()

('.hello'). detach();  //即从当前页面中移除该元素，但保留这个元素的内存模型对象。

('.hello').append();  //重新插入。

JQ独有，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。仅仅是显示效果没有了，但是内存中还是存在的。当你append之后，又重新回到了文档流中又显示出来了。

5、DOM节点的复制与替换

（1）DOM拷贝clone()

<div></div>  // HTML部分

$("div").on('click', function() {//执行操作})  // JavaScript部分

$("div").clone()   //只克隆了结构，事件丢失 //clone处理一

$("div").clone(true) //结构、事件与数据都克隆 //clone处理二

（2）DOM替换replaceWith()和replaceAll()

<div><p>第一段</p></div>  //html结构

$("p:eq(0)").replaceWith('<a style="color:red">替换p[0]的内容</a>')  //p[0]被内容替换

$('<a style="color:red">替换p[0]的内容</a>').replaceAll('p:eq(1)')    //内容替换到p[0]

注意1：替换对象可以是HTML字符串，DOM元素，或者jQuery对象

2：替换后会删除与原节点相关联的所有数据和事件处理程序

6、DOM包裹wrap()方法

（1）增加父系

<p>p元素</p>

$('p').wrap('<div></div>')  //给p元素增加一个div包裹

<div><p>p元素</p></div> //最后的结构，p元素增加了一个父div的结构

增加一个父系元素，可以使用回调函数.wrap( function ) ：返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

（2）删除父系

跟上面的类似，选择器为unwrap；

（3）增加共同父系

<p>p元素</p>

<p>p元素</p>

$('p').wrapAll('<div></div>')  //给所有p元素增加一个div包裹

<div><p>p元素</p><p>p元素</p></div>  //最后的结构,增加了一个共同父系div的结构

$('p').wrapAll(function() {return '<div><div/>'; }) //使用回调函数，每个子系都增加一个父系div

（4）增加子系

<div>p元素</div>

$('div').wrapInner('<p></p>')  //给所有div元素增加一个子系p

<div><p>p元素</p></div>   //结果

7、jQuery遍历

（1）子系查找children()，只返回子系，孙辈等无效。$("ul").children() // children()括号内可加：first/:eq(i)等选择器

（2）后代查找find()，方法同上。

（3）父系查找parent()

（4）祖辈查找parents()  //包括父系

（5）从自身开始向上查找 closest() //与（3）、（4）的区别是，closest()从自身开始向上，且只匹配第一个即停止查找，且接受一个匹配元素的选择器字符串。

（6）向后查找兄弟元素next()，next()括号内可加：first/:eq(i)等选择器限定

（7）向前查找兄弟元素prev()，方法同上。

（8）前后查找兄弟元素siblings()，方法同上。

（9）合集中增加新元素add()

<ul><li>list item 1</li><li>list item 3</li></ul>  //html结构

<p>新的p元素</p>

方法1 传递选择器：$('li').add('p')

方法2传递dom元素：$('li').add(document.getElementsByTagName('p')[0])

方法3 动态创建，加入到指定位置：$('li').add('<p>新的p元素</p>').appendTo(目标位置)

（10）for循环的包装迭代器each()

<ul><li>Aaron1</li><li>Aaron2</li></ul>  //html结构

$("li").each(function(index, element) {}) //固定格式，index为合集索引，element是对应的li节点li, this 指向的是li。

each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数。

困难无；

收获：继续拓展基础知识，对DOM相关操作，及JQ选择器的应用初步了解，会简单应用，还需要在后续的实践中摸索学习。

计划：明天开始看jQuery基础(三)—事件篇，结合有限状态机的学习，逐渐开始任务4。