DOM 基本操作

关于DOM

1.HTML 文档可以看成是一棵树，其中的内容是这棵树的节点

2.DOM 树上的节点之间有父子关系、兄弟关系

3.节点之间还有顺序关系

4.可以通过对 DOM 树的操作来修改 HTML 文档

文档处理

1.内部插入

    1）append(content|fn)  向每个标签的内部插入内容

               $('div').append('<p>培训</p>');

    2）appendTo(content)  

            $(' <p>培训</p> ').appendTo('div')

    3）prepend(content)  向每个元素内部的前部添加

               $('div').prepend('<p>培训</p>');

    4）prependTo(content)

               $(' <p>培训</p> ').prependTo('div')

2.外部插入

    1）after  在每个匹配元素之后插入

              $('div').after(' <p>培训</p> ')

    2）before 在每个匹配元素之前插入

               $('div').bofore(' <p>培训</p> ')

    3）insertAfter  把所有匹配的元素插入另一个元素之后 

              $(' <p>培训</p> ').insertAfter('div')

    4 ）insertBefore  把所有匹配的元素插入另一个元素之前 

              $(' <p>培训</p> ').insertBefore('div')

3.包裹

    1）wrap  将选中的标签包含一层wrap

              $('p').wrap('<div style="background:red"></div>')

    2）unwrap()

              $('p').unwrap() 只能去除前面 wrap 的标签，不能去除 标签中包含的文字

    3）wrapall  将所有的 标签作为一个整体包含一层 wrap

              $('p').wrapAll( '<div style="background:red"></div>' )

    4）wrapInner 将选择的标签的内部所有元素包含在一层 wrap 下

              $('div').wrapInner( '<div style="background:red"></div>' );

4.替换

    1）replaceWith()  选择的标签替换

              $('p').replaceWith( ' <p>培训</p> ' );

    2）replaceAll()  效果跟 replaceWith 一样

              $( ' <p>培训</p> ' ).replaceAll('p')

5.删除

    1）empty()  清空子节点

              $('div').empty()

    2）remove([expr])  删除整个选择的标签

              $('div').remove()

              var elem = $('.cc').remove()   此时相当于剪切的效果

              $('div').after(elem)

    3）detach([expr])  与remove 不同的是，所有绑定的时间和附加的数据等都会被保留下来

               var elem = $('.cc'). detach ()   此时相当于剪切的效果

              $('div').after(elem)

              $('.cc').click(function(){   整个方法会被保留

                   alert("####")

               })

6.克隆

    1） clone([Even[,deepEven]])

              $('.cc').clone(true).after('div')  将上 true 可以将原来的标签的时间也克隆一份

              

筛选操作

1.过滤

         1）eq(index)

                   $('p').eq(1).css('color','red');

         2）first()

         3）last()

         4）filter()  筛选出指定匹配表达式的标签

                   $('p').filter('.cc').css('color','red')

         5）is(expr|obj|ele|fn)  返回 Boolean 值

                   $('p').click(function(){

                             if($(this).is('.cc')){

                                       alert('###');

                              }

                    })

         6）map(callback)  返回一组标签的文本

                   var str = $('p').map(function(){

                            return $(this).text();

                    }).get().join(', ');

         7）slice(index,len)  选择第 index 到 len 长度的标签

                   $('p').slice(1,3).css('color','red')

2.查找

         1） find()

                   $('div').find('p').css('color','red')             

         2）parent()

                   $('.dd').parent().css('color','red')

         3）parents()  除根元素以外的元素都找到

                    $('.dd').parents().css('color','red')

                    $('.dd').parents('#aa').css('color','red')  找到祖先元素为 #aa 的元素与其之间的元素

         4）closest()  与 parents() 有区别，具体查看手册

                    $('.dd'). closest ('#aa').css('color','red')

3.串联

         1）end()  回到最近的一个操作(具体的满足的操作看手册)之前

                    $('div').find('.cc').end().css('color','red')     

属性操作

1.属性

         1）attr(name|pro|key , val|fn)

                   $(':checkbox').eq(0).attr('value')  获取属性值

                    $(':checkbox').eq(0).attr('value':'zf')  更改属性值

                   $(':checkbox').last().attr({name:'zfsite',value:'zf'})  更改多个属性值

         2）removeAttr(name)

                   $(':checkbox').eq(1).removeAttr('value')  删除属性值

                   $(':checkbox').eq(1).removeAttr('name value') 删除多个属性值

         3）prop(n|p|k , v|f) 1.6+  使用与 attr() 方法相似

                   区别：获取 checked、selected、disabled 等属性值时，如果使用 attr()

                                  将 返回 undefined (字符串) ,而使用 prop() 则返回 false(布尔型)

         4）removeProp(name) 1.6+

2.Css 类

         1）addClass(class|fn)

         2）removeClass([class|fn])

         3）toggleClass(class|fn[,sw])

3.HTML代码/文本/值

         1）html([val|fn])  取得第一个匹配的元素的 html 代码 

         2）text([val|fn])  取得第一个匹配的元素的内容的值

         3）val([val|fn|arr]) 获取匹配元素的当前值

css 操作

1.CSS

         css(name|pro|[,val|fn])  1.8*

              $('span').css('display')

              $('span').css('color','blue')

              $('span').css({width:'200px',color:'blue'})

2.位置

         1）offset([coordinates])

              var obj = $('button').offset()  获取相对偏移

              alert('top:'+obj.top+';left:'+obj.left);

         2）position()

         3）scrollTop([val])

         4）scrollLeft([val])

3.尺寸

         1）height([val|fn])

         2）width([val|fn])

         3）innerHeight()

         4）innerWidth()

         5）outerHeight([soptions])

         6）outerWidth([options])

附加内容：

         1）创建节点对象的方法

              $('<span>jQuery</span>')

         2）移动对象的常见实现方法

                   1）插入方式

                             $(':checkbox:first').before($(':checkbox:eq(1)'));

                   2）剪切方式

                             调用 remove() 或 detach() 方法时，会删除当前节点，可以将

                             该节点赋值给变量，放到别的地方

在 jquery 中，有些方法既能返回值，又能设置值