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

 更新时间:2013年03月04日 14:12:50   转载 作者:  
jQuery:节点(插入,复制,替换,删除)操作,需要的朋友可以参考一下

复制代码 代码如下:

<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>

相关文章

  • Notify - 基于jquery的消息通知插件

    Notify - 基于jquery的消息通知插件

    Notify - 基于jquery的消息通知插件,需要的朋友可以收藏下。
    2011-10-10
  • jQuery网页定位导航特效实现方法

    jQuery网页定位导航特效实现方法

    这篇文章主要介绍了jQuery网页定位导航特效实现方法,结合实例形式分析了jQuery网页定位导航的功能描述、原理与核心实现代码,需要的朋友可以参考下
    2016-12-12
  • jQuery多级手风琴菜单实例讲解

    jQuery多级手风琴菜单实例讲解

    这篇文章主要介绍了jQuery实现多级手风琴菜单,菜单效果更有特色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-10-10
  • jquery图片轮播特效代码分享

    jquery图片轮播特效代码分享

    这篇文章主要为大家详细介绍了jquery简单图片轮播特效,图片轮播效果特别适合做产品展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-09-09
  • 基于jQuery实现的仿百度首页滑动选项卡效果代码

    基于jQuery实现的仿百度首页滑动选项卡效果代码

    这篇文章主要介绍了基于jQuery实现的仿百度首页滑动选项卡效果代码,涉及jQuery响应鼠标事件实现页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Jquery+Ajax+PHP+MySQL实现分类列表管理(下)

    Jquery+Ajax+PHP+MySQL实现分类列表管理(下)

    本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理,如何利用Ajax和Json技术让用户操作起来觉得更轻松,感兴趣的小伙伴们可以参考一下
    2015-10-10
  • CSS3 media queries结合jQuery实现响应式导航

    CSS3 media queries结合jQuery实现响应式导航

    这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 基于jQuery Ajax实现下拉框无刷新联动

    基于jQuery Ajax实现下拉框无刷新联动

    这篇文章主要为大家详细介绍了基于jQuery Ajax实现下拉框无刷新联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 扩展jquery实现客户端表格的分页、排序功能代码

    扩展jquery实现客户端表格的分页、排序功能代码

    下面链接中是我用jQuery的扩展来实现的表格分页和排序,使用这个扩展必须加上表头<thead>和<tbody>标签,因为我是 通过<tbody>来进行分页的,要是不加thead,那么表头也要作为分页计算时的一个行了。
    2011-03-03
  • jQuery移除或禁用html元素点击事件常用方法小结

    jQuery移除或禁用html元素点击事件常用方法小结

    这篇文章主要介绍了jQuery移除或禁用html元素点击事件常用方法,结合实例形式总结分析了jQuery针对onclick事件的禁用与屏蔽技巧,需要的朋友可以参考下
    2017-02-02

最新评论