慕课网

jQuery基础(二)—DOM篇

最热最新

慕粉3289534

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构例： <div>p元素</div> <div>p元素</div> $('div').wrapInner('<p></p>') ---> <div> <p>p元素</p> </div> <div> <p>p元素</p> </div> //------------ $('div').wrapInner(function() { return '<p></p>'; }) 注意：当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。

查看全部

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

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法 // 给所有p元素增加一个div包裹 // $('p').wrapAll('<div></div>') $('p').wrapAll(function() { return '<div><div/>'; }) 注意： .wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

查看全部

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

我们可以通过wrap方法给选中元素增加一个(包裹的)父元素。 jQuery提供了一个unwrap()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。 $(".aaron1").on('click', function() { //找到所有p元素，删除父容器div $('p').unwrap('<div></div>') })

查看全部

0 采集收起来源：DOM包裹unwrap()方法
2018-03-22
慕粉3289534

clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了 //clone处理一 $("div").clone() //只克隆了结构，事件丢失 //clone处理二 $("div").clone(true) //结构、事件与数据都克隆 //只克隆节点，不克隆事件 $(".aaron1").on('click', function() { $(".left").append( $(this).clone().css('color','red') )// 拷贝的那个没有click这个事件 }) //克隆节点，克隆事件 $(".aaron2").on('click', function() { console.log(1) $(".left").append( $(this).clone(true).css('color','blue') ) // 拷贝的那个有click这个事件 })

查看全部

0 采集收起来源：DOM拷贝clone()
2018-03-22
慕的地9392558

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

查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2017-09-26
慕粉3289534

detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象 jquery官方文档的解释: 1. 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。 2. 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。 p = $("p").detach() $("body").append(p);

查看全部

0 采集收起来源：DOM节点删除之保留数据的删除操作detach()
2018-03-22
慕粉3289534

1. 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点 2. remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。 3. 绑了多少事件，不用的时候一定要记得销毁 4. 提供传递一个筛选的表达式，删除指定合集中的元素 $("p").filter(":contains('3')").remove() $("p").remove(":contains('3')")

查看全部

0 采集收起来源：DOM节点删除之remove()的有参用法和无参用法
2018-03-22
慕粉3289534

// $('<p >测试insertBefore方法增加</p>', '<p >多参数</p>').insertBefore($(".test1")) $(".test1").before($('<p >测试insertBefore方法增加</p>', '<p >多参数</p>')); //$('<p >测试insertAfter方法增加</p>', '<p >多参数</p>').insertAfter($(".test2")) $(".test2").after($('<p >测试insertAfter方法增加</p>', '<p >多参数</p>'));

查看全部

0 采集收起来源：DOM外部插入insertAfter()与insertBefore()
2018-03-22
慕粉3289534

注意点： 1. after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入 2. before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入

查看全部

0 采集收起来源：DOM外部插入after()与before()
2017-09-25
锅里的鲸鱼

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

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2017-09-25
锅里的鲸鱼

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

查看全部

0 采集收起来源：DOM创建节点及节点属性
2017-09-25
网页海

jq链接不对，应该是这个http://libs.baidu.com/jquery/1.9.1/jquery.js

查看全部

0 采集收起来源：DOM节点删除之保留数据的删除操作detach()
2017-09-25
swaggerUI

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

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2017-09-25
M阿

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

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2017-09-24
qq_逐梦令_1

<body> <h2>通过clone克隆元素</h2> <div class="left"> <div class="aaron1">点击,clone浅拷贝</div> <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div> </div> <script type="text/javascript"> //只克隆节点 //不克隆事件 $(".aaron1").on('click', function() { $(".left").append( $(this).clone().css('color','red') ) }) </script> <script type="text/javascript"> //克隆节点 //克隆事件 $(".aaron2").on('click', function() { console.log(1) $(".left").append( $(this).clone(true).css('color','blue') ) }) </script> </body>

查看全部

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

首页上一页 105 106 107 108 109 110 111 下一页尾页

0/150

提交

取消

开始学习

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

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