jquery的DOM操做

一:DOM的定义:

       是Document Object Model的缩写,是文档对象模型，是一种与浏览器、平台、语言无关的接口。使咱们可以轻松的获取和操做网页中的数据、脚本和表现层对象

二DOM的做用:DOM解决Netscape的JavaScript和Microsoft JScript之间的冲突,给与了web设计师和开发者一套标准的方法。        

三:DOM操做的分类:         

          (1)DOM Core(核心):DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言均可以使用它，它的用途并不是仅限于处理网页，也能够用来处理任何一种使用标记语言编写出来的文档。   

         (2)HTML DOM:.HTML_DOM提供一些更简洁的记号来描述各类HTML元素属性,能够获取某些对像以及属性，只能用来处理web文档.

         (3)CSS DOM:CSS_DOM主要用来获取设置style对象的各类属性，经过改变style对象的属性来实现网页的不一样效果。

 四:jQuery中的DOM操做:   

       （1)查找节点:  

            查找元素节点:

　　　　　　1. 获取指定的标签节点 $(“上级标签 标签:eq(“标签索引”)   

                 2. 获取标签节点$(“标签”)                   

　　　　　   3. 获取标签节点文本text()

　　　  查找属性节点:

　　　　　　利用attr()方法来获取它的各类属性的值。Attr()里的参数是一个时：是要查询的属性的名称，也能够是两个。    

　　　　     1. 获取标签节点       

　　　　　  2. 获取标签节点属性:方法attr()     

　　　 (2)建立节点:  

　　　　 建立元素节点       

　　　　　　 注意:(1)动态建立的新元素节点不会被自动添加到文档中，而是须要使用其余方法将其插入文档中(须要append()方法)。   

　　　　　　          (2)当建立单个元素时，要注意闭合标签和使用标准的XHTML格式。  

　　　　  建立文本节点      

　　　　　　  建立文本节点就是在建立元素节点时直接把文本内容写出来，而后用append()添加到文档中。

　　　　   建立属性节点       

　　　　　　 建立属性节点与建立文本节点相似，也是在建立元素节点时一块儿建立。

　     (3)插入节点:     

　　　　 方法以下: 

　　　　　　  方法                　　　　　　 描述                                                

　　　　　　 append()         　　　　　　 在每一个匹配的元素的内部追加内容       

　　　　　　 appendTo()       　　　　　　 将全部匹配的元素追加到指定的元素中  

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

　　　　　   prependTo()       　　　　　　将全部匹配的元素前置到指定的元素中   

　　　　　　after()           　　　　　　　 在每一个匹配的元素以后插入内容

　　　　　   insertAfter()     　　　　　　 将全部匹配的元素以后插入到指定元素的后面  

　　　　　　before()         　　　　　　    在每一个匹配的元素以前插入内容  

　　　　　 insertBefore()   　　　　　　   将全部匹配的元素插入到指定的元素的前面     

    (4)删除节点:   

       方法1:

        remove(), 使用remove()方法删除后,该节点所包含的全部后代节点将同时被删除,该方法的返回值是一个指向已被删除的节点的引用,所以能够在之后再使用这些元素。  

     方法2:

      empty()方法并非删除节点,而是清空节点,它能清空元素中的全部后代节点。  

     (5)复制节点:

              复制节点也是经常使用的DOM操做之一,在clone()方法中传播了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。

      (6)替换节点:   

      方法1:

         replaceWith()方法的做用是将全部匹配的元素的替换成指定的HTML 或者 DOM元素.  

      方法2:

        replaceAll()方法与replaceWith()方法的做用相同,只是颠倒了replaceWith()操做。  

         注意:若是在替换以前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一块儿消失,须要在新元素上从新绑定事件。

      (7)包裹节点:

         包裹节点将某一个节点用其余标记包裹起来.  

       方法1:

        wrap()是将全部的元素进行单独的包裹(将匹配的元素逐个进行包裹).   

      方法2:

        wrapAll()方法是将全部匹配的元素用一个元素来包裹.  

      方法3

       :wrapInner()方法是将每个匹配的元素的子内容【包括文本节点】用其余结构化的标记包裹起来(是包裹匹配元素的文本).           

         注释:wrapAll()与wrapInner()二者的区别在于：前者是将全部匹配元素用一个元素来包裹，后者是将每一匹配的子内容用其余元素标记起来.

     (8)属性操做:

      方法1:

       attr()获取或设置属性，若是要获取某一元素的某一属性，只须要给attr()方法传递一个属性参数便可.     

      方法2:

       removeAtte(),在某些状况下,须要删除文档中的某个元素的特色属性,使用removeAfter()方法。

     (9)样式操做:   

    获取样式和设置样式:  

              attr()方法,用于获取标签元素的属性，也能够用于设置标签元素的属性值,是将原来的属性替换为新的属性，而不是追加。

     追加样式:   

             在jQuary中,使用addClass()方法追加样式,若是给一个元素添加了多个Class值，那么就至关于合并了他们的样式.若是有不一样的class设定了同同样式属性,则后者覆盖前者。  

    移除样式:

             removeClass()方法与addClass()方法相反，能够从匹配的元素中删除所有或者指定的class.    

    切换样式:   

            jQuery提供了一个toggleClass()方法控制样式上的重复切换。若是类名存在则删除它，若是类名不存在则添加它。   

  判断是否含有某个样式:  

            hasClass()能够用来判断元素是否含有某个class,若是有,则返回true,不然返回false.

     (10)设置和获取HTML,文本和值   获取HTML:   

           html()方法获取,此方法相似于Javascript中的innerHTML属性，能够用来读取或者设置某个元素中的HTML内容.   文本值:  

           text()方法设置文本的值,此方法相似于Javascript中的innerText属性，能够用来读取或者设置某个元素中的文本元素。   

          获取值:    val()方法获取值,此方法相似于JavaScript中的value属性，能够用来设置和获取元素的值，不管元素是文本框、下拉列表仍是单选框，它均可以返回元素的值，若是元素为多选，则返回一个包含全部选择的值的数组.

           注释:Html()、text()、val()区别   

                          (1)HTML:取得第一个匹配元素的html内容。这个函数不能用于XML文档。但能够用于XHTML文档,返回的是一个String 。

                          (2)设置每个匹配元素的html内容。这个函数不能用于XML文档。但能够用于XHTML文档。返回一个jquery对象.  

                          (3)TEXT：取得全部匹配元素的内容。结果是由全部匹配元素包含的文本内容组合起来的文本。返回的是一个String.

                          (4)VAL:得到第一个匹配元素的当前值.   

     (11)遍历循环   

           方法children(),用于取得匹配元素的子元素集合。注释:children()方法只考虑子元素而不考虑任何后代元素。         

           方法next(),用于取得元素后面紧邻的同辈元素(只有一个).   

           方法prev(),用于取得元素前面紧邻的同辈元素(只有一个).   

           方法siblings(),用于取得匹配元素先后全部的同辈元素.

           方法closest(),用来取得最近的匹配元素。首先检查当前元素是否匹配，若是匹配则直接返回元素自己。若是不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素若是什么都没找到则返回一个空的jQuery对象.

           其它遍历循环的方法:  

            find(),搜索全部与指定表达式匹配的元素.   

            filter(),筛选出与指定表达式匹配的元素集合. 

            not(),删除与指定表达式匹配的元素.  

            add(),把与表达式匹配的元素添加到jQuery对象中.这个函数能够用于链接分别与两个表达式匹配的元素结果集.  

            Slice(),选取一个与表达式匹配的子集. 

            nextAll(),选择一个元素后面全部的兄弟节点.

            prevAll(),选择一个元素前面全部的兄弟节点.

            parent(),取一个包含着全部匹配元素span的惟一父元素的元素集合 .  

            parents(),取一个包含着全部匹配元素span的祖先元素的元素集合(不包含根元素).  

           注意:这些遍历DOM方法有一个共同点，均可以使用jQuery表达式做为它们的参数来筛选元素。

 五.CSS DOM操做     

           (1).CSS()方法,用css()方法获取元素的样式属性.   

                    注意:不管color属性是外部CSS导入，仍是直接拼接在HTML元素里(内联)，css()方法均可以获取到属性style里的其余属性的值,也能够直接利用css（）方法设置某个元素的单个样式.   

                   做用:1.获取元素的样式属性       

                          2.属性style里的其余属性的值   

                          3.设置某个元素的单个样式     

                          4.能够同时设置多个样式属性    

          (2)设置透明度的属性:opacity      

          (3).获取某个元素的高度的方法height(),还有获取某个元素的height属性。   

                   做用:height()：

                         取得匹配元素当前计算的高度值(px)    

          (4)css()方法与height()方法的区别:  

                         css():获取的高度值与样式的设置有关，可能会获得"auto",也可能获得"10px"之类的字符串.  

                         height():获取的高度值则是元素在页面中的实际高度，与样式的设置无关，而且不带单位.          

                         与height()方法对应的还有一个width()方法，它也能够取得匹配元素的宽度值（px）用法和height()同样.     

          (5)offset():获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性（top和left），它只对可见元素有效.    

                  做用:offset()：

                       获取元素在当前视窗的相对偏移.    

          (6)position():获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()同样,它返回的对象也包括两个属性(top和left).                  做用:position():

                      获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移.   

         (7)scrollTop()方法和scrollLeft()方法:这两个方法的做用分别是获取元素的滚动条距顶端的距离和距左侧的距离    

                 做用:这两个方法的做用分别是获取元素的滚动条距顶端的距离和距左侧的距离.