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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • closest()方法接受一个匹配元素的选择器字符串

    从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素

    例如:在div元素中,往上查找所有的li元素,可以这样表达

    $("div").closet("li')


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

    听起来有点绕,可以用个简单的例子描述下,简单的看一段代码:

    <div>p元素</div>
    <div>p元素</div>

    给所有元素增加一个p包裹

    $('div').wrapInner('<p></p>')

    最后的结构,匹配的di元素的内部元素被p给包裹了

    <div>
       <p>p元素</p>
    </div>
    <div>
       <p>p元素</p>
    </div>


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

    简单的看一段代码:

    <p>p元素</p>
    <p>p元素</p>

    给所有p元素增加一个div包裹

    $('p').wrapAll('<div></div>')

    最后的结构,2个P元素都增加了一个父div的结构

    <div>
       <p>p元素</p>
       <p>p元素</p>
    </div>


    查看全部
  • unwrap()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。

    看一段简单案例:

    <div>
       <p>p元素</p>
    </div>

    $('p').unwrap();

    找到p元素,然后调用unwrap方法,这样只会删除父辈div元素了

    结果:

    <p>p元素</p>


    查看全部
  • .wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构

    简单的看一段代码:

    <p>p元素</p>

    给p元素增加一个div包裹

    $('p').wrap('<div></div>')

    最后的结构,p元素增加了一个父div的结构

    <div>
       <p>p元素</p>
    </div>


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

    简单来说:用$()选择节点A,调用replaceWith方法,传入一个新的内容B(HTML字符串,DOM元素,或者jQuery对象)用来替换选中的节点A

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

    .replaceAll()和.replaceWith()功能类似,但是目标和源相反,用上述的HTML结构,我们用replaceAll处理


    查看全部
  • HTML部分
    <div></div>

    JavaScript部分
    $("div").on('click', function() {//执行操作})

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

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

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

    2018-03-25

  • 如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这时候就可以使用detach方法来处理

    detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。

    来看看jquery官方文档的解释:

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

    当然这里要特别注意,detach方法是JQuery特有的,所以它只能处理通过JQuery的方法绑定的事件或者数据

    参考右边的代码区域,通过 $("p").detach()把所有的P元素删除后,再通过append把删除的p元素放到页面上,通过点击文字,可以证明事件没有丢失


    查看全部
  • empty方法

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

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

    remove方法

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

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


    查看全部
  • //通过remove处理
    $('.hello').remove()
    //结果:<div class="hello"><p>慕课网</p></div> 全部被移除
    //节点不存在了,同事事件也会被销毁

    remove表达式参数:

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

    我们可以通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,从而这样处理

    对比右边的代码区域,我们可以通过类似于这样处理

    $("p").filter(":contains('3')").remove()


    查看全部
  • empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。

    这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。

    通过empty移除了当前div元素下的所有p元素
    但是本身id=test的div元素没有被删除

    查看全部
  • .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的结构书写方式,非常的简单、方便和灵活


    查看全部
  • jQuery的DOM操作:

    .append 最后面加个儿子 (结合appendTo()来记)
    .prepend 最前面加个儿子(prependTo()来记)
    .before 我的前面加个兄弟(结合insertBefore来记)
    .after我的后面加个兄弟(结合insertAfter()来记)
    .detach() 隐身
    .remove 自杀
    .empty 身体被掏空
    .clone 复制 (true全复制 false 浅复制,无事件)
    .replaceWith 删除并替换节点(结合.replaceAll()来记)

    .wrap 加个爸爸

    .unwrap去掉爸爸

    wrap()穿外套,wrapInner()穿内衣!
    查看全部
  • $("属性").detach()相当于隐藏节点内容,仅仅是显示效果没有了.但在内存中还是存在的.通过$("属性").append()追加内容可以再重新添加到文档流中,就显示出来了

    查看全部

举报

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

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