慕课网

回首已是千年

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。

查看全部

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

2017-09-13

690017359

jQuery遍历之add()方法 jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象，元素添加到匹配的元素集合中 .add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。简单的看一个案例：操作：选择所有的li元素，之后把p元素也加入到li的合集中 <ul> <li>list item 1</li> <li>list item 3</li> </ul> <p>新的p元素</p> 处理一：传递选择器 $('li').add('p') 处理二：传递dom元素 $('li').add(document.getElementsByTagName('p')[0]) 还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

查看全部

0 采集收起来源：jQuery遍历之add()方法

2018-03-22

690017359

jQuery遍历之siblings() jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法理解节点查找关系：如下蓝色的class="item-2"的li元素，红色的节点就是它的siblings兄弟节点 <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> siblings()无参数取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合注意：jQuery是一个合集对象，所以通过siblings是匹配合集中每一个元素的同辈元素 siblings()方法选择性地接受同一类型选择器表达式同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

查看全部

0 采集收起来源：jQuery遍历之siblings()

2018-03-22

690017359

jQuery遍历之prev()方法 jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法理解节点查找关系：如下蓝色的class="item-2"的li元素，红色的节点就是它的prev兄弟节点 <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> prev()无参数取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合注意：jQuery是一个合集对象，所以通过prev是匹配合集中每一个元素的上一个兄弟元素 prev()方法选择性地接受同一类型选择器表达式同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

查看全部

0 采集收起来源：jQuery遍历之prev()方法

2018-03-22

690017359

jQuery遍历之next()方法 jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法理解节点查找关系：如下class="item-1"元素就是红色部分，那蓝色的class="item-2"就是它的兄弟元素 <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> next()无参数允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。注意：jQuery是一个合集对象，所以通过next匹配合集中每一个元素的下一个兄弟元素 next()方法选择性地接受同一类型选择器表达式同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式 <script type="text/javascript"> $("button:first").click(function() { //? $(".item-2").next().css("border","3px solid pink") }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有class=item-3的li //然后筛选出第一个li，加上蓝色的边 $('.item-2').next(':first').css('border', '1px solid blue') }) </script>

查看全部

0 采集收起来源：jQuery遍历之next()方法

2018-03-22

690017359

jQuery遍历之closest()方法以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法 closest()方法接受一个匹配元素的选择器字符串从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素例如：在div元素中，往上查找所有的li元素，可以这样表达 $("div").closet("li') 注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一个元素的祖先元素 closest()方法给定的jQuery集合或元素来过滤元素同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个jQuery的对象注意事项：在使用的时候需要特别注意下粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了起始位置不同：.closest开始于当前元素 .parents开始于父元素遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

查看全部

0 采集收起来源：jQuery遍历之closest()方法

2018-03-22

690017359

.parents()，返回的是所有祖辈元素，从最近的父级元素开始，一路向上直到根元素<html>（这是jQuery方法本身就这么定的，详细你可以去看它的源码），所以搜索到html就完了，不会再有html的祖辈（父）元素，所以$( "html" ).parents() 返回一个空集合。而.parent()则没有这样的要求，它只是在DOM树上搜索其父级元素，所以对html，搜索到其父级元素是document，所以$( "html" ).parent()方法返回一个包含document的集合。 .left div 包含（后代）选择器选中使用.left类里的div元素 alert( $( "html" ).parent()); alert( $( "html" ).parents()); alert( $( "html" ).parent().text()); alert( $( "html" ).parents().text());

查看全部

0 采集收起来源：jQuery遍历之parents()方法

2018-03-22

690017359

jQuery遍历之parent()方法 jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法因为是父元素，这个方法只会向上查找一级理解节点查找关系： <div class="div"> <ul class="son"> <li class="grandson">1</li> </ul> </div> 查找ul的父元素div, $(ul).parent()，就是这样简单的表达

查看全部

0 采集收起来源：jQuery遍历之parent()方法

2018-03-22

690017359

•find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。children是父子关系查找，find是后代关系（包含父子关系） var $spans = $('span'); 这样写是找到全局的span。然后再下一步 $("p").find($spans).css('color', 'red'); p中过滤掉 $spans 当然，直接写 $("p").find('span').css('color', 'red'); 也可以达到同样的效果不写也没关系啊 , $(),是个对象 , 里面可以是element , 也可以是选择器,或者其他的 , 不写var $spans = $('span'); 把find()改成find('span')效果是一样 2 3 4 5 第一种 span{color:blue;} 第二种 .span{color:blue;} 第一种是属性选择器，可以为拥有指定属性的 HTML 元素设置样式 [title]{ color:red; } 第二种是类选择器类选择器以一个点号显示：.center {text-align: center} 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。都是正确的为什么不是每一个li下的最后一个有效果因为是.left下的所有后代li中的最后一个如果是每一个li的话应该选.div下的最后一个li jquery选择器中两个class是什么意思？ $(".class1 .class2")这个是选择class1类下带class2类的元素还是选择所有包含class1类和class2类的元素？答案： $(".class1 .class2") 选择class1元素下class2的元素（中间有空格） $(".class1.class2") 选择同时含有class1和class2的元素（中间没有空格） $(".class1,.class2") 选择class1或者class2的元素（中间有逗号）

查看全部

0 采集收起来源：jQuery遍历之find()方法

2018-03-22

690017359

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

查看全部

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

2018-03-22

慕粉2222222

//通过empty处理 $('.hello').empty() //结果：<p>慕课网</p>被移除 <div class="hello"></div> 可以参考右边的代码区域：通过empty移除了当前div元素下的所有p元素但是本身id=test的div元素没有被删除

查看全部

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

2018-03-22

慕粉2222222

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

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()

2017-09-13

回首已是千年

注意事项： insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入； insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()

2017-09-13

回首已是千年

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

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()

2017-09-13

690017359

DOM包裹wrapInner()方法如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法 .wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构听起来有点绕，可以用个简单的例子描述下，简单的看一段代码： <div>p元素</div> <div>p元素</div> 给所有元素增加一个p包裹 $('div').wrapInner('<p></p>') 最后的结构，匹配的di元素的内部元素被p给包裹了 <div> <p>p元素</p> </div> <div> <p>p元素</p> </div> .wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容以上面案例为例， $('div').wrapInner(function() { return '<p></p>'; }) 以上的写法的结果如下，等同于第一种处理了 <div> <p>p元素</p> </div> <div> <p>p元素</p> </div> 注意：当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。

查看全部

0 采集收起来源：DOM包裹wrapInner()方法

2018-03-22

jQuery基础(二)—DOM篇