慕课网

jQuery基础(二)—DOM篇

最热最新

Lalunashine

3-2 DOM外部插入after()与before() 节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容选择器的描述：tu before与after都是用来对相对选中元素外部增加相邻的兄弟节点 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码注意点： after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入 before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插来自评论：在这里可以想象下，如果一个很长的页面，我们没必要在html里全写出来，等到用户往下滑动鼠标或者其他事件的时候再插入，只要写好css样式就行，这样可以提高网页首次加载的速度

查看全部

0 采集收起来源：DOM外部插入after()与before()
2017-03-07
Lalunashine

3-1 DOM内部插入append()与appendTo() 动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。那么问题来了，怎么放到文档上？这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法 append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。 appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。简单的总结就是： .append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同 append()前面是被插入的对象，后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容，而后面是被插入的对象来自评论： append()返回的是插入到的那个元素对象，appendTo()返回的是插入的那个元素。比如ul.append(li)返回的是ul，li.appendTo(ul)返回的是li，这个在处理一些问题的时候也是有关系的。另外，$(A).appendTo(B)里面的A不能是纯字符串

查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2017-03-07
Lalunashine

2-2 jQuery节点创建与属性的处理上一节介绍了通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程创建元素节点：可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构") $("<div></div>") 创建文本节点：与创建元素节点类似，可以直接把文本内容一并描述 $("<div>我是文本节点</div>") 创建为属性节点：与创建元素节点同样的方式 $("<div id='test' class='aaron'>我是文本节点</div>") 我们通过jQuery把上一届的代码改造一下，如右边代码所示一条一句就搞定了，跟写HTML结构方式是一样的 $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>") 这就是jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活来自评论：其实在on括号里面的click后面加上"button"就可以指定触发事件的元素了，即 $body.on('click','button',function() {... button在这段代码里面并没有起到任何的作用，只要你鼠标点击的位置在body里面，它就会自动创建节点。因为监控的是整个body部分，所以不管点哪里都会生成新的div对象。另，鼠标放按钮上会变色。一开始的body高度只到和按钮底部平行，所以点击按钮下面的空白处不会添加div。

查看全部

0 采集收起来源：jQuery节点创建与属性的处理
2018-03-22
Lalunashine

2-1 DOM创建节点及节点属性通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。试想下这样的情况：如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容，相信本文介绍一定会让你有所收获。先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）创建流程比较简单，大体如下：创建节点(常见的：元素、属性和文本) 添加节点的一些属性加入到文档中流程中涉及的一点方法：创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild 如右边代码所示，写一个最简单的元素创建，我们会发现几个问题：每一个元素节点都必须单独创建节点是属性需要单独设置，而且设置的接口不是很统一添加到指定的元素位置不灵活最后还有一个最重要的：浏览器兼容问题处理针对这一系列的DOM操作的问题，jQuery给出了一套非常完美的接口方法，我们之后就开始深入学习来自评论： querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 addEventListener() 方法用于向指定元素添加事件句柄。提示：使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

查看全部

0 采集收起来源：DOM创建节点及节点属性
2017-03-07
双双要当大学霸

empty: 移出当前div元素下所有的P元素, 但是本身的元素没有被删除.

查看全部

0 采集收起来源：DOM节点删除之empty()的基本用法
2017-03-06
暖兔君

append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2017-03-06
暖兔君

after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入 before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

查看全部

0 采集收起来源：DOM外部插入after()与before()
2017-03-06
暖兔君

append()前面是被插入的对象，后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容，而后面是被插入的对象

查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2017-03-06
kaka8xi

jQuery节点创建

查看全部

0 采集收起来源：jQuery节点创建与属性的处理
2017-03-06
贝贝0_0

给所有p元素增加一个div包裹：$('p').wrapAll('<div></div>') 及时元素不是紧靠的兄弟元素也会被包裹进来

查看全部

0 采集收起来源：DOM包裹wrapAll()方法
2018-03-22
贝贝0_0

.replaceWith()方法返回的jQuery对象引用的是替换前的节点 replaceAll()方法返回的jQuery对象引用的是替换后的节点

查看全部

0 采集收起来源：DOM替换replaceWith()和replaceAll()
2017-03-06
贝贝0_0

clone()如果不携带参数，将不会复制绑定的事件

查看全部

0 采集收起来源：DOM拷贝clone()
2017-03-06
贝贝0_0

Remove删除后数据还是在的但是事件没有了，detach删除后应该说只是暂时剪切掉了，append等于黏贴了

查看全部

0 采集收起来源：DOM节点删除之detach()和remove()区别
2017-03-05
贝贝0_0

e.target与事件委托简例 target定义：　　　　target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。语法：　　　　event.target 　　　　event.target.nodeName 　　//获取事件触发元素标签name（li,p...）　　　　event.target.id　　　　　　　//获取事件触发元素id 　　　　event.target.className　　//获取事件触发元素classname 　　　　event.target.innerHTML　　//获取事件触发元素的内容（li）　　　　等。。。 jquery:this 与 e.target区别　　　　this会冒泡。e.target不冒泡就是指向事件触发的dom。事件委托：原生js 　　　　事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。　　　　使用事件委托时，如果目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。事件委托简单例子：　　　　给ul添加监听click事件，利用冒泡机制具体捕获是ul下的哪一个li触发的click事件 http://www.cnblogs.com/hello-word1/p/5291321.html

查看全部

0 采集收起来源：DOM节点删除之保留数据的删除操作detach()
2017-03-05
贝贝0_0

1.:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素 2.如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

查看全部

0 采集收起来源：DOM节点删除之remove()的有参用法和无参用法
2017-03-05

首页上一页 203 204 205 206 207 208 209 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1、有HTML/CSS基础 2、有JavaScript基础

老师告诉你能学到什么？: 1、jQuery的语法 2、jQuery节点操作