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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。 对于after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面 before、after与insertBefore。insertAfter的除了目标与位置的不同外,后面的不支持多参数处理 注意事项: insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入; insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
    查看全部
  • .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()). .prepend()和.prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同 对于.prepend() 而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数 而.prependTo() 正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。 这里总结下内部操作四个方法的区别: append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中
    查看全部
  • DOM外部插入after()与before() before与after都是用来对相对选中元素外部增加相邻的兄弟节点 2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或者后面 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码 注意点: after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入 before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插
    查看全部
  • DOM内部插入append()与appendTo() append(content) 向每个匹配的元素内部追加内容 appendTo(content)把所有匹配的元素追加到另一个指定的元素的元素集合中 append()前面是被插入的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容,而后面是被插入的对象
    查看全部
  • parents()从父元素开始遍历,closest()从当前元素开始遍历。 parents()返回到根元素为止的所有匹配元素,closest()返回一个匹配元素就停止。
    查看全部
  • find() 查找范围包括子节点,以及所有后代节点。 find() 参数是必需的,使用选择表达式 $('.item-ii').find('li') 等价于 $('li', '.item-ii'): 找到.item-li标签下的li的标签。
    查看全部
  • children()获取的 是直接子节点! children()可以传递参数(选择器),利用传递的参数筛选元素!
    查看全部
  • DOM节点删除之empty和remove区别 要用到移除指定元素的时候,jQuery提供了empty()与remove([expr])二个方法,两个都是删除元素,但是两者还是有区别 empty方法 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点 empty不能删除自己本身这个节点 remove方法 该节点与该节点所包含的所有后代节点将同时被删除 提供传递一个筛选的表达式,删除指定合集中的元素 以上就是二者的区别,我们具体通过右边代码部分加深理解
    查看全部
  • empty()方法清空子元素,remove()移除选中元素及子元素。 unwarp()删除匹配元素的父级元素,保留匹配元素(和兄弟元素)。
    查看全部
  • replaceWith方法返回的是替换前的节点(JQuery对象),replaceAll返回的是替换后的节点。 replaceWith和replaceAll会删除和节点相关的数据和时间处理程序
    查看全部
  • clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据。 clone(true)复制原始元素的结构和事件处理函数。 元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个
    查看全部
    0 采集 收起 来源:DOM拷贝clone()

    2017-05-11

  • 将元素用其他元素包裹起来,就是给它增加一个父元素,
    查看全部
  • 创建元素节点$("<div></div>") 创建文本节点$("<div>我是文本节点</div>") 创建属性节点$("<div id='test' class='aaron>我的文本节点</div>")
    查看全部
  • append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中
    查看全部
  • prev()方法选择性地接受同一类型选择器表达式 同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式 这里所谓的同一类型选择器表达式是指什么? $('.item-4').prev('div').css('border', '1px solid blue') 一个是类选择器,一个是元素选择器,这个是否为统一类型选择器
    查看全部

举报

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

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