《JQuery的文档处理动态演示》-公开课件.ppt

谢谢！ 以此例列举Jquery的文档处理 p HTML 代码: pI would like to say: /pjQuery 代码: $(p).append(bHello/b); 结果:[ pI would like to say: bHello/b/p ] p b b div HTML 代码: pI would like to say: /p div/divdiv/divjQuery 代码: $(p).appendTo(div); 结果:divpI would like to say: /p/div divpI would like to say: /p/div div p p 比较上两图的区别 图一：向每个匹配的元素内部追加内容。 图二：把所有匹配的元素追加到另一个指定的元 素元素集合中。 结果：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。 p HTML 代码: pI would like to say: /pjQuery 代码: $(p).prepend(bHello/b); 结果：[ pbHello/bI would like to say: /p ] p b b div HTML 代码:pI would like to say: /pdiv id=foo/divjQuery 代码: $(p).prependTo(#foo); 结果：div id=foopI would like to say: /p/div div p p 比较上两图的区别 图一：向每个匹配的元素内部前置内容。 图二：把所有匹配的元素前置到另一个、指定的元素元素集合中。 结果：实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。 p HTML 代码: pI would like to say: /pjQuery 代码: $(p).after(bHello/b); 结果：pI would like to say: /pbHello/b p b b p HTML 代码: pI would like to say: /pjQuery 代码: $(p).before(bHello/b); 结果：[ bHello/bpI would like to say: /p ] p b b 比较上两图的区别 图一：在每个匹配的元素之后插入内容。 图二：在每个匹配的元素之前插入内容。 结果：实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B后置到A的末端，而是把B前置到A前端。 div HTML 代码: pI would like to say: /pdiv id=fooHello/divjQuery 代码: $(p).insertAfter(#foo); 结果：div id=fooHello/divpI would like to say: /p div p p div HTML 代码:div id=fooHello/divpI would like to say: /pjQuery 代码: $(p).insertBefore(#foo); 结果：pI would like to say: /pdiv id=fooHello/div div p p 比较上两图的区别 图一：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。 图二：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。 实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。 div span HTML 代码:div spanI would like to say: /span /divp/pjQuery 代码: $(“span”).wrap(“p”); 结果：:div p spanI would like to say: /span /p/div div p span div p div p span HTML 代码:div pspanI would like to say: /span /p/divjQuery 代码: $(“span”).unwrap(); 结果:div