慕课网

jQuery基础(二)—DOM篇

最热最新

Amoureux_3

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。 appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。简单的总结就是： .append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同 append()前面是被插入的对象，后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容，而后面是被插入的对象

查看全部

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

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

查看全部

0 采集收起来源：DOM创建节点及节点属性
2017-12-07
qq_骑着蜗牛上高速_1

next()同父下下一个 prev（）上一个 closest 向上找父辈或祖辈 siblings 同辈除去（自身）以外所有 add （）添加 $('li').add('p') //选择所有li给里面都添加p元素

查看全部

0 采集收起来源：jQuery遍历之next()方法
2017-12-05
少年啊QAQ3832987

这节： .wrapInner 加个儿子之前的： .detach() 隐身 .remove 自杀 .empty 身体被掏空 .clone 复制（true全复制 false 浅复制，无事件） .replaceWith 删除并替换节点（结合.replaceAll()来记） .wrap 每个人加个爸爸 .unwrap 爸爸没了 .wrapAll 所有人加个爸爸 .wrapAll（function）每个人加个爸爸

查看全部

0 采集收起来源：DOM包裹wrapInner()方法
2017-12-04
少年啊QAQ3832987

元素节点$("<div></div>") 文本节点$("<div>我是文本节点</div>") 属性节点$("<div id='test' class='aaron'>我是文本节点</div>")

查看全部

0 采集收起来源：jQuery节点创建与属性的处理
2018-03-22
dabear

元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个在本例中修改前半段代码如下: <script type="text/javascript"> var p; //只克隆节点 //不克隆事件 $(".aaron1").on('click', function() { $(this).data('a',{a: 'no'}); $p = $(this).clone(true); console.log("深度克隆后, 未修改data前"); console.log($(this).data()); console.log($p.data()); $p.data('a', {a: 'yes'});//断点 console.log("深度克隆后, 修改$p.data()后"); console.log($(this).data()); console.log($p.data()); $(".left").append( $p.css('color','red') ) }) </script> 发现元素数据的data(通过jquery设置的), 即使是对象, 也是被深复制, 并没有被共享不知道是不是哪里有问题, 还是理解有出入?

查看全部

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

$("li").each(function(index, element) { if (index % 2) { $(this).css('color','blue') return false; } }) 只会改变第一个偶数, 即第二个li元素的字体颜色, 跳出each循环, 不再执行回调函数

查看全部

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

.closest(),首先从本身开始向上匹配，若匹配到符合要求的第一个，即停止匹配。 .parents（），从元素父级一直向上匹配，找出所有匹配的符合要求元素。

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2017-12-03
方小超

prepend():将指定元素插入到匹配元素中，作为它的第一个子元素。

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2017-12-03
dabear

find()相当于后代选择器 CSS中的写法就是一个空格, 如 selector1 selector2{样式} children相当于子选择器 CSS中的写法是一个“>”, 如 selector1 > selector2{样式} 另外注意jquery中:last和:last-child的区别 :last 会把所有匹配元素作为一个整体, 从而匹配唯一一个最后一个元素(只有一个) :last-child 会基于所有匹配元素中的父元素, 每一个父容器下匹配一个最后一个子元素(可能多个, 根据父容器个数)

查看全部

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

.children()方法选择性地接受同一类型选择器表达式 $("div").children(".selected") 同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式不懂...

查看全部

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

如果wrap/wrapAll的参数最内层有多个元素, 如<div><span></span><span></span></div> 则会有如下输出: <div> <span><p></p></span> <span></span> </div>

查看全部

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

引用评论里一位同学的话来做笔记 1.$('p').wrap('<div>')。。 2.$('p').wrap('<div/>')。。 3.$('p').wrap('<div></div>')。。以上三种写法都可以。但若写成$('p').wrap('div')，它就会将你文档中的第一个div元素（也就是那个.left）作为包裹元素。。。。。

查看全部

0 采集收起来源：DOM包裹wrap()方法
2018-03-22
青葱年少时丶

DOM替换replaceWith()和replaceAll() .replaceWith(newContent):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。简单来说:用$()选择节点A，调用replaceWith方法，传入一个新的内容B(HTML字符串，DOM 元素，或者jQuery对象)用来替换选中的节点A 看个简单的例子:一段HTML代码 <div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div> 替换第二段内容: $("p:eq(1)").replaceWith('<a >替换第二段内容</a>') 通过jQuery筛选出第二个p元素，调用replaceWith进行替换，结果如下: <div> <p>第一段</p> <a >替换的第二段内容</a> <p>第三段</p> </div> .replaceAll(target):用集合的匹配元素替换每一个目标元素 .replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理 $('<a >替换第二段的内容</a>').replaceAll('p:eq(1)') 总结 1. .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别 2. .replaceWith()与.replaceAll()方法会删除与节点相关联的所有数据和事件处理程序 3. .replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用。 4. replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

查看全部

0 采集收起来源：DOM替换replaceWith()和replaceAll()
2018-03-22
青葱年少时丶

DOM拷贝节点clone() 克隆节点是DOM的常见操作，jQuery提供了一个clone方法，专门用于处理dom的克隆 .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 .clone()方法比较简单，就是克隆节点，但是需要注意，如果节点有事件或者数据处理之类的其他处理，我们需要通过clone(ture)传递一个布尔值true用来指定。这样不仅仅只是克隆单纯的节点结构，还要把附带事件与数据结构一并克隆了。例如: HTML部分 <div></div> javasrcipt部分 $("div").on('click',function(){//执行操作}) //clone处理一 $("div").clone() //只克隆了结构，事件丢失 //clone处理二 $("div").clone(true) //结构事件与数据都克隆使用上流失这么简单，使用克隆的我们需要额外知道的细节: 1. clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码$(this).clone().css('color','red')增加了一个颜色 2. 通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上 3. clone()方法时jQuery扩展的，只能处理通过jQuery绑定的事件或数据 4. 元素数据(data)内对象和数据不会被复制，将继续被克隆元素和原始元素共享。深度复制的所有数据，需要手动复制每一个

查看全部

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

首页上一页 92 93 94 95 96 97 98 下一页尾页

0/150

提交

取消

开始学习

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

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