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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • https://img1.sycdn.imooc.com//5af98a6c000160e505370290.jpg

    查看全部
  • .find()方法要注意的知识点:

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

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

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

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

    注意重点:

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


    查看全部
  • https://img1.sycdn.imooc.com//5af9881500018f5106090292.jpg

    查看全部
  • 记住:wrap()穿外套,wrapInner()穿内衣!

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

    查看全部
  • append()是受,appendTo()是攻,都是内部下面插入。prepend()是受,prependTo()是攻,都是内部上面插入。

    before()和after()是外部插入,一个从前面插,一个从后面插。

    查看全部
  • 以选定的元素为中心,往内查找可以通过find、children方法。如果往上查找,也就是查找当前元素的父辈祖辈元素,jQuery提供了closest()方法,这个方法类似parents但是又有一些细微的区别,属于使用频率很高的方法

    closest()方法接受一个匹配元素的选择器字符串

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

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

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

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

    closest()方法给定的jQuery集合或元素来过滤元素

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

    注意事项:在使用的时候需要特别注意下

    粗看.parents()和.closest()是有点相似的,都是往上遍历祖辈元素,但是两者还是有区别的,否则就没有存在的意义了

    1. 起始位置不同:.closest开始于当前元素 .parents开始于父元素

    2. 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合

    3. 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象


    查看全部
  • jQuery是一个合集对象,如果想快速查找DOM树中的这些元素的后代元素,此时可以用find()方法,这也是开发使用频率很高的方法。这里要注意 children与find方法的区别,children是父子关系查找,find是后代关系(包含父子关系)

    理解节点查找关系:

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

    代码如果是$("div").find("li"),此时,li与div是祖辈关系,通过find方法就可以快速的查找到了。

    .find()方法要注意的知识点:

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

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

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

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

    注意重点:

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


    查看全部
  • append、appendto:添加的是子节点

    before、after:添加的是兄弟节点

    查看全部
  • 注:

    • clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如右边代码我 $(this).clone().css('color','red') 增加了一个颜色

    • 通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上

    • clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据

    • 元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个


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

    2018-05-11

  • clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了

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

    2018-05-11

  • siblings()无参数

    取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

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

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

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


    查看全部
  • prev()无参数

    取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

    注意:jQuery是一个合集对象,所以通过prev是匹配合集中每一个元素的上一个兄弟元素

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

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


    查看全部
  • next()无参数

    允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素,并根据匹配的元素创建一个新的 jQuery 对象。

    注意:jQuery是一个合集对象,所以通过next匹配合集中每一个元素的下一个兄弟元素

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

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


    查看全部
  • closest()方法给定的jQuery集合或元素来过滤元素

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

    注意事项:在使用的时候需要特别注意下

    粗看.parents()和.closest()是有点相似的,都是往上遍历祖辈元素,但是两者还是有区别的,否则就没有存在的意义了

    1. 起始位置不同:.closest开始于当前元素 .parents开始于父元素

    2. 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合

    3. 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象


    查看全部

举报

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

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