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

    

围棋国手

  • 柯洁
  • 唐韦星
  • 李世石
  • 创建元素节点

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标签的内部, 并对其中的文本进行包裹.

    围棋国手

    • 柯洁
    • 唐韦星
    • 李世石

    你可能感兴趣的:(jQuery笔记1)