慕课网

jQuery基础(二)—DOM篇

最热最新

Gigure

remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。 remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则，从而这样处理对比右边的代码区域，我们可以通过类似于这样处理 $("p").filter(":contains('3')").remove()

查看全部

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

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。

查看全部

0 采集收起来源：DOM节点删除之empty()的基本用法
2017-09-29
Gigure

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面 before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理注意事项： insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入； insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()
2017-09-29
Gigure

这里总结下内部操作四个方法的区别： append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2017-09-29
Gigure

先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）创建流程比较简单，大体如下：创建节点(常见的：元素、属性和文本) 添加节点的一些属性加入到文档中流程中涉及的一点方法：创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild

查看全部

0 采集收起来源：DOM创建节点及节点属性
2017-09-28
小小猪0904

创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild

查看全部

0 采集收起来源：DOM创建节点及节点属性
2017-09-28
qq暮色游侠pp

.children() 找儿子 .find() 找后代 .parent() 找爸爸 .parents() 找长辈(直接遍历到根元素,可能返回零个或一个或多个元素) .closest() 找长辈(从当前节点向上遍历,找到停止,返回零个或一个元素) .next() 找小弟 .prev() 找大哥 .siblings() 找兄弟

查看全部

0 采集收起来源：jQuery遍历之prev()方法
2017-09-27
慕妹6115243

.parents() 找长辈(直接遍历到根元素,可能返回零个或一个或多个元素) 之前的： .detach() 隐身 .remove 自杀 .empty 身体被掏空 .clone 复制（true全复制 false 浅复制，无事件） .replaceWith 删除并替换节点（结合.replaceAll()来记） .wrap 每个人加个爸爸 .unwrap 爸爸没了 .wrapAll 所有人加个爸爸 .wrapAll（function）每个人加个爸爸 .wrapInner 加个儿子 .children() 找儿子 .find() 找后代 .parent() 找爸爸

查看全部

0 采集收起来源：jQuery遍历之parents()方法
2017-09-27
abc123456789def

add 是为已集合的jQuery对象中，再添加一个进去 .add 前后位置影响css效果 append 是插入DOM节点到元素中

查看全部

0 采集收起来源：jQuery遍历之add()方法
2017-09-26
abc123456789def

parents 找到所有匹配的父元素 closest 只要找到一个合适的就不继续找了。

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2017-09-26
慕粉3289534

注意：jQuery是一个合集对象，所以通过next匹配合集中每一个元素的下一个兄弟元素例： $(".item-2").next().css("border","1px solid red"); // 所有class=".item-2"的元素的下一个，有可能有多个 //找到所有class=item-3的元素，然后筛选出第一个li，加上蓝色的边 $('.item-2').next(':first').css('border', '1px solid blue') // 因为经过筛选了的，就只有一个！

查看全部

0 采集收起来源：jQuery遍历之next()方法
2018-03-22
慕粉3289534

.parents()和.closest()的比较： 1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素 2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合 3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象例： $(".item-1").closest(".level-2").css("border","1px solid red");

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2018-03-22
慕粉3289534

注意事项： 1. parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找 2. $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。 console.log($("item-b").parents()); /* context:document length:0 prevObject:[prevObject: init(1), context: document, selector: "item-b"] __proto__:Object(0) */ $("item-b").parents().css("border","1px solid red"); $('.item-b').parents('.first-div').css('border', '2px solid blue')

查看全部

0 采集收起来源：jQuery遍历之parents()方法
2018-03-22
慕粉3289534

.find()方法要注意的知识点： 1. find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。 2. 与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。 3. find只在后代中遍历，不包括自己。 4. 选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

查看全部

0 采集收起来源：jQuery遍历之find()方法
2017-09-26
慕粉3289534

jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素 .children()方法选择性地接受同一类型选择器表达式例： $('.div').children(':last').css('border', '3px solid blue') $(".div").children().css("border","1px solid red");

查看全部

0 采集收起来源：jQuery遍历之children()方法
2018-03-22

首页上一页 104 105 106 107 108 109 110 下一页尾页

0/150

提交

取消

开始学习

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

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