重新复习jQuery的一些知识点

Posted 2020-08-15

　　今天来复习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则保留该元素，清空其所有后代元素。