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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • empty方法

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

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

    remove方法

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

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


    查看全部
  • 防止"内存泄漏":绑定的事件,不用的时候要销毁

    可以配合filter过滤出需要移除的内容  然后再.remove()

    查看全部
  • empty 移除此节点下的所有子节点,而此节点仍保留

    查看全部
  • append是后面插前面

    appendTo是前面插后面

    查看全部
  • jQuery遍历之each()
    each是一个for循环的包装迭代器
    each通过回调的方式处理,并且会有2个固定的实参,索引与元素
    each回调方法中的this指向当前迭代的dom元素
    
    开始迭代li,循环2次
    $("li").each(function(index, element) {
         index 索引 0,1
         element是对应的li节点 li,li
         this 指向的是li
    })


    查看全部
  • .clone()复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了

     .clone()是浅拷贝。 .clone(true)是深拷贝。


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

    2019-01-08

  • 保留数据的删除操作detach():

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


    $("div").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。detach方法是JQuery特有的,所以它只能处理通过JQuery的方法绑定的事件或者数据

    代码: if (!$("p").length) return;如果p的长度为0,return,停止函数,防止重复删除。去重

    查看全部
  •  remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。remove可以传递一个选择器表达式用来过滤匹配元素,可以选择性的删除指定的节点

     例如:$("p").remove(":contains('3')") 移除所有元素中包含3文本的

     此代码也可以写为:$("p").filter(":contains('3')").remove()


    查看全部
  • insertBefore()和before的效果是一样的,只不过使用方式不一样。

    insertBefore():插入的内容在前,括号里是要插入的节点。

    不支持多参数!


    查看全部
  • jQuery节点创建常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构")

    创建元素节点:

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


    创建文本节点:

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


    创建属性节点:

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


    查看全部
  • $('li').add('<p>新的p元素</p>').appendTo($('.right'))第一次点击将匹配的元素放入指定的div后,再次点击只添加了一个p元素,其实不是只加了一个p元素。

    因为选择器每次获取li元素的时候都会把li元素提出来,而p元素是动态添加进去的,所以每次点击都会把上面的li元素提取出来,再动态在后面添加一个p元素,给人的效果就像每次只添加了一个p元素

    查看全部
  • add()为追加的意思,为已经选择的元素添加新的元素。

    $('li').add('p').css('background', 'red')的意思是获取所有的li标签和p标签,并给它们添加红色背景色。


    查看全部
  • $(".level-3").parent().css('border', '1px solid red');为查找所有class=level-3的父元素的集合,并添加红色边框。

    parent()可以添加选择器表达式,从已经查找的父元素集合中查找匹配的元素。

    例如:parent(':first')表示父元素中第一个

    查看全部
  • p元素为块元素,有默认外边距,a为行内元素,默认外边距为0

    查看全部
  • unwrap()不接受参数,不管写什么参数都不会起作用,只针对指定元素的父元素

    查看全部

举报

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

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