1.节点操作
jQuery中节点操作主要分为:
查找节点(第4章已讲)
创建节点
插入节点
删除节点
替换节点
复制节点
2.创建节点元素
工厂函数$()用于获取或创建节点
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
插入子节点
元素内部插入子节点
语法 功能
append(content) $(A).append(B)表示将B追加到A中。如:$("ul").append($newNode1);
appendTo(content) $(A).appendTo(B)表示把A追加到B中。如:$newNode1.appendTo("ul");
prepend(content) $(A). prepend (B)表示将B前置插入到A中。如:$("ul"). prepend ($newNode1);
prependTo(content) $(A). prependTo (B)表示将A前置插入到B中。如:$newNode1. prependTo ("ul");
插入同辈节点
元素外部插入同辈节点
语法 功能
after(content) $(A).after (B)表示将B插入到A之后。如:$("ul").after($newNode1);
insertAfter(content) $(A). insertAfter (B)表示将A插入到B之后。如:$newNode1.insertAfter("ul");
before(content) $(A). before (B)表示将B插入至A之前。如:$("ul").before($newNode1);
insertBefore(content) $(A). insertBefore (B)表示将A插入到B之前。如:$newNode1.insertBefore("ul");
替换节点
replaceWith()和replaceAll()用于替换某个节点
$("ul li:eq(1)").replaceWith($newNode1);
或
$newNode1.replaceAll("ul li:eq(1)");
复制节点
clone()用于复制某个节点
$("ul li:eq(1)").clone(true).appendTo("ul");
可以使用clone()实现输出DOM元素本身的HTML
$("<div></div>").append($(DOM元素).clone()).html();
删除节点
jQuery提供了三种删除节点的方法
remove():删除整个节点
detach():删除整个节点,保留元素的绑定事件、附加的数据
empty():清空节点内容
3.获取与设置节点属性
attr()用来获取与设置元素属性
jQuery中节点操作主要分为:
查找节点(第4章已讲)
创建节点
插入节点
删除节点
替换节点
复制节点
2.创建节点元素
工厂函数$()用于获取或创建节点
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
插入子节点
元素内部插入子节点
语法 功能
append(content) $(A).append(B)表示将B追加到A中。如:$("ul").append($newNode1);
appendTo(content) $(A).appendTo(B)表示把A追加到B中。如:$newNode1.appendTo("ul");
prepend(content) $(A). prepend (B)表示将B前置插入到A中。如:$("ul"). prepend ($newNode1);
prependTo(content) $(A). prependTo (B)表示将A前置插入到B中。如:$newNode1. prependTo ("ul");
插入同辈节点
元素外部插入同辈节点
语法 功能
after(content) $(A).after (B)表示将B插入到A之后。如:$("ul").after($newNode1);
insertAfter(content) $(A). insertAfter (B)表示将A插入到B之后。如:$newNode1.insertAfter("ul");
before(content) $(A). before (B)表示将B插入至A之前。如:$("ul").before($newNode1);
insertBefore(content) $(A). insertBefore (B)表示将A插入到B之前。如:$newNode1.insertBefore("ul");
替换节点
replaceWith()和replaceAll()用于替换某个节点
$("ul li:eq(1)").replaceWith($newNode1);
或
$newNode1.replaceAll("ul li:eq(1)");
复制节点
clone()用于复制某个节点
$("ul li:eq(1)").clone(true).appendTo("ul");
可以使用clone()实现输出DOM元素本身的HTML
$("<div></div>").append($(DOM元素).clone()).html();
删除节点
jQuery提供了三种删除节点的方法
remove():删除整个节点
detach():删除整个节点,保留元素的绑定事件、附加的数据
empty():清空节点内容
3.获取与设置节点属性
attr()用来获取与设置元素属性
removeAttr()用来删除元素的属性
4.遍历子元素
children()方法可以用来获取元素的所有子元素
遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
语法 功能
next([expr]) 用于获取紧邻匹配元素之后的元素,如:$("li:eq(1)").next().css("background-color","#F06");
prev([expr]) 用于获取紧邻匹配元素之前的元素,如:$("li:eq(1)").prev().css("background-color","#F06");
slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素,如:$("li:eq(1)").siblings().css("background-color","#F06");
遍历前辈元素
jQuery中可以遍历前辈元素,方法如下:
parent():获取元素的父级元素
parents():元素元素的祖先元素
5.CSS-DOM操作
除css()外,还有获取和设置元素高度、宽度、相对位置等的样式操作方法
语法 功能
css() 设置或返回匹配元素的样式属性
height([value]) 设置或返回匹配元素的高度
width([value]) 设置或返回匹配元素的宽度
offset([value]) 返回以像素为单位的top和left坐标。此方法仅对可见元素有效