jQuery页面元素操作（note）

页面是一个DOM模型，页面中的个元素通过模型的节点相互关联形成树状，因此，如果要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加到该节点中。

创建节点元素

函数$()用于动态创建页面元素，其语法格式：
$(html)
其中参数html表示用于动态创建DOM元素的HTML标记字符串。

内部插入节点

在页面中动态创建元素需要执行节点的插入或追加操作。而在jQuery中，有多种方法可以实现该功能，append()方法近视其中之一。按照插入元素的顺序来分，可以分为内部和外部两种方法。
内部插入节点的方法

语法格式	参数说明	功能描述
append(content)	content表示追加到目标中的内容	向所选择的元素内部插入内容
append(function(index,html))	通过function函数返回追加到目标中的内容	想所选择的元素内部插入function函数所返回的内容
appendTo(content)	content表示被追加的内容	把所选择的的元素追加到另一个指定的元素集合中
prepend(content)	content表示插入目标元素内部前面的内容	向每个所选择的的元素内部前置内容
prepend(function(index,html))	通过function函数返回插入目标元素内部前面的内容	向所选择的的元素内部前置function函数所返回的内容
prepend(content)	content表示用于选择元素的jQuery表达式	将所选择的的元素前置到另一个指定的元素集合中

外部插入节点

外部插入节点的方法

语法格式	参数说明	功能描述
after(content)	content表示插入目标元素外部后面的内容	向所选择的元素外部后面插入内容
after(function)	通过function函数返回插入目标外部后面的内容	向所选择的元素外部后面插入function函数所返回的内容
before(content)	content表示插入目标元素外部前面的内容	向所选择的袁苏苏外部前面插入内容
before(function)	通过function函数返回插入目标外部前面的内容	向所选择的的元素外部前面插入function函数所返回的内容
insertAfter(content)	content表示插入目标元素外部后面的内容	将所选择的的元素插入另一个指定的元素外部后面
insertBefore(content)	content表示插入目标元素外部前面的内容	将所选择的元素插入另一个指定的元素外部前面

复制元素节点

在页面中，有时需要将某个元素节点复制到另外一个节点，在jQuery中，通过clone()方法实现，该方法的语法格式为：  clone()
其功能为复制匹配的DOM元素并且选中复制成功的元素。该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone(true)实现，其格式为：
clone(true)
其中的参数设置为true，就可以复制元素的所有事件处理。

替换元素

在jQuery中 ，如果要替换元素中的节点，可以使用replaceWith()和replaceAll()这两种方法，其语法格式：
replaceWith(content)
该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。
replaceAll(selector)
该方法的功能是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。
replaceWith()与repalceAll()方法都可以实现元素节点的替换，两者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的的元素，后者是用字符串替换括号中所选择的的元素。一旦完成替换，被替换元素中的全部事件都将消失。

包裹元素节点

在jQuery中，不仅可以通过方法替换元素节点，还可以根据需求包裹某个指定的节点，对节点的包裹也是DOM对象操作中很重要的一项

语法格式	参数说明	功能描述
wrap(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用其他字符串代码包裹起来
wrap(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素用其他DOM元素包装起来
wrap(fn)	fn参数为包裹结构的一个函数	把所有选择的元素用function函数返回的代码包裹起来
unwrap()	无参数	移除所选元素的父元素或包裹标记
wrapAll(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用单个元素包裹起来
wrapAll(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素用单个DOM元素包裹起来
wrapIneer(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素的子内容（包括文本节点）用字符串代码包裹起来
wrapInner(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素的子内容（包括文本节点）用DOM元素包裹起来
wrapIneer(fn)	fn参数为包裹结构的一个函数	把所有选择的元素的子内容（包括文本节点）用function函数返回的代码包裹

wrap(html)与wrapInner(html)方法比较常用，前者包裹外部元素，后者包裹元素内部的文本字符。

遍历元素

在jQuery中，直接使用each()方法实现元素的遍历。器语法格式：
each（callback）

其中，参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号（从0号开始）；如果需要访问元素中的属性，借助形参index，配合this关键字来实现元素属性的设置或获取。

删除页面元素

在DOM操作页面时，删除多余或指定的页面元素是非常必要的，jQuery提供两种删除元素的方法，即move()和empty().严格来说，empty()方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素。
remove()方法的语法格式：
remove（[expr])
其中参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式获取指定的元素，并进行删除。
empty()方法的语法格式：
empty()
其功能为清空所选择的的页面元素或所有的后代元素。