慕课网

jQuery基础(二)—DOM篇

最热最新

阿衰丶

$('p').unwarp(); 找到p元素，然后调用unwarp方法，这样只会删除父辈div元素了

查看全部

0 采集收起来源：DOM包裹unwrap()方法
2016-08-23
viviier

soga 这里的index % 2 是因为外面已经写好了从1开始到6 那么通过each索引的时候index是从0开始所以通过判断index%2 如果为0 那么if就是假的就不做任何操作那么这里的4刚好对应index的3 3%2为1 所以就进行了操作那么2和6同理

查看全部

0 采集收起来源：jQuery遍历之each()
2016-08-23
viviier

$("button:first").click(function() { //遍历所有的li //修改每个li内的字体颜色 $("li").each(function(index, element) { $(this).css('color','red') }) }) $("button:last").click(function() {<br> //遍历所有的li<br> //修改偶数li内的字体颜色<br> $("li").each(function(index, element) {<br> if (index % 2) {<br> $(this).css('color','blue')<br> }<br> })<br> })

查看全部

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

看一个简单的案例 <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
viviier

这里的一波小复习 elm.append(argument) 是把arg添加到elm里面去 elm.appendTo(arg) 是把elm添加到arg里面去

查看全部

0 采集收起来源：jQuery遍历之add()方法
2016-08-23
viviier

siblings() 不加参数是匹配elm的前后兄弟元素加了参数 //找到class=item-2的所有兄弟节点 //然后筛选出最后一个，加上蓝色的边 $('.item-2').siblings(':last').css('border', '2px solid blue') 这里是通过siblings找到了.item-2的所有前后兄弟元素然后成为了一个合集所以这里的:last找到的元素就是合集里面最后的一个元素也就是.item-3

查看全部

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

//找到所有class=item-2的li //然后给每个li,然后筛选出第一个，加上蓝色的边 $('.item-3').prev(':last').css('border', '1px solid blue') prev()和next()是同理的一个是向上查找一个是向下查找

查看全部

0 采集收起来源：jQuery遍历之prev()方法
2016-08-23
viviier

//找到所有class=item-3的li<br> //然后给每个li,然后筛选出第一个，加上蓝色的边<br> $('.item-2').next(':first').css('border', '1px solid blue')<br> <br> 找到所有的li（.item-2的兄弟元素）成为一个集合（全局li），然后通过:first选择到第一个li **注意这里的所有的li 是.item-2的next的兄弟元素的一个集合也就是这个集合里面是每一个div里的.item-3 那么这里的:first也就是集合里面的第一个.item-3

查看全部

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

注意：jQuery是一个合集对象，所以通过next是匹配合集中每一给元素的下一个兄弟元素

查看全部

0 采集收起来源：jQuery遍历之next()方法
2016-08-23
viviier

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了起始位置不同：.closest开始于当前元素 .parents开始于父元素遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

查看全部

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

向下查找用find() 向上查找用parents() 向下一格用children() 向上一格用parent()

查看全部

0 采集收起来源：jQuery遍历之parents()方法
2016-08-23
viviier

.find()和.children()方法是相似的 1.children只查找第一级的子节点 2.find查找范围包括子节点的所有后代节点

查看全部

0 采集收起来源：jQuery遍历之find()方法
2016-08-23
viviier

//找到所有class=div的元素 //找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色 $('.div').children(':last').css('border', '3px solid blue')

查看全部

0 采集收起来源：jQuery遍历之children()方法
2016-08-23
viviier

<p>p元素</p> <p>p元素</p> 给所有p元素增加一个div包裹 $('p').wrapInner('<div></div>') 最后的结构，匹配的p元素的内部元素被div给包裹了 <p> <div>p元素</div> </p> <p> <div>p元素</div> </p> .wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容以上面案例为例， $('p').wrapInner(function() { return '<div><div/>'; }) 以上的写法的结果如下，等同于第一种处理了 <div> <p>p元素</p> </div> <div> <p>p元素</p> </div> wrapInner() 直接调用是包裹elm的内部元素通过函数调用是包裹elm

查看全部

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

简单的看一段代码： <p>p元素</p> <p>p元素</p> 给所有p元素增加一个div包裹 $('p').wrapAll('<div></div>') 最后的结构，2个P元素都增加了一个父div的结构 <div> <p>p元素</p> <p>p元素</p> </div> .wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象通过回调的方式可以单独处理每一个元素以上面案例为例， $('p').wrapAll(function() { return '<div><div/>'; }) 以上的写法的结果如下，等同于warp的处理了 <div> <p>p元素</p> </div> <div> <p>p元素</p> </div> wrapAll() 直接调用是为所有的某个元素同时增加一个父容器通过函数回调则是为每一个某个元素都增加一个父容器

查看全部

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

首页上一页 338 339 340 341 342 343 344 下一页尾页

0/150

提交

取消

开始学习

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

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