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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • 1、在元素内部进行操作的方法,除了在被选元素的结尾(仍然在内部)通过append与appendTo插入指定内容外,相应的还可以在被选元素之前插入,jQuery提供的方法是prepend与prependTo ①append与appendTo:在指定元素的结尾插入指定内容 ②prepend与prependTo:在指定元素之前插入指定内容 2、选择器的描述: prepend与prependTo的使用及区别: (1)相同:.prepend()和.prependTo()实现同样的功能 (2)不同:.prepend()和.prependTo()语法,插入内容和目标位置不同,相反 ①.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append())。 ②对于.prepend()而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数。 ③而.prependTo()正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。 3、总结: ①append()向每个匹配的元素内部追加内容 ②prepend()向每个匹配的元素内部前置内容 ③appendTo()把所有匹配的元素追加到另一个指定元素的集合中 ④prependTo()把所有匹配的元素前置到另一个指定的元素集合中
    查看全部
  • 1、节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系。 之前在处理节点插入的时候,接触到了内部插入的几个方法,还有外部插入的处理,也就是兄弟之间的关系处理,这里jQuery引入了2个方法,可以用来在匹配的元素前后插入内容。 2、选择器的描述: ①after:向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入 ②before:向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入 3、两者特点: ①用来对相对选中元素外部增加相邻的兄弟节点 ②可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或者后面 ③支持多个参数传递after(div1,div2,....)
    查看全部
  • 1、动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来。那么,怎么放到文档上? 这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部。对这样的处理,jQuery就定义2个操作的方法 (1)append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。 (2)appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。 2、总结: (1)相同点:.append()和.appendTo()两种方法功能相同 (2)不同点:主要的不同是语法——内容和目标的位置不同,两者相反 ①append():前面是要选择的对象,后面是要在对象内插入的元素内容 ②appendTo():前面是要插入的元素内容,而后面是要选择的对象
    查看全部
  • remove:移除节点 无参数,移除自身整个节点以及该节点的内部的所有节点,包括节点上事件与数据 有参数,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据 detach:移除节点 移除的处理与remove一致 与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来 例如:$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。
    查看全部
  • 1、通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的。 我们可以通过使用jQuery来简化了这个过程。 2、创建元素节点:(有几种方式) (1)常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理, ①语法:$("html结构") 例如:$("<div></div>") (2)创建文本节点: 与创建元素节点类似,可以直接把文本内容一并描述 例如:$("<div>我是文本节点</div>") (3)创建为属性节点: 与创建元素节点同样的方式 例如:$("<div id='test' class='aaron'>我是文本节点</div>") 3、用jQuery把上一节的代码改造一下,一句就搞定,跟写HTML结构方式一样 例如:$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>") jQuery创建节点的特点:保留HTML的结构书写方式,非常的简单、方便和灵活
    查看全部
  • 1、如何使用JavaScript创建div节点元素? 主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容。 2、浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) (1)创建流程,大体如下: ①创建节点(常见:元素、属性和文本) ②添加节点的一些属性 ③加入到文档中 (2)流程中涉及的方法: ①创建元素:document.createElement ②设置属性:setAttribute ③添加文本:innerHTML ④加入文档:appendChild 3、写一个最简单的元素创建,会发现几个问题: ①每一个元素节点都必须单独创建 ②节点是属性需要单独设置,而且设置的接口不是很统一 ③添加到指定的元素位置不灵活 ④还有一个最重要的:浏览器兼容问题处理
    查看全部
  • 1、jQuery的DOM操作 插入节点、查找节点、替换节点、复制节点、删除节点、包裹节点
    查看全部
  • var $body = $('body'); $body.on('click', function() { //通过jQuery生成div元素节点 var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>") $body.append(div) })
    查看全部
  • .wrapAll( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象 通过回调的方式可以单独处理每一个元素 wrapAll(function)=wrap
    查看全部
  • filter 过滤器 表示吧符合条件的重新提出来设置
    查看全部
  • 把prepend改成before可以查看两者的不同之处, 前者是作为对象的子元素插入,后者是作为对象的兄弟元素插入
    查看全部
  • $("p").filter(":contains('3')").remove() 类似$("p").remove(":contains('3')")
    查看全部
  • $("#demo1,#demo2")也能实现添加标签的方法。 但add()能动态添加标签。eg:add(<p>动态P</p>)。 而$("#demo1,<p>动态P</p>")则不行。
    查看全部
  • parents()筛选到的是祖宗18代,parent()得到的是他爸,两者都是集合 1 .parents()和.parent()方法是相似的,但后者只是进行了一个单级的DOM树查找<br> 2 $( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合。
    查看全部
  • parent()得到的是一个集合,传参数可以筛选出集合中的元素
    查看全部

举报

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

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