jQuery非常好用, 但是也有一些地方要多加留意, 这里总结一下我犯过的错误以及常用的操作, 权当笔记.
1 判断元素是否存在
判断元素是否存在在前端中应该是常见的操作, 在使用jQuery进行判断时要多加小心, 先看下面的代码
if ($('.fly')){
console.log('i can fly')
}
上面的代码看似没有问题, 但由于$('.fly')返回的永远是一个对象, 所以不管.fly存不存在, 判断永远都是True. 正确的判断方法应该是根据元素的长度来判断.
if ($('.fly')>0):
console.log('i can fly')
}
2 常用的DOM操作
Dom操作主要是对元素节点进行创建, 插入, 删除, 复制, 替换等操作, jQuery提供了一系列的方法方便的对节点进行操作, 但由于Dom操作繁琐复杂, 这里做一个常用Dom操作的总结. 以系统性的学习Dom操作. 为方便理解, 这里以下面的html代码为例进行讲解.
围棋国手
- 柯洁
- 唐韦星
- 李世石
- 创建元素节点
jQuery使用工厂函数$()来创建元素节点. 格式是这样的
$(html)
例如在创建两个li标签, 可以这么写
var $li1 = $("时越 ")
var $li2 = $("姜东润 ")
注意这里的变量命名, 前面有个$, 这是为了区分jQuery对象与Dom对象. 上面的代码创建了两个包含文本的li标签, 我们还可以直接创建带有属性值的标签.
var $li3 = $("胡跃峰 ")
- 插入元素节点
插入元素节点有很多种方法, 一般而言用的最多的是以下这几个:
append() : 向每个匹配的元素中添加内容. 添加的元素在尾部
appendTo(): 将所有匹配的元素追加到指定的元素. 添加的元素在尾部
pretend() : 向每个匹配的元素中添加内容. 添加的元素在头部
pretendTo() : 将所有匹配的元素添加到指定的元素中, 添加的元素在头部.
after(): 在每个匹配的元素之后插入内容
before(): 在每个匹配的元素之前插入内容
当然jQuery还提供了很多方法供我们插入Dom元素. 但最常见的操作主要还是以上集中, 下面仔细介绍每一种方法的用法.
append
append()应该是用的最多插入元素节点的方法了, 其用法也很简单, 先用jQuery选择器选中元素, 然后使用append()方法添加需要添加的元素就可以了.
$("ul").append($li1)
$("ul").append($li2)
上面的代码会在ul标签的内部后面追加两个li标签. 在chrome中可以看到html代码变成了
围棋国手
- 柯洁
- 唐韦星
- 李世石
- 时越
- 姜东润
appendTo
在插入元素的功能上与append一致, 但用法却正好相反, 看个例子就明白了.
$li1.appendTo("ul")
$li2.appendTo("ul")
生成代码与上个例子的append相同, 但与append的用法不同.两相比较就明白了.
pretend
pretend 的用法与append一致, 稍有不同的地方是pretend会在头部追加元素节点.
$("ul").prepend($li1)
$("ul").prepend($li2)
在chrome中查看源码:
围棋国手
- 姜东润
- 时越
- 柯洁
- 唐韦星
- 李世石
pretendTo
无需多说了吧.
$li1.pretendTo("ul")
$li2.pretendTo("ul")
最后的效果与pretend的例子相同.
after
after会在每个匹配的元素后面添加元素节点, 也就是说使用after插入的是同级元素.
$("li:eq(1)").after($li1)
上面的代码意思是在第二个li元素后面添加$li1元素节点. 最后的源码是这样的.
围棋国手
- 柯洁
- 唐韦星
- 时越
- 李世石
before
before会在每个匹配的元素前面添加元素节点, 表现的也是同级元素之间的关系.
$("li:eq(1)").before($li1)
上面的代码意思是在第二个li元素前面添加$li1元素节点, 最后的源码是这样的.
围棋国手
- 柯洁
- 时越
- 唐韦星
- 李世石
常见的元素节点的插入主要有以上几种, 注意这些都是可以配合使用的.
- 删除元素节点
元素节点的删除主要有三种方法, remove, detach 和empty.
remove
remove方法是从DOM中删除所有匹配的元素
$("ul>li").remove()
如上面的代码会把页面中所有的li标签删除, 当每个节点用remove方法删除后, 该节点所包含的后代节点将同时被删除. 还有一点很有趣, 就是该方法会返回指向删除节点的引用, 也就是说, 我们后续如果需要的话, 还是可以调用的.看下面的代码.
var $li = $("ul>li:eq(1)").remove() // 删除第二个li标签
$li.appendTo("ul") // 把删除的标签添加到ul标签的内部
你会发现被删除的元素还是可以被引用的.
还有一点需要注意的是, remove 是可以带参数的, 其含义是通过传递的参数进行选择性的删除元素.例如我们删除页面中title不为柯洁的标签可以这么写
$("ul li").remove("li[title!=柯洁]")
detach
和remove一样, 也是从DOM中删除所有匹配的元素, 并且节点仍是可以引用的. 和remove的不同点只有一个, 那就是使用detach删除的元素, 其中所有绑定的时间, 附加的数据都会保留下来. 而remove则不会.下面的例子可以说明这一点.
$("ul li").on("click", function(event){
$(this).css("color","#888")
}) // 给li标签绑定事件
$li = $("ul li").detach() // 使用detach 删除元素
$li.appendTo("ul") // 把删除的元素重新添加到ul标签内部
你会发现li标签绑定的事件仍是起作用的, 这说明detach方法返回的对象会保留标签绑定的方法以及附加的数据, 如果把上例中的detach 换成 remove, 则li 标签的事件不会起作用.这就是detach和remove 这两个方法之间的区别.
empty
准确点来说, empty是清空操作, empty方法会把选中元素的所有后代节点清空.
$("ul").empty
上面的方法会把ul内部的元素节点全部清空.
- 元素节点的复制
节点的复制也是DOM操作中常见的一个操作.
$("ul li:eq(1)").clone().appendTo("ul")
上面的代码会复制第二个li标签并添加到ul内部. 需要注意的是这样写复制的节点不具有任何行为和附加数据, 若要继承原始节点所拥有的事件行为或附加数据, 应在clone方法中添加参数true
$("ul li:eq(1)").clone(true).appendTo("ul")
- 替换元素节点
jQuery提供了两种方法用以替换某个元素节点, 即replaceWith 和 replaceAll. replaceWith会把所有匹配的元素都替换成指定的HTML或者DOM元素.
var $li1 = $("时越 ")
$("ul li[title=柯洁]").replaceWith($li1)
上面的代码会把li标签为柯洁那一行替换成指定的html.
也可以用replaceAll来完成, 两者的功能完全一致, 只是replaceAll颠倒了操作的顺序.
$li1.replaceAll("ul li[title=柯洁]")
- 包裹元素节点
如果要把某个节点用其他标签包裹起来, jQuery也提供了相对应的方法, 这是非常有用的.主要有三种wrap, wrapAll和wrapInner
例如我们要把li标签中的某些个表示强调, 可以用strong标签将其包裹起来. 使用jQuery可以这么写:
$("ul li").wrap("")
查看源码, 会发现所有的li 标签都被strong标签包裹. 如下所示:
围棋国手
- 柯洁
- 唐韦星
- 李世石
与wrap不同, wrapAll方法会对选中的元素整体进行包裹.
$("ul li").wrapAll("")
注意看源码, 会发现所有的li标签都被包裹在一个strong标签中
围棋国手
- 柯洁
- 唐韦星
- 李世石
还有一个包裹的方法是wrapInner, 该方法将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来
$("ul li").wrapInner("")
观察源码,会发现strong会被添加到li标签的内部, 并对其中的文本进行包裹.
围棋国手
- 柯洁
- 唐韦星
- 李世石