1 内部插入节点

 <body>

         <ul id="city">

             <li id="bj" name="beijing" >北京</li>

             <li id="tj" name="tianjin"> 天津</li>

              <li id="cq" name="chongqing">重庆</li>

         </ul>

         <ul id="love">

             <li id="fk" name="fankong" >反恐</li>

             <li id="xj" name="xingji">星际</li>

         </ul>

     <script type="text/javascript">

       // $("#city").append($("#fk"));    //将防恐标签位置移到了重庆下面    append向每个匹配的元素的内部的结尾处追加内容

       // $("#fk").appendTo($("#city"));  //效果和上面一样                appendTo将每个匹配的元素追加到指定的元素中的内部结尾处

       // $("#city").prepend($("#fk"));   //将将防恐标签位置移到了北京上面   prepend向每个匹配的元素的内部的开始处插入内容

       // $("#fk").prependTo($("#city")); //效果和上面一样                prependTo将每个匹配的元素插入到指定的元素内部的开始处

     </script>

   </body>

2.创建节点和删除节点

    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>

   <body>

         <ul id="city">

             <li id="bj" name="beijing" >北京</li>

             <li id="tj" name="tianjin"> 天津</li>

              <li id="cq" name="chongqing">重庆</li>

         </ul>

         <script type="text/javascript">

           var $hz=$("<li></li>");     //创建<li></li>          $("<li></li>")代表创建元素

             $hz.attr("id","hz");      //添加属性<li id="hz" name="hangzhou"></li> attr代表添加元素

             $hz.attr("name","hangzhou");

             $hz.text("杭州");          //添加文本       text代表添加文本

             $("#city").append($hz);   //把节点挂载到父节点下即可  

          //移除节点信息

          var $cq=$("#cq").remove();  //可以获得移除节点 的元素  remove()代表删除节点

          //移除属性信息

          alert($cq.attr("name"));    //移除属性信息        attr（"name"）,如果只有一个属性就代表通过name值得到属性名，这里得到chongqing

          $("#city").empty();         ////清空节点

         </script>

   </body>

    3.复制节点

  <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>

   <body>

   <button>保存</button>

    <p>段落</p>

    <script type="text/javascript">

     $("button").click(function(){

        alert("点击按钮");

      });

        //克隆节点，不克隆事件

       $("button").clone().appendTo($("p"));     //相当于把第三行的button按钮复制到了p标签的后面

        //克隆节点，克隆事件

        $("button").clone(true).appendTo($("p")); //clone(true)里面添加true代表也克隆事件，因为上面有两个button按钮，所以两个都会被复制

      </script>

   </body>

 4.替换节点 

   <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>

   <body>

 <p>段落</p>

 <button>登陆</button>

  <script type="text/javascript">

  //replaceWith和replaceAll的功能完全相反，

  // $("p").replaceWith("<button>登陆</button>");  //把p标签换成button按钮

  // $("p").replaceAll("<button>登陆</button>");   //按照道理是把button标签变成p标签，但没有实现功能

  </script>

   </body>

基础3.Jquery操作Dom的更多相关文章

  1. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  2. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  3. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  4. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  5. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  6. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  7. jQuery权威指南（第2版） 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

  8. *jquery操作DOM总结 (原创：最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  9. jQuery操作dom事件

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

随机推荐

  1. Javascript模块化编程（二）：AMD规范

    Javascript模块化编程(二):AMD规范   作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...

  2. WinForm各种API---时时更新

    好文要顶 关注我 收藏该文 徐淳 关注 - 1 粉丝 - 3       0 0     本文原文地址:http://www.cnblogs.com/hqxc/p/6160685.html 徐淳 [D ...

  3. WAMP错误提示：HTTP Error 404.The requested resource is not found

    原因: 本地80端口被占用,需要修改WAMP的默认端口 修改设置: 找到 bin/apache/apache***/conf/httpd.conf文件 将文件中的80修改为8088 (注:修改三个位置 ...

  4. php实验5数组

    1.自定义两个数组,分别为索引数组和关联数组,每个数组必须至少有4个元素,使用print_r( )函数输出数组元素. 2.编写一个随机抽奖程序,示例运行结果如下: 3.定义一个三维数组$categor ...

  5. CMS系统存储路径

    CMS系统特点:前后端分离 index.html 首页文件index.php 管理后台的页面 api文件夹: 提供的接口 caches文件夹: 缓存文件 html文件夹:  生成的静态页面 phpcm ...

  6. 利用代码添加autolayout约束

    1.概述 通常我们通过storyboard能够完成的,代码也能够完成,所以这里介绍下代码实现约束的添加,通常我们不这么干(在不使用第三方框架的情况下,使用系统自带的类添加约束特别繁琐),所以这里仅仅简 ...

  7. VS工具如何新建筛选器

    最近,遇到了一个问题,别人用VS工具新建了一个工程,不知道怎么的,就是没有办法新建筛选器. 今天,终于解决了,记录下,也希望能够帮助更多的人. 当我们的工程目录里的文件越来越多的时候,这时候需要建立帅 ...

  8. C++开始前篇，深入编译链接（补充2）

    在开始链接之前,我们先了解几个概念: 一>符号的概念. 我们知道,链接的最重要的是"对符号的重定位",而且上面提到了符号表,那什么是符号呢,在链接中,我们将函数和变量统称为符 ...

  9. C#水晶报表，窗体不显示，闪退

    一.问题说明 由于VS2008以后水晶报表不在集成,要用的话需要单独下载. 这里注意如果是用在C#窗体程序里的话一定要下载exe文件,安装msi文件的话VS工具栏里找不到水晶报表控件的.如果你的是64 ...

  10. Django底层剖析之一次请求到响应的整个流程

    As we all know,所有的Web应用,其本质上其实就是一个socket服务端,而用户的浏览器就是一个socket客户端. #!/usr/bin/env python #coding:utf- ...