一.节点的操作
1.查找节点:
var $var_1=$("htmltype");
//这句话就是获取所有htmltype节点
如:var $ul_1=$("ul");
2.创建并追加节点:
创建节点:常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,
var $var_1=$("<htmltype>");
//这句话是创建一个节点
$("htmltype2").append($var_1) ;
//这句话是把节点插入所有htmltype2节点中
创建流程比较简单,大体如下:
创建节点(常见的:元素、属性和文本)
添加节点的一些属性
加入到文档中
流程中涉及的一点方法:
创建元素:document.createElement
设置属性:setAttribute
添加文本:innerHTML
加入文档:appendChild
var $li_1=$("<li title="title1">香蕉</li>");
$("ul").append($li_1);
其中插入方法有以下几种:
(1)append() 把B追加到A内部
$(".content").append('<div class="append">B追加到A内部</div>')
(2)appendTo() 把A追加到B内部
$('<div class="appendTo">A追加到B内部 </div>').appendTo($(".content"))
简单来说,append()前面是要选择的对象,后面是要在对象内插入的元素内容,appendTo()前面是要插入的元素内容,而后面是要选择的对象
(3)prepend() 把B追加到A内部的内容前 ,将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
$('.aaron1') .prepend('<p>prepend增加的p元素</p>')
(4)prependTo() 把A追加到B的内容前
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
这里总结下内部操作四个方法的区别:
append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中
(5)after() 在A后追加B
$(".test2").after('<p style="color:blue">在A后追加B', '<p style="color:blue">多参数</p>')
(6)insertAfter() 在B后追加A
$('<p style="color:red">在test2后追加p</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
})
(7)before() 在A前追加B
$(".test1").before('<p style="color:red">在test1前追加p','<p style="color:red">多参数</p>')
(8)insertBefore()在B前追加A
$('<p style="color:red">在test1前追加p</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})
$("ul").append("<li>你好</li>");//在ul内部追加li
$("<li>你好</li>").appendTo("ul");//在ul内部追加li
3.删除节点
remove() 删除该元素,remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。
empty() 清空节点,它只移除了指定元素中的所有子节点