慕课网

jQuery基础(二)—DOM篇

最热最新

慕嘿

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法理解节点查找关系：查找ul的父元素div, $(ul).parent()，就是这样简单的表达 parent()无参数 parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象 parent()方法选择性地接受同一型选择器表达式

查看全部

0 采集收起来源：jQuery遍历之parent()方法
2016-10-23
GraceZy

遍历 each() $("").each(function(index, element) { index 索引 0,1,2,... element是当前迭代的dom对象 this 指向的是当前迭代的dom对象 return false; 提前结束循环 }); 重点： 1. each是一个for循环的包装迭代器 2. each通过回调的方式处理，并且会有2个固定的实参，索引与元素 3. each回调方法中的this指向当前迭代的dom元素

查看全部

0 采集收起来源：jQuery遍历之each()
2018-03-22
GraceZy

在已经选择的jQuery合集对象中添加指定元素(可以是已经存在的，也可以是不存在(动态创建的)) 1) add已存在的元素 -- 传递选择器/dom元素 $("").add( 选择器/dom方式获取元素 ); 将页面中所有的选择器所匹配的元素/dom方式获取的元素都添加到$()已经选择的元素集合中； 2) add不存在的元素 -- 动态创建标签 $("").add(" <p>新的p标签</p> "); 动态创建的新p标签不在页面中显示，除非使用了appendTo()/append() 缺点：改变了元素的本身的排列，例： $("").add(" <p>新的p标签</p> ").appendTo(目标位置); 原页面中的$()选中的所有节点和新创建的<p>标签一起被移动到目标位置

查看全部

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

jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）理解节点查找关系：代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。 .find()方法要注意的知识点： find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。 find只在后代中遍历，不包括自己。选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。注意重点：

查看全部

0 采集收起来源：jQuery遍历之find()方法
2018-03-22
weibo_本宫li不矫情

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

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()
2016-10-23
慕嘿

jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）理解节点查找关系：代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。 children()无参数允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象 .children()方法选择性地接受同一类型选择器表达式同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式具体的操作，请参考右边的代码

查看全部

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

.siblings() 兄弟节点可接受参数

查看全部

0 采集收起来源：jQuery遍历之siblings()
2016-10-23
GraceZy

.next() 上一个兄弟节点 .prev() 下一个兄弟节点

查看全部

0 采集收起来源：jQuery遍历之prev()方法
2016-10-23
weibo_本宫li不矫情

DOM内部插入prepend()与prependTo() .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()). .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同 <script type="text/javascript"> $("#bt1").on('click', function() { //找到class="aaron1"的div节点 //然后通过prepend在内部的首位置添加一个新的p节点 $('.aaron1') .prepend('<p>prepend增加的p元素</p>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //找到class="aaron2"的div节点 //然后通过prependTo内部的首位置添加一个新的p节点 $('<p>prependTo增加的p元素</p>') .prependTo($('.aaron2')) }) </script> 注意.prependTo 的前后都要$ $('<p>prependTo增加的p元素</p>') .prependTo($('.aaron2'))

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2018-03-22
GraceZy

.closest( 参数 ) 找到最近的匹配的祖先元素，参数：元素、jQuery对象均可 .parents() VS .closest() 相同点：都是往上遍历祖先元素不同点： 1.起始位置不同：.closest开始于当前元素 .parents开始于父元素 2.遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合 3.结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2016-10-23
GraceZy

.parent() 上一级父元素 .parents() 所有的父元素 (可传参，指定父元素) 注意： $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

查看全部

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

.children() 直接子元素

查看全部

0 采集收起来源：jQuery遍历之children()方法
2016-10-23
weibo_本宫li不矫情

DOM外部插入after()与before() ....参考代码 after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入 before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

查看全部

0 采集收起来源：DOM外部插入after()与before()
2016-10-23
GraceZy

.wrapInner( wrappingElement ) 给集合中匹配的元素的内部，增加包裹的HTML结构 .wrapInner( function ) 允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容返回值：均为jQuery对象例： p.wrapInner( '<div></div>' ); p的子节点(包括文本节点)用div包裹

查看全部

0 采集收起来源：DOM包裹wrapInner()方法
2018-03-22
白二的诗

jQuery遍历之each() 要一个一个给合集中每一个li设置颜色，这里方法就是each 所以大体上了解3个重点： each是一个for循环的包装迭代器 each通过回调的方式处理，并且会有2个固定的实参，索引与元素 each回调方法中的this指向当前迭代的dom元素看一个简单的案例 <ul> <li>慕课网</li> <li>Aaron</li> </ul> 开始迭代li，循环2次 $("li").each(function(index, element) { index 索引 0,1 element是对应的li节点 li,li this 指向的是li })

查看全部

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

首页上一页 281 282 283 284 285 286 287 下一页尾页

0/150

提交

取消

开始学习

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

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