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]

    URL /^(http\:\/\/|https\:\/\/)(.{4,})$/ 18位身份证号 //前17位数字,末位支持X/^\d{17}\d{1}$|^\d{17}x{1}$/ 手机号 //11位 ...

  2. pwd命令

    [pwd]      打印当前的工作目录             pwd==print work director 命令格式: pwd [OPTION]... 命令功能: 打印当前工作目录的全路径 命 ...

  3. 后台访问 JS解决跨域问题

    今天看了看以前做的一个小项目(其实就是一个页面),分享一下当时解决跨域问题的: 背景:公司把项目部署在多台服务器上,防止一台服务器崩溃后,其他的可以继续访问,对应本公司来说,某台服务器出问题后,技术人 ...

  4. [转]Android静态变量的生命周期

    原文地址:https://my.oschina.net/jerikc/blog/137207 Android是用Java开发,其静态变量的生命周期遵守Java的设计.我们知道静态变量是在类被load的 ...

  5. 【翻译】首个基于NHibernate的应用程序

    首个基于NHibernate的应用程序  Your first NHibernate based application 英文原文地址:http://www.nhforge.org/wikis/how ...

  6. centos 7 配置iptables

    环境:阿里云ECS.centos 7 一.防火墙配置 不知道为什么,云主机没有开启firewall 或iptables,记录一下配置iptables防火墙的步骤 1.检测并关闭firewall sys ...

  7. python之模块

    模块即一推代码的集合来实现某个功能,使用时直接调用,甚是方便. 模块又分为三种 自定义模块 内置模块 第三方模块 下面就来介绍介绍什么是内置模块及如何去使用它和内置模块的好处. 使用模块模块前首先导入 ...

  8. Objective-C歌词解析

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { FILE* fp1;//定义文件指针 ...

  9. 【Java EE 学习 55】【酒店会员管理系统项目总结】

    本酒店会员管理系统使用了SSH框架和传值播客提供的协同OA静态页面. 项目地址:https://github.com/kdyzm/HotelMembersManagement 一.需求分析 酒店会员管 ...

  10. 「转载」关于Service常驻内存不被清理

    http://www.cnblogs.com/fangyucun/p/3533731.html 作个记录