今天来复习jQuery的DOM操作。jQuery中DOM的操作是很常见的,简单的创建一个元素,就直接在$()中写入需要创建的标签,如$("<div></div>")就是创建了一个空的div元素。对元素的属性进行操作,用的是attr()这个方法,可以对单个属性进行操作,也可以对多个属性进行操作,单个操作时传入的就是单个键值对,多个操作就传入多个键值对的对象,删除元素属性用removeAttr()方法。
操作元素内容的方法,有html()和text(),区别在于,前者获取的是HTML内容,后者获得的是文本内容。如果元素有value属性,如input,则val()方法就是获取元素的value值,值得注意的是,如果获取select标签中的多个选项值,则可以用val().join(",")来将获取的值转换成用逗号隔开的字符串。
操作元素的类时,可以用addClass()或removeClass()来实现增加或删除某个类,也可以用toggleClass()来切换某个类。removeClass()如果不传参数,则会删除该元素上所有的类。
内部插入节点的方法,有append(),appendTo(),prepend(),prependTo()。其中append和appendTo是将节点插入到元素内部的最后,不同之处就是一个是追加,一个是被追加;prepend()和prependTo()跟append()的不同之处是,prepend()追加的位置是元素的头部,即在最开始的地方插入。
外部插入节点的方法,用到的则是after(),insertAfter(),before(),insertBefore()。这与内部插入节点的方法是相似的,只是一个是在节点内部操作,一个是在节点外部操作。节点内部操作的结果是产生新的子节点,节点外部操作的结果是产生新的兄弟节点。
对节点的操作,还有克隆节点clone(),这只是潜复制,如果要将节点的所有行为都复制,则传入"true"即可(clone(true))。
还有一个操作是对节点的替换,用的方法是replaceWith()和replaceAll(),它将会用相关节点来替换被操作的节点,不同点就是一个是替换别人,一个是被人替换。
还有一个不是很常用的包裹元素方法,wrap()、unwrap()和wrapInner(),wrap()包裹外部元素,unwrap()去掉外部包裹的元素,wrapInner()包裹元素内部的文本字符。
最后,删除页面元素,一个是用remove(),一个是用empty(),两者的区别是,remove将直接把该元素及后代元素都删除,empty则保留该元素,清空其所有后代元素。