慕课网

Zhq9695

DOM节点删除之remove()的有参用法和无参用法 $('div').remove() // 删除所有的子元素包括自身 $('div').remove('a') // 删除所有div下的子元素中的a $('div').filter('a').remove() // 删除div下的所有子元素但是过滤掉了a，没有删除a

查看全部

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

2017-03-14

Zhq9695

DOM节点删除之empty()的基本用法 $('div').empty() // 清空其中的所有的子节点，不清除自己

查看全部

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

2017-03-14

Zhq9695

DOM外部插入insertAfter()与insertBefore() $().insertBefore(content) // 将匹配元素插入到content前面 $().insertAfter(content) // 将匹配元素插入到content后面 .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面 before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

查看全部

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

2017-03-14

Zhq9695

DOM内部插入prepend()与prependTo() $().prepend(content) // 向匹配元素中插入子元素，但是是前置的子元素，放在第一个的子元素 $().prependTo(content) // 与上面相反 append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中

查看全部

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

2017-03-14

Zhq9695

DOM外部插入after()与before() $().after(content) // 在匹配元素后面插入兄弟节点 $().before(content) // 在匹配元素前面插入兄弟节点

查看全部

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

2017-03-14

Zhq9695

DOM内部插入append()与appendTo() $().append(content) // 前面是被插入的对象，后面是要在对象内插入的元素内容 $().appendTo(content) // 前面是要插入的元素内容，而后面是被插入的对象

查看全部

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

2017-03-14

Zhq9695

jQuery节点创建与属性的处理 $("<div></div>") $("<div>我是文本节点</div>") $("<div id='test' class='aaron'>我是文本节点</div>") $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

查看全部

0 采集收起来源：jQuery节点创建与属性的处理

2018-03-22

蜗壳24T

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

蜗壳24T

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

蜗壳24T

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

蜗壳24T

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是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

查看全部

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

2018-03-22

蜗壳24T

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

蜗壳24T

jQuery遍历之parents()方法 jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点理解节点查找关系： <div class="div"> <ul class="son"> <li class="grandson">1</li> </ul> </div> 在li节点上找到祖辈元素div，这里可以用$("li").parents()方法 parents()无参数 parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象; 返回的元素秩序是从离他们最近的父级元素开始的注意：jQuery是一个合集对象，所以通过parent是匹配合集中所有元素的祖辈元素 parents()方法选择性地接受同一型选择器表达式同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式注意事项： 1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找 2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

查看全部

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

2018-03-22

蜗壳24T

jQuery遍历之parent()方法 jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法因为是父元素，这个方法只会向上查找一级理解节点查找关系： <div class="div"> <ul class="son"> <li class="grandson">1</li> </ul> </div> 查找ul的父元素div, $(ul).parent()，就是这样简单的表达 parent()无参数 parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象注意：jQuery是一个合集对象，所以通过parent是匹配合集中每一个元素的父元素 parent()方法选择性地接受同一型选择器表达式同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

查看全部

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

2018-03-22

蜗壳24T

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

查看全部

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

2018-03-22

jQuery基础(二)—DOM篇