锋利的jQuery第十三期

  • 2020 年 4 月 10 日
  • 笔记

0 不好意思,这两天由于小编有事要忙,而且一个日更的公众号也需要大家多多来投稿,还是希望能够发原创的文章,转载的文章随处可见,不希望直接拿过来用,所以出现了两天时间没有内容的情况,以后会再确定一下推送的时间,也给各位投稿人和管理员一些休息的时间,在此感谢大家的一路支持。

到上期为止,我们结束了jQuery选择器的部分,锋利的jQuery系列是根据同名书籍整理而成,在演示知识点的同时,融入了一些工作中的用法以及笔者的一些使用经验和注意事项。之前我们一直逐个知识点的讲解,进度也比较缓慢,为的是能够把更多的人领进门,即使没有一点js或者jQuery的基础,也能够看懂和了解,那么接下来将根据工作中用的多的部分来讲一些更实用的东西,对于不是很常用的东西,我会选择跳过,并且对写出的东西做更具体的说明。

首先,书本第三章的内容是有关于DOM操作的,对于节点的创建以及相关的概念还是有必要进行说明的。DOM是文档对象模型的缩写,他是一种与浏览器、平台、语言无关的接口,比如DOM不仅可以用于处理网页,也可以用在处理XML文件,只要我们根据各种语言,如js,java,C#等对于操作DOM的方法,我们便可以取出各类型文档(遵循一定格式的,即使用标记语言编写的文档)中我们想要获取到的元素。那我们首先从创建节点开始,对于这部分,和js中的区别是比较大的,虽然基本流程是一样的,如:先创建一个元素(节点),然后将该节点追加或插入到指定的位置。之前讲过,js和jQuery对象的相互转化非常容易,而js对象本身就是获取的DOM对象,所以我们借助符号和字符串就可以很方便的构造一个节点。如:("<li></li>"),这就是一个li元素的节点,在js中我们要通过document.createElement("li")来创建,这样在写法上就简化了很多,当然,我们也可以通过手动拼接字符串的方式写入到指定位置的标签内,这就是很通用的方法了,相比之下就是比较low,但也万能的方法了。

说完了创建,对于接下来的操作对于大家来说也没什么难度了,因为之前讲过很多追加的方法,如append(),除此之外,还有一些方法供大家选择,如插入到某个元素之后以及移动元素的操作,这能让我们处理一些更复杂的情况。先来看如下的例子:

这是一个ul标签,里面包含三个li标签,现在我们如果想要追加元素,可直接获取ul元素,用append方法即可实现。如果我们要指定添加位置的时候可以使用insertAfter和insertBefore方法,在某个元素之前或之后进行添加,而且根据选择器的不同,我们也可以使用这两个方法对已经存在的元素进行换位,而不是产生新的副本。var li_3 = ("<li title='其它'>其它</li>"),我们先定义好一个待插入的元素。var two_li = ("ul li:eq(1)"),再定义好一个准备插入的位置,例如,我们要将其插入到选择元素的后方,可使用li_3.insertAfter(two_li)。将出现以下效果:

这样我们就将元素插入到了指定元素的后面。如果我们想要改变元素的位置,也可以使用同样的方法,只不过前面应该是一个选择器,而不是一个新的对象,如var three_li = ("ul li:eq(2)"),注意该变量是在插入two_li对象前获取的,所以指向的是菠萝,而非其他。先获取要调整位置的元素,然后使用three_li.insertBefore(

明天又是新的一周了,预祝大家学习工作顺利,早些休息吧。如果你也想和大家分享你的学习心得,欢迎投稿