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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • add( )用来创建一个新的jquery对象,元素添加到匹配的元素集合中;add()的参数可以几乎接受任何的$(),包括一个jqeury选择器表达式,DOM元素,或html片段引用
    查看全部
  • next()方法:jquery是一个集合对象,如果想要快速查找指定元素集合中每一个紧邻的后面同辈元素的元素集合。此时可以用next()方法 next()有参数与无参数
    查看全部
  • closest()方法接受一个匹配元素的选择器字符串,从元素本身开始,在DOM树上向上级元素匹配,并返回最先匹配的祖先元素<br> closest()方法给定的jquery集合或元素来过滤:同样的也是因为jquery是集合对象,可能需要对这个集合对象进行一定的筛选,找出目标元素,所以允许传一个jquery对象<br> <br> parents()与closet()区别:<br> 1、起始位置不同:closet开始于当前元素,parents开始于父元素<br> 2、遍历目标不同:.closet要找到指定的目标,parents遍历到文档根元素,closet向上查找,直到找到一个匹配元素就停止查找,parents一直查找到根元素,并将匹配的元素加入集合<br> 3、结果不同:closet返回的是包含零个或一个元素的jquery对象,parents返回的包含零个或一个或多个元素的jquery对象
    查看全部
  • .each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数
    查看全部
  • .find()和.children()方法是相似的 1.children只查找第一级的子节点 2.find查找范围包括子节点的所有后代节点
    查看全部
  • .replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别 .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序 .replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以和其他方法链接使用 返回的jQuery对象引用的是被删除的节点,而不是通过replaceWith/replaceAll方法替换的节点 任务
    查看全部
  • remove()的有参用法和无参用法 remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。 例如一段节点,绑定点击事件 <div class="hello"><p>慕课网</p></div> $('.hello').on("click",fn) 如果不通过remove方法删除这个节点其实也很简单,但是同时需要把事件给销毁掉,这里是为了防止"内存泄漏",所以前端开发者一定要注意,绑了多少事件,不用的时候一定要记得销毁 通过remove方法移除div及其内部所有元素,remove内部会自动操作事件销毁方法,所以使用使用起来非常简单 //通过remove处理 $('.hello').remove() //结果:<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁 remove表达式参数: remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点 我们可以通过$()选择一组相同的元素,然后通过remove()传递筛选的规则,从而这样处理 对比右边的代码区域,我们可以通过类似于这样处理 $("p").filter(":contains('3')").remove()
    查看全部
  • empty()的基本用法 要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML: <div class="hello"><p>慕课网</p></div> 如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中 //通过empty处理 $('.hello').empty() //结果:<p>慕课网</p>被移除 <div class="hello"></div> 可以参考右边的代码区域: 通过empty移除了当前div元素下的所有p元素 但是本身id=test的div元素没有被删除
    查看全部
  • 如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中 <div class="hello"><p>慕课网</p></div> //通过empty处理 $('.hello').empty() //结果:<p>慕课网</p>被移除 <div class="hello"></div>
    查看全部
  • 外部插入insertAfter()与insertBefore() 与内部插入处理一样,jQuery由于内容目标的位置不同,然增加了2个新的方法insertAfter与insertBefore .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。 对于after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面 before、after与insertBefore。insertAfter的除了目标与位置的不同外,后面的不支持多参数处理 注意事项: insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入; insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
    查看全部
  • a.prepend(b): a中插入b,并b作为第一个元素 a.prependTo(b): a插入到b中,并且a作为第一个元素 a.append(b): a中插入b,并b作为最后一个元素 a.appendTo(b): a插入到b中,并且a作为最后一个元素
    查看全部
  • parent只会查找一级,parents则会往上一直查找祖先节点。 psrents()无参数:parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的jquery对象。返回的元素秩序是从离他们最近的父元素开始的 parents()方法选择性地接受同一类型选择器表达式,因为jquery是集合对象,可能需要对这个集合对象进行一定的筛选,找出目标元素,所以允许传递一个选择器的表达式
    查看全部
  • empty方法 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点 empty不能删除自己本身这个节点 remove方法 该节点与该节点所包含的所有后代节点将同时被删除 提供传递一个筛选的表达式,用来指定删除选中合集中的元素
    查看全部
  • 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild
    查看全部
  • parent()无参数:parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的jquery对象 parent()方法选择性地接受同一类型选择器表达式;因为jqurey是集合对象,可能需要对这个集合对象进行一定的筛选,找出目标元素,所以允许传一选择器的表达式
    查看全部

举报

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

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