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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • 深复制指的是开辟了一块新的内存并将数据拷贝一份新的到新的内存中

    使用clone(true)将继续被克隆元素和原始元素共享, 两个元素使用的是同一个数据, 也就是说改变其中一个元素数据, 另一个元素的数据也将改变,

    简单点的例子:

    a.data = [1, 2, 3];

    b = a.clone(true);

    b.data; // [1, 2, 3]

    b.data[2] = 5; // [1, 2, 5]

    a.data // [1, 2, 5]


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

    2018-12-29

  • 为了防止"内存泄漏",所以前端开发者一定要注意,绑了多少事件,不用的时候一定要记得销毁

    查看全部
  • .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。

    insertBefore。insertAfter不支持多参数处理

    查看全部
  • 内部是插入子代,外部是插入兄弟关系的

    查看全部
  • $('')创建的元素只有第一个参数有效

    查看全部
  • 该方法返回原始的元素集,以便之后使用链式方法。

    查看全部
  • replaceWith()替换选中的内容,并会返回删除的内容。

    两个方法都会删除与节点相关联的所有数据和事件处理程序

    查看全部
  • each是一个for循环的包装迭代器
    each通过回调的方式处理,并且会有2个固定的实参,索引与元素
    each回调方法中的this指向当前迭代的dom元素


    查看全部
  • .find()和.children()方法是相似的
    1.children只查找第一级的子节点
    2.find查找范围包括子节点的所有后代节点


    查看全部
  • .closest开始于当前元素 .parents开始于父元素

    closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合

    查看全部
  • children()方法

    children()快速查找集合里面的第一子元素,

    .children(selector)方法是返回匹配元素集合中每个元素的所有子元素(仅儿子)。

    <div class="div">
        <ul class="son">
            <li class="grandson">1</li>
        </ul>
    </div>

    代码如果是$("div").children(),那么意味着只能找到ul,因为div与ul是父子关系,li与div是祖辈关系,因此无法找到。

    children()无参数

    允许我们通过在DOM树中对这些元素的直接子元素进行搜索,并且构造一个新的匹配元素的jQuery对象

    注意:jQuery是一个合集对象,所以通过children是匹配合集中每一给元素的第一级子元素

    .children()方法选择性地接受同一类型选择器表达式

    $("div").children(".selected")

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


    查看全部
  • wrapInner()方法

    .wrapInner(element)给集合中匹配的元素内部添加包裹html的结构。

    .wrapInner(function) 允许使用一个callback函数做参数,每次遇到匹配元素是,执行函数,返回一个DOM元素,jQuery对象或者HTML片段。

    查看全部
  • unwrap()方法

    unwrap()是讲匹配元素集合的父级元素删除,保留自身(和兄弟元素)在原位置。

    在div中包含p标签,$('div').upwrap();可以去掉div,p标签保留不受影响。

    .upwarp()的括号中可以不加参数

    查看全部
  • wrap()方法

    .wrap(warppingElement)是在集合中匹配的每一个元素周围包裹一个html结构。

    eg:在p标签<p>p标签元素</p>外包裹一层div.

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

    $('p').wrap(function(){

            return '<div></div>';

    })

    .wrap(function)用一个回调函数,返回用于包裹匹配元素的HTML或者jquery对象.

    .wrap()可以接受任何字符串或对象,可以传递给$()工厂函数类指定一个DOM结构。可以嵌套多层,可能只包含一个核心元素。该方法返回原始的元素集。

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

    .replaceWith(newContent)用newContent替换集合中所有匹配的元素,平切返回被删除元素的集合。

    eg:选择A节点,A.replaceWith(B),用B来替换A

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

    replaceWith()和replaceAll()虽然相似,但目标和源相反,

    eg:选中B节点,B.replaceAll(A),用选中的B节点替换A节点。

    区别:

    1、目标和源为主不同,.replaceWith()中被替换的在前,替换的在括号中,而.replaceAll()相反。

    2、都会删除节点相关联的数据和事件。

    3、replaceWith()返回jquery对象,可以和其他方法连接使用。

    4、.replaceWith()返回的jQuery对象引用的是替换前的节点。

    查看全部

举报

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

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