为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
jQuery基础(二)—DOM篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。

    appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。


    简单的总结就是:

    .append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同

    append()前面是被插入的对象,后面是要在对象内插入的元素内容
    appendTo()前面是要插入的元素内容,而后面是被插入的对象


    查看全部
  • 创建元素节点:

    可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构")

    $("<div></div>")

    创建为本节点:

    与创建元素节点类似,可以直接把文本内容一并描述

    $("<div>我是文本节点</div>")

    创建为属性节点:

    与创建元素节点同样的方式

    $("<div id='test' class='aaron'>我是文本节点</div>")

    我们通过jQuery把上一届的代码改造一下,如右边代码所示

    一条一句就搞定了,跟写HTML结构方式是一样的

    $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

    这就是jQuery创建节点的方式,让我们保留HTML的结构书写方式,非常的简单、方便和灵活


    查看全部


  • .parents() 找长辈(直接遍历到根元素,可能返回零个或一个或多个元素)

    之前的:

    .detach() 隐身

    .remove 自杀

    .empty 身体被掏空

    .clone 复制 (true全复制 false 浅复制,无事件)

    .replaceWith 删除并替换节点(结合.replaceAll()来记)

    .wrap 每个人加个爸爸

    .unwrap 爸爸没了

    .wrapAll 所有人加个爸爸

    .wrapAll(function)每个人加个爸爸

    .wrapInner 加个儿子

    .children() 找儿子

    .find() 找后代

    .parent() 找爸爸

    查看全部
  • .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。

    clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了

    例如:

    HTML部分
    <div></div>
    
    JavaScript部分
    $("div").on('click', function() {//执行操作})
    
    //clone处理一
    $("div").clone()   //只克隆了结构,事件丢失
    
    //clone处理二
    $("div").clone(true) //结构、事件与数据都克隆

    使用上就是这样简单,使用克隆的我们需要额外知道的细节:

    • clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如右边代码我 $(this).clone().css('color','red') 增加了一个颜色

    • 通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上

    • clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据

    • 元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个


    查看全部
    0 采集 收起 来源:DOM拷贝clone()

    2018-05-05


  • 通过一张对比表来解释2个方法之间的不同

    方法名

    参数

    事件及数据是否也被移除

    元素自身是否被移除

    remove

    支持选择器表达

    是(无参数时),有参数时要根据参数所涉及的范围

    detach

    参数同remove

    情况同remove

    remove:移除节点

    • 无参数,移除自身整个节点以及该节点的内部的所有节点,包括节点上事件与数据

    • 有参数,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据

    detach:移除节点

    • 移除的处理与remove一致

    • 与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来

    • 例如:$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。


    查看全部
  • empty方法

    • 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点

    • empty不能删除自己本身这个节点

    remove方法

    • 该节点与该节点所包含的所有后代节点将同时被删除

    • 提供传递一个筛选的表达式,删除指定合集中的元素


    查看全部
  • remove表达式参数:

    remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点


    查看全部
    • clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如右边代码我 $(this).clone().css('color','red') 增加了一个颜色

    • 通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上

    • clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据

    • 元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个


    查看全部
    0 采集 收起 来源:DOM拷贝clone()

    2018-05-04

  • empty方法

    • 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点

    • empty不能删除自己本身这个节点

    remove方法

    • 该节点与该节点所包含的所有后代节点将同时被删除

    • 提供传递一个筛选的表达式,删除指定合集中的元素


    查看全部
    • .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面

    • .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。 对于after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面

    • before、after与insertBefore。insertAfter的除了目标与位置的不同外,后面的不支持多参数处理


    查看全部
  • each是一个for循环的包装迭代器

    each通过回调的方式处理,并且会有两个固定的实参,索引与元素

    each回调方法中的this指向当前迭代的dom元素

    查看全部
  • siblings()无参数:jQuery是一个合集对象,所以通过sibling是匹配合集中每一个元素的同辈元素

    sibling():同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

    查看全部
  • prev()无参数:jQuery是一个合集对象,所以通过prev是匹配合集中每一个元素的上一个兄弟元素

    prev():同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

    查看全部
    • find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以。

    • 与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。

    • find只在后代中遍历,不包括自己。

    • 选择器 context 是由 .find() 方法实现的;因此,$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)


    查看全部
    • .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面

    • .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。 对于after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面

    • before、after与insertBefore。insertAfter的除了目标与位置的不同外,后面的不支持多参数处理


    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的语法 2、jQuery节点操作
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!