锋利的JQuery 第三章内容

第三章 JQuery 中的DOM操作

3.2.3创建节点没啥特别的主要记住创建出来的元素是父子的关系：向元素内容部追加节点$(“ul”).append(“<li></li>”)，使用append();想向元素后面追加$(“p”).appendTo(“<div>测试</div>”);在这里“To”可以理解为向后，到哪里的意思，还有$(“p”).prepend(“<a href=’#’>测试</a>”)，指向元素内部添加前面添加a标签，在这里“pre”在英语里也是前置，预的意思，在这里意思一致。

还有以上几个元素都应用在元素内部操作的，创建出来的元素是父子的关系，使用以下几个则创建的元素是同辈的关系

$(“p”).after(“<div>1</div>”);向元素后加div同辈元素

$(“<div>1</div>”).insertAfter(“p”);这个则是把div插入到p标签后，但是也是同辈的关系哦

同样的可以插入同辈元素的还有：before()和insertBefore(),用法和after()一样

 

 

3.2.4删除节点

remove()没啥说的就是删除一个节点，例如：$(“ulli:eq(1)”).remove();或者$(“ul li”).remove(“li[title==苹果]”)

detach() 这个方法也是删除，但是并不是和remove()的本质区别就是，detach()删除的元素再被追加回来后原绑定的事件还存在，remove()，删除后再追加原有绑定的事件就没有了！

empty()指清空内容，留着标签。例如：$(“ulli:eq(1)”).empty();只是把li中的文字清空了

 

3.2.5 复制节点，也叫克隆节点主要方法 clone()

如果单独使用clone()，是不会复制对应元素的事件的，需要加”true”即clone(“true”)

 

3.2.6 替换节点 replaceWith()和replaceAll(),只是写法不同，操作结果一致，需要注意的是：如果在替换前给标签绑定了事件，那么替换后事件肯定没有了，无论你替换的标签是否和原有标签一样。

 

写法举例如下：

$("p").replaceWith("<a>你好</a>");

$("<strong>Hello</strong>").replaceAll("p");

 

3.2.7 wrap()  英文翻译后的意思是包裹，和这个标签作用是一样的，本章需要注意区分几个包裹标签的含义：

标签名称	标签使用例子	标签说明
wrap()	$("strong").wrap("<b></b>");	无论有几个<strong>标签，每个<strong>标签外都会有单独一个<b>标签元素来包裹
wrapAll()	$("strong").wrapAll("<b></b>");	无论有几个<strong>标签，外层只包裹一个<b>标签元素
wrapInner()	$("strong").wrapInner("<b></b>");	无论有几个<strong>标签，每个<strong>里面第一层都会是<b>标签元素

wrapInner() 案例：

                             

 

上图是运行前的代码，下图正面wrapInner()添加的标签只包裹第一层子元素，里面的元素不会动

 

 

 

 

3.2.8 属性操作

1．获取属性：attr()案例：$(“div”).attr(“title”);还可以设置属性元素的值：$(“div”).attr(“title”,”你好”);需要设置多个属性的时候：$(“div”).attr(“title”:”你好”,”id”:”div1”);

2．删除属性：removeAttr()案例：$(“div”).removeAttr(“title”);

需要注意的：在JQuery 1.6中新增prop()和removeProp()是用来获取匹配的元素中第一个元素的属性值和删除属性