杀人蟹vs帝王蟹谁会赢?:jQuery 学习笔记之六 (jQuery DOM的操作)

节点   var p_txt=$para.attr("title");  //获取

元素节点属性title   alert(p_txt);    //打印title属性值    创建节点  在dom 操作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。   1. 创建元素节点  例如要创建两个

元素节点的子节点添加到DOM节点树上。  (1)创建两个
• 新元素。  (2)将这两个新元素插入文档中。   第(1)个步骤可以使用jQuery的工厂函数$()来完成。   $(html);   $(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。   首先创建两个
• 元素,jQuery代码如下:      $("ul").append($li_1);   //添加到
  节点中，使之能在网页中显示   $("ul").append($li_2);   //可以采取链式写法:$("ul").append($li_1).append($li_2);     注意事项：       (1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。       (2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。        例如创建一个

  元素，使用$("

  ")或者("

  "),但是不要使用$("

  ")或者大写的$("

  ");    2.创建文档节点   var $li_1= $("

  • 香蕉
  ");  //创建一个
  • 元素，包括元素节点和文本节点，香蕉就是创建的文本节点   var $li_2 =$("
  • 雪梨
  ");  //创建一个
  • 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。   $("ul").append($li_1);          //添加到
    节点中，使之能在网页中显示   $("ul").append($li_2);          //添加到
    节点中，使之能在网页中显示   以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将他们添加到文档中就可以了。      注意事项：       无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。       例如$("
    • 这是一个复杂的组合
    ");     3.创建属性节点    创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。    jQuery代码如下:    var $li_1=$("
    • 香蕉
    ");//创建一个
    • 元素，包含元素节点，文本节点和属性节点 其中title='香蕉'就是创建的属性节点    var $li_2=$("
    • 雪梨
    ");//创建一个
    • 元素 包括元素节点，文本节点和属性节点，其中title=‘雪梨’就是创建的属性节点    $("ul").append($li_1);    $("ul").append($li_2); //添加到
      节点中，使之能在网页中显示         插入节点    动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。    使用append(),它会在元素内部追加新创建的内容。         jQuery中还有提供了其他几种插入节点的方法。          方法                   描述                                   示例   append()         向每个匹配的元素内部追加内容                 HTML代码                                                               

      我想说:

                                                                   jQuery代码: $("p").append("你好");  结果:

      我想说:你好

        appendTo()       将所有匹配的元素追加到指定的元素中，                   实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中   HTML 代码 

      我想说:

      jQuery代码： $("你好").appendTo("p");  结果:

      我想说：你好

               prepend()        向每个匹配的元素内部前置内容    HTML代码:

      我想说:

      jQuery代码: $("p").prepend("你好");结果

      你好我想说:

         prependTo()      将所有匹配的元素前置到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。HTML 代码

      我想说:

        jQuery代码: $("你好").prependTo("p"); 结果

      你好我想说

         after()          在每个匹配的元素之后插入内容     HTML代码

      我想说:

      jQuery代码: $("p").after("你好"); 结果:

      我想说:

      你好   insertAfter()    将所有匹配的元素插入到指定元素的后面，与after()颠倒了         HTML代码

      我想说

      jQuery代码：$("你好").insertAfter("p"); 结果

      我想说：

      你好     before()         将每个匹配的元素之前插入内容              HTML代码

      我想说:

        jQuery 代码：$("p").before("你好
");  结果你好我想说:
         insertBefore()   将所有匹配的元素插入到指定的元素的前面，实际上，使用该方法是颠倒了常规的before的操作   $(" 你好").insertBefore("p"); 结果:你好

      我想说:

         删除节点  如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的方法，即remove() 和empty()    1.remove()方法   作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。       例如删除图3-11中
      节点中的第2个
      • 元素节点，jQuery代码如下:   $("ul li:eq(1)").remove();//获取第2个
      • 元素节后，将它从网页中移除   当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。   下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。   var $li = $("ul li:eq(1)").remove();//获取第2个
      • 元素节点后，将它从网页中删除   $li.appendTo("ul");//把刚删除的节点又重新添加到
        元素里   可以直接使用appendTo()方法得特性来简化以上代码：   $("ul li:eq(1)").appendTo("ul");   //appendTo()方法也可以用来移动元素   //移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。   另外remove()方法也可以通过传递参数来选择性地删除元素   $("ul li").remove("li[title!='菠萝']"); //将
        • 元素属性title不等于"菠萝" 的
        • 元素删除。       2.empty()方法   严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。   $("ul li:eq(1)").empty();  //获取第2个
        • 元素节点后，清空此元素里的内容，注意是元素里面。   使用firebud查看橘子节点发生变化 
        • '橘子'/>      3.复制节点    复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品    并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果    $("ul li").click(function(){     $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到
          元素中   });   //在页面中点击"菠萝"后，列表最下方出现新节点"菠萝"。   $(this).clone(true).appendTo("body");//注意参数true   在clone()方法传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。    替换节点   如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和 replaceAll()   replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。   例如要将网页中

          "选择你最喜欢的水果">你最喜欢的水果是?

          替换成 你最不喜欢的水果是? 可以使用如下jQuery代码：     $("p").replaceWith("你最不喜欢的水果是?");     也可以使用jQuery中另一个方法repalceAll()来实现，该方法与replaceWith()方法得作用相同，只是颠倒了replaceWith的操作。     $("你最不喜欢的水果是?").replaceAll("p");     注意：       如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。   4. 包裹节点     如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，wrap()，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。     jQuery代码如下：     $("strong").wrap("");//用标签把 元素包裹起来     得到的结果如下：       "选择你最喜欢的水果"> 你最喜欢的水果是?           1.wrapAll()方法     该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法，wrap()方法将所有的元素进行单独的包裹。      $("strong").wrap("");           2.wrapinner()方法     该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来，例如可以使用它来包裹 标签的子内容:jQuery代码如下：     $("strong").wrapInner("");     运行代码后，发现标签内的内容被一对标签包裹了。     "选择你最喜欢的水果">你最喜欢的水果是?      属性操作     在jQuery 中，用attr() 方法来获取和设置元素属性，removeAtt() 方法来删除元素属性。     1.获取属性和设置属性       如果要获取

          元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。     var $para=$("p");               //获取

          节点     var p_txt=$para.attr("title");  //获取

          元素节点属性title          如果要设置

          元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。     jQuery代码如下：     $("p").attr("title","your title");//设置单个的属性值     //为同一个元素设置多个属性值     $("p").attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。           jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等方法。          2.删除属性      有时候需要删除文档元素的特定属性，可以使用removeAttr()方法      删除

          元素的title属性      $("p").removeAttr("title");        操作样式    获取样式和设置样式    HTML代码如下：    

          class="myclass" title="选择你最喜欢的水果"> 你最喜欢的水果是?

              class 也是

          元素的属性，因此获取class 和设置class都可以使用attr()方法。    var p_class = $("p").attr("class");//获取

          元素的class     可以使用attr()方法来设置

          元素的class，jquery代码如下：    $("p").attr("class","high");//设置

          元素的class为high    他是将原来的class替换为class，而不是在原来的基础上追加新的class     追加样式    jQuery提供了专门的addClass()方法来追加样式，为了使例子更为容易理解，首先在