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. 【sdoi2013】森林 BZOJ 3123

    Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负整数 ...

  2. Koa2 的安装运行记录（二）

    参考 :koa2-boilerplate    https://github.com/superalsrk/koa2-boilerplate Ajax Login and Ajax Logout in ...

  3. hdu 1878

    http://acm.hdu.edu.cn/showproblem.php?pid=1878 题意:就是判断这个图是不是一个欧拉回路的一个题, 思路:我觉得这个题可以用并查集判环加上判断每个点的度就行 ...

  4. docker容器与容器云读书笔记1

    搭建docker应用栈 操作系统: ubuntu 16.04.1 LTS 桌面版 1. 准备工作 换网易源, gedit 会报一个metadata的告警, 不用理会, sudo apt-get upd ...

  5. excel转json工具的制作(C#语言)

    最近在做一个火炬之光的技能系统的demo,需要用到配置表工具. &在网上没有找到让自己满意的工具&自己感兴趣, so自己做了一个. 我使用的C#语言,用了网上的SimpleJSON工具 ...

  6. MapReduce工作原理图文详解

    目录:1.MapReduce作业运行流程2.Map.Reduce任务中Shuffle和排序的过程 1.MapReduce作业运行流程 流程示意图: 流程分析: 1.在客户端启动一个作业. 2.向Job ...

  7. AVL Insight 开源情报工具：一站式情报管理服务

    一.概要 AVL Insight 开源情报工具是安天移动安全推出的一款情报收集工具,它是配合AVL Insight移动威胁情报平台的Chrome浏览器扩展程序,用户可以使用该工具,对网站中的公开信息进 ...

  8. DBNEWNAME工具介绍

    下面修改数据库的SID和db_name [root@oracle ~]# su - ora11g db11@oracle /home/ora11g$ db11@oracle  /home/ora11g ...

  9. .NET 需要处理的高性能WEB架构 - .NET架构

    1.如果不想被微软包围(其实微软的一套并不贵,是被谣言传高了),数据层依然可以选择SQL Server数据库和存储过程. 2.缓存不再依赖.net自身提供的缓存机制,迁移到部署在Linux平台上的分布 ...

  10. maven权威指南学习笔记（三）——一个简单的maven项目

    目标: 对构建生命周期 (build  lifecycle),Maven仓库 (repositories),依赖管理 (dependency management)和项目对象模型 (Project O ...