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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中
    查看全部
  • 对前面三个节点插入方法大致总结: 1.内部插入方法: $(标签).prepend(插入内容) 指定元素前面插入,并成为其第一个元素; $(插入内容).prependTo(标签) 把指定内容添加到指定元素前面 $(标签).append(插入内容) 指定元素后面插入,并成为其最后一个元素; $(插入内容).appendTo(标签) 把指定内容添加到指定元素后面 2.外部插入方法:(增加相邻的兄弟节点) $(标签).before(插入内容) 指定内容插入到指定元素前面,并支持传入多个参数 $(标签).after(插入内容) 指定内容插入到指定元素后面,同上。
    查看全部
  • insertBefore在目标元素前面插入集合中每个匹配的元素 insertAfter在目标元素后面插入集合中每个匹配的元素 .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。 对于after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面 before、after与insertBefore。insertAfter的除了目标与位置的不同外,后面的不支持多参数处理 注意事项: insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入; insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
    查看全部
  • prepend向每一个匹配的元素内部前置内容 prependTo把所有的元素前置到另一个指定的元素集合中 通过右边代码可以看到prepend与prependTo的使用及区别: .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()). .prepend()和.prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同 对于.prepend() 而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数 而.prependTo() 正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。 这里总结下内部操作四个方法的区别: append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中
    查看全部
  • .after(content)在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 .before(content)根据参数设定,在匹配元素的前面插入内容 before与after都是用来对相对选中元素外部增加相邻的兄弟节点 2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或者后面 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码 注意点: after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入 before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插
    查看全部
  • append(content)向每个匹配的元素追加内容 appendTo(content)把所有匹配的元素追加到另一个、指定的元素集合中。 append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。 appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。 .append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同。两个用法正好相反 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容,而后面是要选择的对象
    查看全部
  • 用jQuery创建节点,直接用 $("节点的html代码")即可。 然后再用append加入到父节点中即可。 <script type="text/javascript"> var $body = $('body'); // 这句要注意,把body转换成jQuery对象之后 $body.on('click', function() { // 这行才能用.on方法
    查看全部
  • empty(),里面不能带参数,remove()可带选择器参数
    查看全部
  • empty(),直接设置了目标元素内容为空,remove(),带参数选择目标删除
    查看全部
  • append()添加子元素,是添加在目标的内部,位置在last, after(),before()添加兄弟元素,after在last,before在first
    查看全部
  • empty方法 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点 empty不能删除自己本身这个节点 remove方法 该节点与该节点所包含的所有后代节点将同时被删除 提供传递一个筛选的表达式,用来指定删除选中合集中的元素
    查看全部
  • remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。
    查看全部
  • <script type="text/javascript"> $(".aaron1").on('click', function() { //给所有p元素,增加父容器div $('p').wrap('<div></div>') }) </script> <script type="text/javascript"> $(".aaron2").on('click', function() { $('a').wrap(function() { //给所有p元素的a元素增加div包裹 return '<div class="' + $(this).text() + '" />'; }) })
    查看全部
  • clone复制克隆<br> 克隆节点,不可隆事件
    查看全部
    0 采集 收起 来源:DOM拷贝clone()

    2018-03-22

  • detach()删除元素,数据会保留下来,append之后,又重新回到了文档流中 remove()删除元素 append()返回detach删除的元素
    查看全部

举报

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

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