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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
    • .replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别

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

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

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


    查看全部
  • remove:移除节点

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

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

    detach:移除节点

    • 移除的处理与remove一致

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

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


    查看全部
  • empty方法

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

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

    remove方法

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

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


    查看全部
  •  

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

    • after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入

    • before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插

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

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


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

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

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

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


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

    $(".content").append('<div class="append">通过append方法添加的元素</div>')

    $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

    查看全部
  • 比较详细的写法

       $("#bt1").click(function() {

            if (!$("p").length) {

                 return;

            }   //若没有长度则跳出函数

            else{

                 p = $("p").detach();

            }   //有长度则detach()

        });


    查看全部
  •  $('li').add('p').css('background', 'red')

             //等价:

             //1.找到li的jQuery对象集合

             //2.将p的jQuery对象添加到这个集合

             //3.对集合中所有jQuery对象添加css样式


     $('li').add('<p>新的p元素</p>').appendTo($('.right'))

             //等价:

             //1.找到li的jQuery对象集合

             //2.生成一个新的p元素,将这个p元素的jQuery对象放入li的jQuery对象集合中,注意此时p元素还没有被添加到document中

             //3.将这个p元素添加为class==right的子元素


    查看全部
  • add方法实际上是一种选择方法,将一种选择添加到另一种选择之中

    查看全部
  • unwrap()无法清除父元素body

    查看全部
  • 通过remove()方法删除后的按钮,在恢复按钮后,其事件并没有跟着恢复,而detach方法删除后的按钮,其事件仍然得到保留

    查看全部
  • jQuery遍历

    • children()方法://下一节点子类

    快速查找合集里面的第一级子元素,此时可以用children()方法。

    注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素


    • parent()方法://上一节点父类

    快速查找合集里面的上一级父类元素,此时可以用parent()方法。

    注意:jQuery是一个合集对象,所以通过parent是匹配合集中每一个元素的父元素


    • find()方法://后代的全部类(!必须有参数)

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

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

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

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


    • parents()方法://祖辈的全部类

    查找合集里面的每一个元素的所有祖辈元素,此时可以用parents()方法。

    parents()无参数:会找到最上层的父类节点

    parents()有参数:会找到需要的父类节点


    • closest()方法://向上寻找

    在DOM 树上逐级向上级元素匹配,并返回最先匹配的元素。


    • add()方法://相当于和的意思

    注意:add()方法相当于,合并后生成jQuery对象,之前的位置结构在移动后会发生改变。并不是复制生成新的jQuery对象,如果需要复制可以使用clone()节点复制语言。


    • each()方法:

    .each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)


    查看全部
    • DOM节点的创建:

    1)创建元素节点:

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

    2)创建为本节点:

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

    3)创建为属性节点:

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


    • DOM节点的插入

    1)DOM内部插入://父子节点之间的关系处理

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

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

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

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

    2)DOM外部插入://兄弟节点之间的关系处理

    .before()和.insertBefore()实现同样的功能:

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

    .after()和.insertAfter() 实现同样的功能:

    主要的不同是语法——特别是(插入)内容和目标的位置。 对于after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面before、after与insertBefore、insertAfter的除了目标与位置的不同外,insertBefore、insertAfter不支持多参数处理

    注意事项:

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


    • DOM节点删除:

    1)empty()的基本用法://清空子元素和自身的文本信息

    empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。

    2)remove()的基本用法://移除全部(包括自身)

    remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

    3)临时删除操作detach()://可以保留数据

    这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

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


    • DOM节点的复制与替换:

    1)DOM拷贝clone():

    //clone处理一:

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

    //clone处理二:

    $("div").clone(true);//结构、事件与数据都克隆

    2)替换replaceWith()和replaceAll():

    .replaceWith( newContent ):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

    .replaceAll( target ) :用集合的匹配元素替换每个目标元素

    .replaceAll()和.replaceWith()功能类似,但是目标和操作内容相反。

    3)包裹wrap()方法://将元素用其他元素包裹起来,也就是给它增加一个父元素

    .wrap( wrappingElement ):在匹配的元素周围包裹一个父类

    4)删除包裹unwrap()方法:

    .unwrap():将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置

    5)包裹wrapAll()方法://将集合中的元素用其他元素包裹起来

    .wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹HTML结构

    6)包裹wrapInner()方法:

    .wrapInner( wrappingElement ):给集合中匹配的元素的内部,增加包裹的HTML结构


    查看全部
  • wrap(),unwrap(),wrapAll()是外部包裹,wrapInner()是内部包裹

    查看全部

举报

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

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