`
lichengyezi
  • 浏览: 205391 次
  • 性别: Icon_minigender_1
  • 来自: 齐齐哈尔
文章分类
社区版块
存档分类
最新评论

jQuery插入,复制、替换和删除节点

阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>jQuery插入,复制、替换和删除节点</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
     //几种添加节点的方法
    //$("p").append("<b>你好吗?</b>");//向p元素中追加《b》
    //$("<b>你好吗?</b>").appendTo("p");//将《b》追加到p元素中
    //$("p").prepend("<b>你好吗?</b>");//向p中前置《b》
    //$("<b>你好吗?</b>").prependTo("p");//将《b》前置到p元素中
    //$("p").after("<b>你好吗?</b>");//向p元素后插入《b》
    //$("<b>你好吗?</b>").insertAfter("p");//将《b》插入到p元素后边
    //$("p").before("<b>你好吗?</b>");//在p元素之前添加《b》
    //$("<b>你好吗?</b>").insertBefore("p");//将《b》插入到p元素前面
  
  
      //几种删除节点的方法
    //var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点
    //$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去
    //$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除
    //$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容
  
    //复制节点
   /* $("ul li").click(function(){
     $(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件
  
    });
    */
    //替换节点
   // $("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>");
  
  
  
   });
</script>
</head>
<body>
   <p>你好!</p>
   你最喜欢的水果是?
   <ul>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
    </ul>
</body>
</html>
分享到:
评论

相关推荐

    Jquery节点插入、复制和替换方法

    ### Jquery节点插入、复制和替换方法 #### 一、插入 在JQuery中,提供了多种方式来插入新的DOM节点,这些方法可以帮助开发者更灵活地操作网页结构。 ##### 内部插入节点 内部插入指的是在目标元素内部进行新节点...

    jQuery插入节点1

    在本文中,我们将详细介绍 jQuery 中的插入节点方法,包括创建节点、插入节点、删除节点、克隆节点、替换节点和包裹节点等。 创建节点 在 jQuery 中,可以使用工厂函数 `$()` 来创建节点。例如,`$("&lt;p&gt;")` 将创建...

    jQuery:节点(插入,复制,替换,删除)操作

    代码如下:&lt;... &lt;head&gt; &lt;...jQuery插入,复制、替换和删除节点&lt;/title&gt; [removed][removed] [removed] $(document).ready(function(){ //几种添加节点的方法 //$(“p”).append(“你好吗

    jquery复制节点

    首先,jQuery提供了`.clone()`方法来复制DOM节点。这个方法可以用于复制一个或多个元素,并保留其所有的属性和事件绑定。例如,如果你有一个DOM元素`$("#myElement")`,你可以这样复制它: ```javascript var ...

    JQ 插入节点和移动节点

    在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,极大地简化了DOM操作,包括插入和移动节点。本文将深入探讨JQ如何帮助我们高效地处理这些任务。 首先,让我们理解DOM(Document Object Model)的基本...

    jQuery替换节点元素的操作方法

    超实用的jquery代码段-jquery插入节点元素的方法 您好!您最喜欢的IT公司是: &lt;li title="Google"&gt;Google &lt;li title="Apple"&gt;Apple &lt;li title="Microsoft"&gt;Microsoft &lt;table name="name-replace"&gt;&lt;/table&gt; 替换节点...

    jquery 添加节点的几种方法介绍

    代码如下: &lt;...jQuery插入,复制、替换和删除节点&lt;/title&gt; [removed][removed] [removed] $(document).ready(function(){ //几种添加节点的方法 //$(“p”).append(“你好吗?”);//向p元素中追加

    jquery插入兄弟节点的操作方法

    在jQuery库中,操作DOM(文档对象模型)节点是非常常见的任务,其中包括插入、删除和查找节点等。在本文中,我们将深入探讨如何使用jQuery来插入兄弟节点,这在构建动态和交互式的网页时非常有用。 首先,让我们...

    jquerydemo

    1. 第一个 jQuery 程序 2. jQuery 对象和 DOM 对象 3. 基本选择器 ...17. 克隆和替换节点 18. 包裹节点 19. html() 方法 & val() 方法 20. 小结2 21. CSS DOM 操作 22. 事件处理 23. 动画 24. 实验:品牌展示

    锋利的jQuery_高清_书签.part2

    3.2.6 替换节点 3.2.7 包裹节点 3.2.8 属性操作 3.2.9 样式操作 3.2.10 设置和获取HTML、文本和值 3.2.11 遍历节点 3.2.12 CSS—DOM操作 3.3 案例研究——某网站的超链接和图片提示效果 3.4 小结 第4章 jQuery中的...

    jQuery和JavaScript节点插入元素的方法对比

    本文将对比两种在Web开发中最常见的技术——jQuery和纯JavaScript(以下简称JS)的节点插入方法,并通过具体的代码示例,阐述它们之间的异同。 ### jQuery方法 jQuery是一个快速、小巧且功能丰富的JavaScript库,...

    JQuery权威指南源代码

    复制元素节点 替换元素节点 包裹元素节点 遍历元素 删除元素 数据管理 第4章 事件中的冒泡现象 bind方法绑定事件 映射方式绑定不同的事件 切换事件hover 切换事件toggle 移除事件unbind 其他事件one ...

    【推荐】高清jquery视频教程下载

    37:特殊符号 38:创建节点 39:追加节点1 40:追加节点2 41:插入节点1 42:插入节点2 43:删除节点1 44:删除节点2 45:参数删除 46:清空节点 47:克隆节点 48:替换节点1 49:替换节点2 50:包裹节点1 51:包裹节点2 52:...

    详解jQuery中的DOM操作

    这篇关于“详解jQuery中的DOM操作”的文章深入介绍了jQuery如何帮助我们查找、创建、修改、插入、删除、复制、替换和包裹DOM节点,以及处理元素的属性。 首先,jQuery提供了强大的选择器系统来查找DOM节点。例如,...

    jQuery权威指南-源代码

    3.6 替换节点/68 3.7 包裹节点/69 3.8 遍历元素/71 3.9 删除元素/73 3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果界面/75 3.10.3 功能实现/77 3.10.4 代码分析...

    jquery 插件加API chm

    3. **DOM操作(Manipulation)**:学习如何修改DOM元素,如插入、删除、替换节点。 4. **事件(Events)**:查看事件相关的绑定、触发、阻止默认行为等方法。 5. **特效(Effects)**:掌握动画方法,如淡入淡出、...

    有关jquery与DOM节点操作方法和属性记录

    - jQuery中的DOM操作方法可以帮助开发者以最小的代码量实现节点的插入、移动和删除等操作。 2. jQuery节点操作方法清单: - `A.append(B)`:把B添加到与A匹配的所有元素的现有内容的后面。如果A匹配多个元素,B会...

Global site tag (gtag.js) - Google Analytics