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. 手写一个allocator

    似乎就像是一个计算机原理的实践.. 首先介绍一下大多数操作系统的内存架构..对于某个程序它会认为自己是独占了整个系统的所有内存在运行的这样才能方便移植,因此人们搞出了虚拟内存和物理内存的区别,于是人们 ...

  2. 《jQuery知识点总结》（一）

    write less do more写更少的代码实现更多的功能DOM:document object model (文件对象模型)选择器(选择元素的对象或者节点)id 选择器 $("#id& ...

  3. JavaBean的用法

    JavaBean是一个可重复使用的软件组件,是用Java语言编写的.遵循一定标准的类. JavaBean是Java Web的重要组件,它封装了数据和操作的功能类,供JSP和Servlet调用,完成数据 ...

  4. shell 多行注释

    :<<! 要注释的内容 要注释的内容 要注释的内容 !

  5. CDQ学习笔记

    CDQ三维偏序 给出n个点(x,y,z) 每个点求出x'<=x,y'<=x,z'<=x的点(x',y',z')有多少个 第一维 快排 第二维 CDQ 第三维 树状数组 CDQ 先按x ...

  6. Sublime Text 基础配置

    作为一个码农,总有一款自己喜爱的编辑器.现今,我最喜欢的编辑器便是Sublime Text 3.其实很早便用了这款编辑器,大概是在两年前就开始用了吧.可总没有好好去学习下,很多很多功能不知道.今天下午 ...

  7. python enumerate用法

    含义:"枚举,列举" 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enumerate将其组成一个索引序列,利用它可以同时获得索引和值 enumerate多 ...

  8. Python 下载网络mp4视频资源

    最近着迷化学, 特别是古代的冶炼技术,感叹古人的聪明. 春秋时期的炼铁方法是块炼铁,即在较低的冶炼温度下,将铁矿石固态还原获得海绵铁,再经锻打成的铁块.冶炼块炼铁,一般采用地炉.平地筑炉和竖炉3种.铁 ...

  9. SQL语句实现Split并合并查询结果

    需求是这样的,需要将数据库中的支付方式列(用";"分割的字符串)按支付方式拆分: 首先参考博客园split的文章,我采用方法2, IF EXISTS ( SELECT * FROM ...

  10. C# 通过模拟http请求来调用soap、wsdl

    C#调用webservice的方法很多,我说的这种通过http请求模拟来调用的方式是为了解决C#调用java的远程API出现各种不兼容问题. 由于远程API不在我们的控制下,我们只能修改本地的调用代码 ...