jQuery中对dom的操作方法有:
1,增加元素子节点:append():$(选择器).append(string,element,jquery),在匹配的每一个元素的内部插入最后一个子元素.
如果要插入的内容作为第一个子元素,用prepend()方法.appendTo()和prependTo()的功能是一样的,只是选择器放在方法的参数里面.都可以接受多个参数,也就是一次性可以插入多个子节点.
2,增加元素兄弟节点:after(),insertAfter(),before,insertBefore()四个方法,用法和接受的参数都差不多,可以接受数组参数.insertAfter()和insertBefore()的功能就类似于appendTo()和prependTo().
tips:1插入的是子元素而2插入的是兄弟元素.当插入元素的参数是文档中另一个节点元素的时候,1和2里面的方法都是移动该节点.
3,查和改:html()和text()获取元素节点的内容或者设置它们,类似于原生的innerHTML.
4,增加元素父节点:wrap()和wrapInner()这两个方法给选择的每一个元素增加一层父元素.区别是:wrap()把要包裹的元素全部装进来,包括标签.wrapInner只包裹内部内容,有点类似于append,但是是完全不同的结构.而wrapAll()和wrap()的区别是前者给符合选择器的元素整体包裹一层父元素,如果选择的元素之间有其他元素甚至是空格,都会忽略.
5,删除节点:{选中的元素.detach()}-会删除该元素,但是保留该元素的jquery数据结构以便后续把元素弄回来,和toggle搭配很好用.empty()会移除元素的所有子元素包括后代元素的结构,该元素变空.remove()就是彻底的删除,所有的东西,比empty更进一步.unwrap()删除父元素,和4里面的wrap()正好相反.
6,替换元素:replaceAll()和replaceWith():功能类似,区别就是append和appendTo的区别.用一个节点替换另一个节点,被替换的节点的数据结构和事件会被删除.
tips:append家族和after|before家族可以插入的内容包括:dom元素,文本节点,jQuery对象,HTML字符串以及dom元素和文本节点组成的数组,当然也可以接收一个函数,函数最终返回上面的前四种类型.
DOM元素: append(document.createElement('p'));
文本节点: append(document.createTextNode("Hello"));
jQuery对象: append($('p'));
HTML字符串: append('
hello
');当传入多个参数是,可以将dom元素组成数组一起传过去,也可以一个一个传过去.同时不知此文本节点作为多个参数之一.
网友评论