jQuery基础(二)—DOM篇笔记

jQuery

创建节点及节点属性：

• 创建元素：document.createElement、$("<div>我是文本节点</div>")、
• 设置属性：setAttribute
• 添加文本：innerHTML
• 加入文档：appendChild、$body.append(div)、$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

添加操作：

• after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入：$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
• before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插：$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
• append()向每个匹配的元素内部追加内容
• prepend()向每个匹配的元素内部前置内容，$('.aaron1').prepend('<p>prepend增加的p元素</p>')
• appendTo()把所有匹配的元素追加到另一个指定元素的集合中
• prependTo()把所有匹配的元素前置到另一个指定的元素集合中，$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
• insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入，$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
• insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入，$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))

删除节点：

• empty只移除了 指定元素中的所有子节点，$('.hello').empty()
• remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据，$('.hello').remove()
• 所有绑定的事件、附加的数据等都会保留下来的删除操作detach()，$("p").detach()

拷贝：

• .clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点：$("div").clone(true) 结构、事件与数据都克隆

替换：

• .replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
• .replaceAll( target ) ：用集合的匹配元素替换每个目标元素

包裹：

• .wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构，$('p').wrap('<div></div>')
• .wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象，$('p').wrap(function() { return '<div></div>'; })
• unwrap()方法 ，作用与wrap方法是相反的，$('p').unwrap();
• .wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构，$('p').wrapAll('<div></div>')
• .wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象，$('p').wrapAll(function() { return '<div><div/>'; })
• .wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构
• .wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

节点操作：

• .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系），$("div").children(".selected")
• find是后代关系（包含父子关系）
• parent()方法向上查找一级
• parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;
• closest()方法接受一个匹配元素的选择器字符串，从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素，$("div").closet("li')
• 通过next匹配合集中每一个元素的下一个兄弟元素
• prev()取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
• siblings()取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合
• $('li').add('p')合集中添加一新的元素
• .each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数