jQuery笔记1

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代码为例进行讲解.

    <div class="go">
        <h2>围棋国手</h2>
        <ul>
            <li title="柯洁">柯洁</li>
            <li title="唐韦星">唐韦星</li>
            <li title="李世石">李世石</li>
        </ul>
        <button id="test">test</button>
    </div>

• 创建元素节点

jQuery使用工厂函数$()来创建元素节点. 格式是这样的

$(html)

例如在创建两个li标签, 可以这么写

var $li1 = $("<li>时越</li>")
var $li2 = $("<li>姜东润</li>")

注意这里的变量命名, 前面有个$, 这是为了区分jQuery对象与Dom对象. 上面的代码创建了两个包含文本的li标签, 我们还可以直接创建带有属性值的标签.

var $li3 = $("<li class='china' title='胡跃峰'>胡跃峰</li>")

• 插入元素节点
  插入元素节点有很多种方法, 一般而言用的最多的是以下这几个:

append() : 向每个匹配的元素中添加内容. 添加的元素在尾部

appendTo(): 将所有匹配的元素追加到指定的元素. 添加的元素在尾部

pretend() : 向每个匹配的元素中添加内容. 添加的元素在头部

pretendTo() : 将所有匹配的元素添加到指定的元素中, 添加的元素在头部.

after(): 在每个匹配的元素之后插入内容

before(): 在每个匹配的元素之前插入内容

当然jQuery还提供了很多方法供我们插入Dom元素. 但最常见的操作主要还是以上集中, 下面仔细介绍每一种方法的用法.

append

append()应该是用的最多插入元素节点的方法了, 其用法也很简单, 先用jQuery选择器选中元素, 然后使用append()方法添加需要添加的元素就可以了.

$("ul").append($li1)
$("ul").append($li2)

上面的代码会在ul标签的内部后面追加两个li标签. 在chrome中可以看到html代码变成了

<div class="go">
    <h2>围棋国手</h2>
    <ul>
        <li title="柯洁">柯洁</li>
        <li title="唐韦星">唐韦星</li>
        <li title="李世石">李世石</li>
    <li>时越</li><li>姜东润</li></ul>
    <button id="test">test</button>
</div>

appendTo

在插入元素的功能上与append一致, 但用法却正好相反, 看个例子就明白了.

$li1.appendTo("ul")
$li2.appendTo("ul")

生成代码与上个例子的append相同, 但与append的用法不同.两相比较就明白了.

pretend

pretend 的用法与append一致, 稍有不同的地方是pretend会在头部追加元素节点.

$("ul").prepend($li1)
$("ul").prepend($li2)

在chrome中查看源码:

<div class="go">
        <h2>围棋国手</h2>
        <ul><li>姜东润</li><li>时越</li>
            <li title="柯洁">柯洁</li>
            <li title="唐韦星">唐韦星</li>
            <li title="李世石">李世石</li>
        </ul>
        <button id="test">test</button>
</div>

pretendTo

无需多说了吧.

$li1.pretendTo("ul")
$li2.pretendTo("ul")

最后的效果与pretend的例子相同.

after

after会在每个匹配的元素后面添加元素节点, 也就是说使用after插入的是同级元素.

$("li:eq(1)").after($li1)

上面的代码意思是在第二个li元素后面添加$li1元素节点. 最后的源码是这样的.

<div class="go">
        <h2>围棋国手</h2>
        <ul>
            <li title="柯洁">柯洁</li>
            <li title="唐韦星">唐韦星</li>
            <li>时越</li>
            <li title="李世石">李世石</li>
        </ul>
        <button id="test">test</button>
</div>

before

before会在每个匹配的元素前面添加元素节点, 表现的也是同级元素之间的关系.

$("li:eq(1)").before($li1)

上面的代码意思是在第二个li元素前面添加$li1元素节点, 最后的源码是这样的.

<div class="go">
        <h2>围棋国手</h2>
        <ul>
            <li title="柯洁">柯洁</li>
            <li>时越</li><li title="唐韦星">唐韦星</li>
            <li title="李世石">李世石</li>
        </ul>
        <button id="test">test</button>
</div>

常见的元素节点的插入主要有以上几种, 注意这些都是可以配合使用的.

• 删除元素节点

元素节点的删除主要有三种方法, 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 = $("<li>时越</li>")
$("ul li[title=柯洁]").replaceWith($li1)

上面的代码会把li标签为柯洁那一行替换成指定的html.

也可以用replaceAll来完成, 两者的功能完全一致, 只是replaceAll颠倒了操作的顺序.

$li1.replaceAll("ul li[title=柯洁]")

• 包裹元素节点

如果要把某个节点用其他标签包裹起来, jQuery也提供了相对应的方法, 这是非常有用的.主要有三种wrap, wrapAll和wrapInner

例如我们要把li标签中的某些个表示强调, 可以用strong标签将其包裹起来. 使用jQuery可以这么写:

$("ul li").wrap("<strong></strong>")

查看源码, 会发现所有的li 标签都被strong标签包裹. 如下所示:

<div class="go">
        <h2>围棋国手</h2>
        <ul>
            <strong><li title="柯洁">柯洁</li></strong>
            <strong><li title="唐韦星">唐韦星</li></strong>
            <strong><li title="李世石">李世石</li></strong>
        </ul>
        <button id="test">test</button>
</div>

与wrap不同, wrapAll方法会对选中的元素整体进行包裹.

$("ul li").wrapAll("<strong></strong>")

注意看源码, 会发现所有的li标签都被包裹在一个strong标签中

<div class="go">
        <h2>围棋国手</h2>
        <ul>
            <strong><li title="柯洁">柯洁</li><li title="唐韦星">唐韦星</li><li title="李世石">李世石</li></strong>     
        </ul>
        <button id="test">test</button>
</div>

还有一个包裹的方法是wrapInner, 该方法将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来

$("ul li").wrapInner("<strong></strong>")

观察源码,会发现strong会被添加到li标签的内部, 并对其中的文本进行包裹.

<div class="go">
        <h2>围棋国手</h2>
        <ul>
            <li title="柯洁"><strong>柯洁</strong></li>
            <li title="唐韦星"><strong>唐韦星</strong></li>
            <li title="李世石"><strong>李世石</strong></li>
        </ul>
        <button id="test">test</button>
</div>