慕课网

jQuery基础(二)—DOM篇

最热最新

慕村3583298

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同 append()前面是被插入的对象，后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容，而后面是被插入的对象

查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2017-08-22
慕村3583298

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

查看全部

0 采集收起来源：DOM创建节点及节点属性
2017-08-22
soulshinee

这节： .wrap 每个人加个爸爸之前的： .append 最后面加个兄弟 (结合appendTo()来记) .prepend 最前面加个兄弟(prependTo()来记) .before 我的前面加个兄弟(结合insertBefore来记) .after我的后面加个兄弟(结合insertAfter()来记) .detach() 隐身 .remove 自杀 .empty 身体被掏空 .clone 复制（true全复制 false 浅复制，无事件） .replaceWith 删除并替换节点（结合.replaceAll()来记）

查看全部

0 采集收起来源：DOM包裹wrap()方法
2017-08-22
想在天空飞翔的鱼

HTML部分 <div></div> JavaScript部分 $("div").on('click', function() {//执行操作}) //clone处理一 $("div").clone() //只克隆了结构，事件丢失 //clone处理二 $("div").clone(true) //结构、事件与数据都克隆

查看全部

0 采集收起来源：DOM拷贝clone()
2018-03-22
慕粉1256115079

jQuery遍历之each() jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each .each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数例如： button>点击：each方法遍历元素</button> <button>点击：each方法回调判断</button> <script type="text/javascript"> $("button:first").click(function() { //遍历所有的li //修改每个li内的字体颜色 $("li").each(function(index, element) { $(this).css('color','red') }) }) </script> <script type="text/javascript"> $("button:last").click(function() { //遍历所有的li //修改偶数li内的字体颜色 $("li").each(function(index, element) { if (index % 2) { $(this).css('color','blue') } }) }) </script>

查看全部

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

jQuery遍历之add()方法 jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象，元素添加到匹配的元素集合中 .add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。例如： <button>点击：add传递元素标签</button> <button>点击：add传递html结构</button> <script type="text/javascript"> $("button:first").click(function() { //把p元素添加到li的合集中 $('li').add('p').css('background', 'red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //把html结构'<p>新的p元素</p>' //加入到li的合集中，为了能够在页面上显示 //需要再重新appendTo到指定的节点处 //值得注意：整个结构位置都改变了 $('li').add('<p>新的p元素</p>').appendTo($('.right')) }) </script>

查看全部

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

jQuery遍历之siblings() jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法，本身元素不改变，同辈元素作css变化。例如： <button>点击：siblingsv无参数</button> <button>点击：siblings传递选择器</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-2').siblings().css('border', '2px solid red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到class=item-2的所有兄弟节点 //然后筛选出最后一个，加上蓝色的边 $('.item-2').siblings(':last').css('border', '2px solid blue') }) </script>

查看全部

0 采集收起来源：jQuery遍历之siblings()
2018-03-22
慕粉1256115079

jQuery遍历之prev()方法 jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法例如： <button>点击：prev无参数</button> <button>点击：prev传递选择器</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-2').prev().css('border', '1px solid red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有class=item-2的li //然后筛选出最后一个，加上蓝色的边 $('.item-3').prev(':last').css('border', '1px solid blue') }) </script>

查看全部

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

jQuery遍历之next()方法 jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法例如： <body> <h2>next方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <button>点击：next无参数</button> <button>点击：next传递表达式</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-1').next().css('border', '1px solid red') }) </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
慕粉1256115079

jQuery遍历之closest()方法查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法 closest()方法接受一个匹配元素的选择器字符串从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素例如： <body> <h2>closest方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </div> </div> <br/> <button>点击：closest传递选择器 </button> <button>点击：closest传递一个元素对象</button> <script type="text/javascript"> $("button:first").click(function() { $('li.item-1') .closest('.level-2') .css('border', '1px solid red') }) </script>

查看全部

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

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()方法注意事项： 1）.parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找 2）$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

查看全部

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

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
ModelM

romove()将选择的元素从文档中全部清除 empty() 将选择的元素的所有后代元素都删除，保留本身

查看全部

0 采集收起来源：DOM节点删除之empty和remove区别
2017-08-20
ModelM

append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2017-08-20
ModelM

$(a).append(b) 把b添加到a中 $(a).appendTo(b) 把a添加到b中

查看全部

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

首页上一页 118 119 120 121 122 123 124 下一页尾页

0/150

提交

取消

开始学习

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

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