为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
jQuery基础(二)—DOM篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • $('.div').children(':last').css('border', '3px solid blue'); $('.div ul:last').css('border','3px solid blue'); 两者运行结果一致
    查看全部
  • .wrapInner( wrappingElement ):给集合中匹配的元素的内部,增加包裹的HTML结构 <div>p元素</div> <div>p元素</div> 给所有元素增加一个p包裹 $('div').wrapInner('<p></p>') 最后的结构,匹配的di元素的内部元素被p给包裹了 <div> <p>p元素</p> </div> <div> <p>p元素</p> </div>
    查看全部
  • $('a').wrapAll(function() { return '<div></div>' }) JQuery2.0以下版本:通过wrapAll的回调方法给每个a元素增加父容器div JQuery2.0以上版本:通过wrapAll的回调方法给所有a元素增加同一个父容器div
    查看全部
  • $("p").wrap("<div></div>")是给每个p元素都增加一个父元素 $("p").wrapAll("<div></div>")是给所有p元素增加同一个父元素
    查看全部
  • unwarp()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。 这个方法不接受任何参数
    查看全部
  • wrap方法是给元素增加一个父元素: $("#btn1").on('click',function () { $("p").wrap("<div></div>") }); $("#btn2").on('click',function () { $("a").wrap(function () { return "<div class='"+$(this).text()+"'></div>"; }) }) .wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以 嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。
    查看全部
  • $("#btn1").on('click',function () { ($(".left div:first p:eq(0)").replaceWith("<a style='color: red'>replaceWith修改第一段后的结果</a>")).css('color','blue'); }); //显示结果是red,而不是blue,因为设置blue的对象是替换前的元素。 $("#btn2").on('click',function () { ($("<a style='color:red;'>replaceAll修改第六段之后的结果</a>").replaceAll(".left div:last p:eq(2)")).css('color','blue'); }) //显示替换结果是blue.
    查看全部
  • .replaceWith( newContent ):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合 .replaceAll( target ) :用集合的匹配元素替换每个目标元素 replaceAll()函数的返回值为jQuery类型,返回表示替换内容的jQuery对象。 与被替换掉的节点关联的所有数据和事件处理器也将同时被移除。 replaceWith()函数的返回值为jQuery类型,返回当前jQuery对象本身(虽然其匹配的元素已从文档中被移除)。 与被替换掉的节点关联的所有数据和事件处理器也将同时被移除。 .replaceWith()方法 (original)原始jQuery对象被返回。该对象指向已经从 DOM 中被移除的对象,而不是指向已经取代了它的新元素。 所以: a.replaceAll(b) 返回值是对象,是a 而 a.replaceWith(b) 返回值是对象,是a
    查看全部
  • clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如右边代码我 $(this).clone().css('color','red') 增加了一个颜色 通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上 clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据 元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个
    查看全部
    0 采集 收起 来源:DOM拷贝clone()

    2017-03-31

  • add()与append()不一样,add()是指在JQuery对象集合中增加一个对象,而append()是在DOM集合中增加一个节点。add()不会直接影响界面,append()会对界面产生影响。 $("div").add("<p>123</p>").appendTo(目标) // 查找所有div和新建的一个p标签,插入到目标位置,改变了原来的结构,移动了位置
    查看全部
  • 1 .parents()返回所有的祖先元素;parent()返回父亲元素 2 $( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合。 3 $('.item-b').parents('.first-div’)返回祖先元素中 class = “first-div” 的元素
    查看全部
  • $('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div $('div , li')才是找所有的div和li,之间不存在父子关系 $('div li') 是找div里面所有li,包括子级,孙子级,总之就是div里面所有li,不管有几层关系
    查看全部
  • wrap是针对单个dom元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加一个父元素,针对这样的处理,JQuery提供了一个wrapAll方法 .wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹HTML结构 简单的看一段代码: <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()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。
    查看全部
  • 我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反,如果删除选中元素的父元素要如何处理 ? jQuery提供了一个unwarp()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。 看一段简单案例: <div> <p>p元素</p> </div> 我要删除这段代码中的div,一般常规的方法会直接通过remove或者empty方法 $('div').remove(); 但是如果我还要保留内部元素p,这样就意味着需要多做很多处理,步骤相对要麻烦很多,为了更便捷,jQuery提供了unwarp方法很方便的处理了这个问题 $('p').unwarp(); 找到p元素,然后调用unwarp方法,这样只会删除父辈div元素了 结果: <p>p元素</p> 这个方法比较简单,也不接受任何参数
    查看全部
  • 如果要将元素用其他元素包裹起来,也就是给它增加一个父元素,针对这样的处理,JQuery提供了一个wrap方法 .wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构 简单的看一段代码: <p>p元素</p> 给p元素增加一个div包裹 $('p').wrap('<div></div>') 最后的结构,p元素增加了一个父div的结构 <div> <p>p元素</p> </div> .wrap( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象 使用后的效果与直接传递参数是一样,只不过可以把代码写在函数体内部,写法不同而已 以第一个案例为例: $('p').wrap(function() { return '<div></div>'; //与第一种类似,只是写法不一样 }) 注意: .wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。
    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的语法 2、jQuery节点操作
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!