jQueryDOM节点操作

一、JavaScript中的DOM对象

       例如：document.getElementById("box");//DOM对象

 （1）jQuery对象

      在JQuery库中，可以通过本身自带的方法获取页面元素的对象叫做JQurey对象

      $(".box");//jQuery对象

 （2） DOM对象与jQuery对象的区别

      1.DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性

      2.jQuery对象是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。

  jQuery可以使用jQuery库里面的方法，但是不能使用JS中的方法

例:js中window.onload

       通过原生的JS代码获取DOM对象

       通过对象的属性修改对象的样式

jQuery中页面加载事件:

通过jQuery语法获取id为jqBox的元素获得一个jQuery对象

调用该对象的html()方法进行更改内容

调用该对象的css()方法进行更改颜色样式

 

JS对象只能调用JS中提供的方法和属性，不能使用jquery中的方法和属性

jquery对象只能使用jQuery的方法和属性，不能使用JS提供的方法和属性

通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM

通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短

（3）DOM对象与jQuery对象之间的转换  （JS对象包含 DOM对象）

   jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，

   为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。

   我们使用jQuery的同时也能混合JavaScript原生代码一起使用。

   在很多场景中，我们需要jQuery与DOM能够相互的转换，

   它们都是可以操作的DOM元素，jQuery是一个类数组对象，

   而DOM对象就是一个单独的DOM元素。

相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，

   通过传递不同的参数而产生不同的作用。

   如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

   通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

（4）1、DOM对象转换为jQuery对象

    var a = document.getElementById("a");        DOM对象

    $(box);          jQuery对象

     2、jQuery对象转换为一个DOM对象

       var $divs=$("div");        jQuery对象  divs中包含所有的$divs元素

       var div=$divs[0];         div为DOM对象

      使用jQuery中的get()方法进行转换，只需要提供一个索引就可以了

       var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象

二、节点操作

（1）创建流程：

1.创建元素 document.createElement()

2.为节点添加一下属性 element.setAttribute();

3.可以使用innerText或则innerHTML属性添加文本或则HTML内容

4.使用parentElement.appendChild()方法将新创建的节点添加到父节点中

（2）jQuery创建节点

jQuery节点的创建:$()函数处理，$("html结构")

jQuery创建的节点是一个jQuery对象

1、after()与before() 方法

after(content|fn):在每个匹配的元素之后插入内容。

$(A).after(B); 在A后面插入B元素

before(content|fn):在每个匹配的元素之前插入内容。

$(A).before(B);在A前面插入B元素

2、insertAfter()与insertBefore()

insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

$(A).insertAfter(B) 在B后面插入A元素 与$(A).after(B)是相反的操作，但是功能一样

insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

$(A).insertBefore(B) 在B前面面插入A元素 与$(A).before(B)是相反的操作，但是功能一样

3、append()与appendTo()方法

append(content|fn):向每个匹配的元素内部追加内容

$(A).append(B);将B添加到A中

appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中

$(A).appendTo(B);把A追加到B中

总结：这两个方法功能相同，主要的不同是语法—>内容和目标的位置不同

4、prepend()与prependTo()方法

prepend(content):向每个匹配的元素内部前置内容

$(A).prepend(B);将B添加到A中(和append添加的元素有位置上的区别)

prependTo(content):把所有匹配的元素前置到另一个、指定的元素元素集合中

$(A).prependTo(B);把A追加到B中

例：

（3）jQuery删除节点的方法 remove()与 empty()方法

1. empty() 删除匹配的元素集合中所有的子节点

2. remove([expr]) 从DOM中删除所有匹配的元素

expr:用于筛选元素的jQuery表达式

（4）jQuery删除节点的方法 detach()方法

detach() 从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素

与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

$("div").detach()这一句会移除对象，仅仅是显示效果没有了

但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了

例：