美文网首页
jQuery学习笔记2

jQuery学习笔记2

作者: a0d560da7818 | 来源:发表于2015-10-29 15:07 被阅读34次

2015年10月23日

删除节点

jquery提供了3种删除节点的方法,即remove( ),detach( )和empty( )。
1.remove( )方法
作用:从DOM中删除所有匹配的元素,传入的参数根据jquery表达式来筛选元素。
例如删除<ul>节点的第二个<li>元素节点,示例:

$("ul li:eq(1)").remove( );

当某个节点用remove( )删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。示例:

var $li = $("ul li:eq(1)").remove( );
$li.appendTo("ul");

remove( )方法也可以通过传递参数来选择性的删除元素,示例:

$("ul li").remove("li[title!=菠萝]");

2.detach()方法
detach()方法和remove()方法一样,也是从DOM中去掉匹配的元素。但是,detach()方法不会把匹配的元素从jquery对象中删除,因而将来可以再使用这些匹配的元素。与remove( )不同的是,所有绑定的时间、附加的数据等都会保留下来。

3.empty()方法
严格来讲,empty()并不是删除节点,而是清空节点,他能清空元素中所有后代节点

复制节点

复制节点使用clone( )方法来完成
复制节点后,被复制的新元素不具有任何行为。如果需要新元素也具有复制功能,可以

clone(true)

在clone()中传递了一个true参数,他的含义是复制元素的同时复制元素中绑定的事件。

替换节点

replaceWith( )和replaAll( )

replaceWith( )方法是将所有匹配的元素都替换成指定的HTML或DOM元素。
示例:

$("p").replaceWith("<strong>您好</strong>");

replaceAll( )方法的作用只是颠倒了replaceWith( ),示例:

("<strong>您好</strong>").replaceAll("p");

两者的效果都一样。

2015年10月26日 周一

包裹节点

如果要将某个节点用其他标记包裹起来,使用wrap( )。改方法对于需要在文档中插入额外的结构化标记非常有用。
示例:

$("strong").wrap("<b></b>"); //用<b>标签把<strong>元素包裹起来

得到的结果如下:

<b><strong>您好</strong></b>

包裹节点还有其他两个方法,即wrapAll( )

相关文章

  • Struts2学习笔记(核心组件详解)

    [toc] Struts2学习笔记(核心组件详解) @(_1每日记录) 返回到JQuery学习笔记@达内lang笔...

  • 【转】JQuery全面总结

    1、jquery学习总结(超级详细) 转自脚本之家hebedich的投稿 2、jQuery笔记总结篇 转自Poet...

  • jQuery学习笔记2

    2015年10月23日 删除节点 jquery提供了3种删除节点的方法,即remove( ),detach( )和...

  • JQuery零基础语法速学

    JQuery学习笔记 1.认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼...

  • Freecodecamp 学习笔记2 jquery

    以下内容会有复制粘贴的,因为我觉的FCC讲解的很详细,并不需要我画蛇添足。 1.首先在页面顶端增加一行script...

  • jQuery源码学习笔记(2)

    正则篇 一、参考资料来源: 正则工具:https://www.debuggex.com/ 正则教程:http://...

  • 跟我一起学jQuery——第一集

    《锋利的JQuery》第二版阅读笔记-第一章 jQuery对象和DOM对象 想学习jQuery,首先要学会区分jQ...

  • jQuery笔记2

    DOM操作之 属性与样式在上一篇jQuery笔记1中把DOM元素节点的常用操作都介绍了一遍, 这一篇笔记仍是有关j...

  • JQuery学习笔记

    JQuery是一个js语言的框架,作用是简化js代码 JQuery优势 简化js代码 可以向css一样通过选择器查...

  • JQuery学习笔记

    写在前面2018-9-11 00:35很久没有学习新知识了,最近几天的毕业季,校招社招面试题真的带给我很大的冲击。...

网友评论

      本文标题:jQuery学习笔记2

      本文链接:https://www.haomeiwen.com/subject/sdwthttx.html