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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • .find():查找后代

    $("div").find("p"):查找div中所有的后代p元素


    查看全部
  • $("div").children()
    查找选中元素的亲儿子(所有的)
    查看全部
  • .wrapInner()方法:

    选中的元素的内容被指定元素包裹

    <div>p元素</div>
    <div>p元素</div>
    
    $("div").wrapInner("<p></p>")或
    $("div").wrapInner(function(){
    return "<p></p>"})
    
    结果:
    <div>
        <p>p元素</p>
    </div>
    <div>
        <p>p元素</p>
    </div>


    查看全部
  • wrapAll()方法:

    wrap()方法用于给单个元素添加父级,wrapAll()方法则用于给多个元素添加父级。

    <p>p元素</p>
    <p>p元素</p>
    
    $("p").wrapAll("<div></div>")
    
    结果:
    <div>
      <p>p元素</p>
      <p>p元素</p>
    </div>

    这样会将所有的子元素包裹在一个父元素中,怎样实现一个父级包裹一个子元素呢

    $("p").wrapAll(function(){
    return "<div></div>"})


    查看全部
  • unwrap():与wrap()刚好相反,删除选中元素的父级

    <div>
        <p>p元素</p>
    </div>
    
    $("p").unwrap();
    
    结果:
    <p>p元素</p>


    查看全部
  • .wrap():给选中元素添加一个父元素。

    <p>p元素</p>
    
    $("p").wrap("<div></div>")
    
    结果:
    <div>
        <p>p元素</p>
    </div>
    
    另一种用法:
    $("p").wrap(function(){
    return "<div></div>"})


    查看全部
  • replaceWith()和replaceAll()

    $("div").replaceWith('<a>替换内容</a>')

    $("<a>替换内容</a>").replaceAll($('div'))

    总结:

    • .replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别

    • .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

    • .replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以和其他方法链接使用

    • .replaceWith()方法返回的jQuery对象引用的是替换前的节点,而不是通过replaceWith/replaceAll方法替换后的节点


    查看全部
  • .clone():复制、克隆

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

    $("div").clone():只克隆了结构,事件会丢失

    $("div").clone(true):结构、事件和数据都复制


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

    2019-09-08

  • detach()和remove的区别:

    remove:移除节点

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

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

    detach:移除节点

    • 移除的处理与remove一致

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

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


    查看全部
  • detach():删除节点保留数据及事件

    官方解释:

    这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
    $("div").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。


    查看全部
  • empty和remove的区别:

    empty方法

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

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

    remove方法

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

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


    查看全部
  • remove():删除元素本身及内部的一切,包括绑定的事件及与元素相关的jQuery数据。

    有参和无参的区别:

    没有参数,默认删除元素及其子元素(包括事件等);

    有参数,根据传递的参数进行条件的筛选

    例如:

        $("p").remove(":contains('4')")

    查看全部
  • empty():清空所选中元素里面的内容(包括文本内容和子元素)

    <div class="hello"><p>慕课网</p></div>
    
    $(".hello").empty();
    结果:
    <div class="hello"><div>


    查看全部
    • insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入;

    • insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;


    查看全部
  • prepend()和prependTo()

    父子之间的操作

    在所选中元素的子元素前边添加内容。

    • append()向每个匹配的元素内部追加内容

    • prepend()向每个匹配的元素内部前置内容

    • appendTo()把所有匹配的元素追加到另一个指定元素的集合中

    • prependTo()把所有匹配的元素前置到另一个指定的元素集合中

    对于这四种插入方式,如果插入的元素已经存在,则相当于移动操作。

    append()和prepend()的最大区别在于append永远只在最后插入内容,而prepend在前边插入元素的时候,如果存在子元素,则在子元素之前插入内容。

    查看全部

举报

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

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