jquery 元素插入详解.docx

jquery 元素插入详解.docx

《jquery 元素插入详解.docx》由会员分享，可在线阅读，更多相关《jquery 元素插入详解.docx（24页珍藏版）》请在冰豆网上搜索。

jquery元素插入详解

jquery元素插入详解

jQuery学习笔记之六（jQueryDOM的操作）

DOM操作的分类

DOMCore并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。

它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。

例如XML

javascript中的getElementById（）,getElementByTagName（）,getAttribute（）和setAttribute（）等方法，这些都是DomCore的组成部分。

使用DOMCore来获取表单对象的方法

 document.getElementByTagName（"from"）;

使用DOMCore来获取某元素的src属性的方法：

 element.getAttribute（"src"）;

构建DOM元素

  你最喜欢的水果是?

    苹果

    橘子

    菠萝

  

使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。

   1.查找元素节点

    获取元素节点并打印出它的文本内容，jQuery代码如下:

    var$li=$（"ulli:

eq

（1）"）;  获取

里第2个
• 节点

      varli_txt=$li.text（）;        //获取第2个

• 元素节点的文本内容

      alert（li_txt）;                //打印文本内容，这里会打印出橘子

       

      以上代码获取了

  元素里第2个
  • 节点，并将它的文本内容"橘子"打印出来

     

       2.查找属性节点

       利用jQuery选择器查找到需要的元素后，就可以使用attr（）方法来获取它的各种属性的值.attr（）方法得参数可以是一个，也可以是两个。

    当参数是一个时，则是要查询的属性的名字。

       获取属性节点并打印出它的文本内容，jQuery代码如下：

       var$para=$（"p"）;    //获取

    节点

       varp_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代码如下:

               $（"ulli:

            eq

            （1）"）.remove（）;//获取第2个

          • 元素节后，将它从网页中移除

               当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

               下面的jQuery代码说明元素用remove（）方法删除后，还是可以继续使用的。

               var$li=$（"ulli:

            eq

            （1）"）.remove（）;//获取第2个

          • 元素节点后，将它从网页中删除

               $li.appendTo（"ul"）;//把刚删除的节点又重新添加到

            元素里

               可以直接使用appendTo（）方法得特性来简化以上代码：

               $（"ulli:

            eq

            （1）"）.appendTo（"ul"）;

               //appendTo（）方法也可以用来移动元素

               //移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。

               另外remove（）方法也可以通过传递参数来选择性地删除元素

               $（"ulli"）.remove（"li[title!

            ='菠萝']"）; //将

            • 元素属性title不等于"菠萝"的
            • 元素删除。

               

                 

                 2.empty（）方法

                 严格来讲，empty（）方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。

                 $（"ulli:

              eq

              （1）"）.empty（）;  //获取第2个

            • 元素节点后，清空此元素里的内容，注意是元素里面。

                 使用firebud查看橘子节点发生变化 

                 

                 3.复制节点

                  复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品

                  并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果

                  $（"ulli"）.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"）;               //获取

              节点

                   varp_txt=$para.attr（"title"）;  //获取

              元素节点属性title

                   

                   如果要设置

              元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。

                   jQuery代码如下：

                   $（"p"）.attr（"title","yourtitle"）;//设置单个的属性值

                   //为同一个元素设置多个属性值

                   $（"p"）.attr（{"title":

              "yourtitle","name":

              "test"}）;//将一个"名值"形式的对象设置为匹配元素的属性。

                   

                    jQuery中的很多方法都是同一个函数实现获取（getter）和设置（setter）的，例如上面的attr（）方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html（）,text（）,height（）,width（）,val（）,css（）等方法。

                    

                  2.删除属性

                    有时候需要删除文档元素的特定属性，可以使用removeAttr（）方法

                    删除

              元素的title属性

                    $（"p"）.removeAttr（"title"）;

                  

                  操作样式

                  获取样式和设置样式

                  HTML代码如下：

                  你最喜欢的水果是?

                  class 也是

              元素的属性，因此获取class 和设置class都可以使用attr（）方法。

                  varp_class=$（"p"）.attr（"class"）;//获取

              元素的class

               

                  可以使用attr（）方法来设置

              元素的class，jquery代码如下：

                  $（"p"）.attr（"class","high"）;//设置

              元素的class为high

                  他是将原来的class替换为class，而不是在原来的基础上追加新的class

               

                  追加样式

                  jQuery提供了专门的addClass（）方法来追加样式，为了使例子更为容易理解，首先在