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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • DOM节点删除之empty()的基本用法 empty 清空方法,但是与删除又不一样,因为它只移除了指定元素中的所有子节点。 这个方法不仅移除了子元素(和其他后代元素),同样移除元素里的文本。因为根据说明,元素里任何文本字符串都被看做是该元素的子节点。请看下面HTML: <div class="hello"><p>慕课网</p></div> 如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中: //通过empty处理 $('.hello').empty() //结果:<p>慕课网</p>被移除 <div class="hello"></div>
    查看全部
  • DOM外部插入insertAfter()与insertBefore() 选择器 描述 insertAfter 在目标元素后面插入集合中每个匹配的元素 insertBefore 在目标元素前面插入集合中每个匹配元素 * .before()和.insertBefore()实现同样的功能。主要的区别还是语法----内容和目标位 置。对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相 反,内容在方法前面,它将被放在参数里元素的前面 * .after()和insertAfter()实现同样的功能。主要的不同是语法----特别是(插入)内容和 目标的位置。对于after()选择表达式在函数的前面,参数是将要插入的内容。对于.insertAfter(),刚好相反,内容在方法的前面,它将被放在参数里元素的后面 * before、after与insertBefore、inserAfter的除了目标与位置的不同外,后面的不支持多参数处理 注意事项: 1.insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素 了,那将后面的元素后移,然后将JQuery对象插入; 2.insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元 素了,那将前面的元素前移,然后将JQuery对象插入;
    查看全部
  • DOM内部插入prepend()perpendTo() 在元素内部进行操作的方法,除了在被选元素的结尾(仍在内部)通过append与appendTo插入指定内容外,相应的还可以在被选元素之前插入,jQuery提供的方法是prependTo 选择器 描述 perpend 向每个匹配的元素内部前置内容 prependTo 把所有匹配的元素前置到另一个指定的元素集合中 prepend与prependTo的使用和区别 1. .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素(如果要作为最 后一个子元素插入,用.append()) 2. .prepend()和prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的 位置不同 3. 对于.prepend()而言,选择器表达方式写在方法的前面,作为待插入内容的容器,将要 被插入的内容作为方法的参数 4. 而.prependTo()正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或 动态创建的标记,待插入内容的容器作为参数。 总结下内部操作四个方法的区别: 1.append()向每个匹配的元素内部追加内容 2.prepend()向每个匹配的元素内部前置内容 3.appendTo()把所有匹配的元素追加到另一个指定元素的集合中 4.prependTo()把所有匹配的元素前置到另一个指定的元素集合中和
    查看全部
  • DOM外部插入after()与before() 选择器 描述 .after(content) 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为 其兄弟节点 .before(content) 据参数设定,在匹配元素的前面插入内容 * before与after都是用来对相对选中元素外部增加相邻的兄弟节点 * 2个方法都是都可以接收HTML字符串,DOM元素,元素数组,或者jQuery对象,用来插入 到集合中的每个匹配元素的前面或者后面 * 2个方法都支持多个参数传递after(div1,div2,div3.......)可以参考右边案例代码 注意点: 1.after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素向后 移,然后将html代码插入 2.before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前 移,然后将html代码插入
    查看全部
  • DOM内部插入append()与appendTo() 把这个新创建的元素,当作页面某一个元素的子元素放到其内部。针对这样的处理,jQuery就定义了2个操作方法 选择器 描述 append(content) 向每个匹配的元素内部追加内容 appendTo(content) 把所有匹配的元素追加到另一个、指定的元素元素集合中 append():这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的 情况类似 appendTo():实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追 加到A中,而是把A追加到B中。 总结:.append()和.appendTo()两种方法功能相同,主要的不同是语法----内容和目标的位 置不同 append()前面是被插入的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容,而后面是被插入的对象
    查看全部
  • jQuery节点创建与属性的处理 创建元素节点:常见的解释直接把这个节点的结构给通过HTML标记字符串描述出来,通过 $()函数处理,$("html结构") $("<div></div>") 创建为本节点:与创建元素节点类似,可以直接把文本内容一并描述 $("<div>我是文本节点</div>") 创建为属性节点:与创建元素节点同样的方式 $("<div id="test" class="aaron">我是文本节点</div>") 我们通过jQuery把上一届的代码改造一下,如下边代码所示一条语句就搞定了,跟html 结构方式是一样的 $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
    查看全部
  • .parent() 找爸爸 之前的: .detach() 隐身 .remove 自杀 .empty 身体被掏空 .clone 复制 (true全复制 false 浅复制,无事件) .replaceWith 删除并替换节点(结合.replaceAll()来记) .wrap 每个人加个爸爸 .unwrap 爸爸没了 .wrapAll 所有人加个爸爸 .wrapAll(function)每个人加个爸爸 .wrapInner 加个儿子 .children() 找儿子 .find() 找后代 http://libs.baidu.com/jquery/1.11.1/jquery.min.js
    查看全部
  • //clone处理一 $("div").clone() //只克隆了结构,事件丢失 //clone处理二 $("div").clone(true) //结构、事件与数据都克隆
    查看全部
    0 采集 收起 来源:DOM拷贝clone()

    2018-03-22

  • //给页面上2个p元素都绑定时间 $('p').click(function(e) { alert(e.target.innerHTML) })
    查看全部
  • 总结:元素内部插入 append 内容后加入 prepend内容前加入 $(内容).appendto ($(*)) 添加兄弟元素 before after $(内容).insertAfter ($(*))
    查看全部
  • add()的参数可以几乎接受任何的$(),包括一个jQuery选择器表达式,DOM元素,或HTML片段引用。
    查看全部
  • 有点小问题: 1 给a元素内部包裹一个子层,但是css规范中规定内联元素是不能包裹块级元素的,所以给a一个display:block;的声明; 2 style里设置了div为浮动,当给内层元素包裹一层div时同样也会浮动子元素,而这个时候子元素全都浮动会造成父元素的宽高撑不开,所以得清除浮动,a:after,p:afer{content:"";display:block;clear:both;} 3 给每个事件解绑
    查看全部
  • 这节: .wrapInner 加个儿子 之前的: .detach() 隐身 .remove 自杀 .empty 身体被掏空 .clone 复制 (true全复制 false 浅复制,无事件) .replaceWith 删除并替换节点(结合.replaceAll()来记) .wrap 每个人加个爸爸 .unwrap 爸爸没了 .wrapAll 所有人加个爸爸 .wrapAll(function)每个人加个爸爸
    查看全部
  • append()前面是被插入的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容,而后面是被插入的对象
    查看全部
  • •创建元素:document.createElement •设置属性:setAttribute •添加文本:innerHTML •加入文档:appendChild
    查看全部

举报

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

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