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>

【jQuery】(3)---Jquery操作Dom的更多相关文章

  1. JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  2. Jquery选择器，操作DOM

    刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...

  3. js，jquery和dojo操作dom

    最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下! 一.获取元素 js ...

  4. 使用Jquery与vuejs操作dom比较

    jquery实现添加功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. JQuery学习之操作DOM

    1.DOM,就是Document Object Model(文档对象模型) 2.获得内容的方法: **text():设置或返回所选元素的文本内容 $("#btn1").click( ...

  6. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  7. 三、jquery操作DOM

    DOM(Document Object Model, 文档对象模型)为文档提供了一种结构化的表示方法,通过该方法可以改变文档的内容和展示形式.在实际运用中,DOM更像是桥梁,通过它可以实现跨平台.跨语 ...

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

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

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

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

  10. Hybrid App开发之jQuery操作DOM

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

随机推荐

  1. 第二阶段第八次spring会议

    昨天我对软件进行了植物网站的添加. 今天我将对软件进行宠物信息的添加. 清屏功能 private void button5_Click(object sender, EventArgs e) { te ...

  2. jquery学习总结24-36

    一.jquery的自定义事件 1.自定义事件不能通过eventName()来添加,只能通过on来绑定 2.自定义事件需要通过trigger(自动触发)来进行触发 二.jauery事件命名空间 1.事件 ...

  3. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  4. Cortext-A7_i.MX 6ULL——多模式DDR控制器（MMDC）

    1.概述 i.MX 6ULL系列芯片的MMDC是一个多模式DDR控制器,支持DDR3/DDR3Lx16和LPDDR2x16的存储类型,MMDC是可配置,高性能,优化的内存控制器. 注:DDR3/DDR ...

  5. rem 是如何实现自适应布局的

    摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.本文讲的是如何使用rem实现自适应.· rem这是个低调的css单位,近一 ...

  6. html5中如何更改、去掉input type默认样式

    1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" ...

  7. 【慕课网实战】六、以慕课网日志分析为例 进入大数据 Spark SQL 的世界

    DataFrame它不是Spark SQL提出的,而是早起在R.Pandas语言就已经有了的.   A Dataset is a distributed collection of data:分布式的 ...

  8. ROS学习笔记(一) ： 入门之基本概念

    目录 基本概念 1. Package 2. Repositories 3. Computation Graph 4. Node 5. Master 6. Message 7. Topic 8. Ser ...

  9. 解决 Files 的值"<<<<<<< HEAD"无效。路径中具有非法字符

    通常我们使用版本控制后会出现诸如此类的问题,此时从vs工具找错误和调试是无法找到问题的,也不影响项目的运行,但是有错误就是得解决.原因是版本控制导致文件的路径出现问题. 解决 Files 的值&quo ...

  10. 微信小程序——地图

    一:如何标点问题 地图模块需要用标点:官网API里面的wx.createMapContext(mapId, this)接口,且用官网Demo,小程序运行报错此时需要在wxml里面给map标签添加属性m ...