操作html文档结构

前言:一、创建新元素 1、使用$函数创建新元素 var $newElement=$(p段落/p);//创建元素,返回jQuery对象 说明: 1)创建的新元素不会自动的把新元素插入到页面中,我们还需要明确的指定其插入到页面中的位置(比如使用append方法,指定 其插入位置为某个元素的最后一个子元素) 2)返回的jQuery对象中只包含html片段最顶层(外层)的元素,对于后代元素我们可以像处理页面中已有元素一样,

一、创建新元素
    1、使用$函数创建新元素
        var $newElement=$('<p>段落</p>');//创建元素,返回jQuery对象
        说明:
              1)创建的新元素不会自动的把新元素插入到页面中,我们还需要明确的指定其插入到页面中的位置(比如使用append方法,指定
                 其插入位置为某个元素的最后一个子元素)
              2)返回的jQuery对象中只包含html片段最顶层(外层)的元素,对于后代元素我们可以像处理页面中已有元素一样,使用
                 children或find方法访问
              3)既然可以直接apend等方法插入html元素为何还要有这个创建新元素的功能?
                 使用$函数创建元素,是返回的是jQuery对象,我们可以使用jQuery对象里面的方法在创建的这个元素被插入到页面之前进行
                 各种操作比如进行绑定事件处理函数!
    2、克隆已有的元素(通过克隆已有元素生成新元素)
        使用clone方法以已有的元素(或者新创建的元素)为模子生成新元素
        clone方法会复制jQuery对象内包含后代元素在内的所有元素
        参数:
                两个参数都是可选
                第一个参数:
                           一个布尔值(true 或者 false)指示目标元素的事件处理函数以及关联数据是否会被复制
                第二个参数(默认情况下与第一个参数一致):
                           一个布尔值,指示是否对克隆的元素的所有子元素的事件处理程序以及关联数据进行复制
二、添加子元素
    1、append方法
        在每个匹配元素内的 末尾处 插入参数内容
        参数类型说明:
        1)普通字符串(可包含各种html标签)
              $('body').append('html字符串');
        2)jQuery对象
            ①使用$函数创建的新元素(jQuery对象)
            ②使用$函数获取页面中已经有的元素(jQuery对象)
                此时会将已有的元素移动到目标元素内
            ③使用clone方法克隆页面中已经有的元素(jQuery对象)
        3)html元素对象、html元素对象数组
        ====以上类型的参数可传入多个,每个参数都会被插入到匹配元素!===
        4)函数
           有多少个匹配元素,这个函数就会执行多少次!
           函数可以接受到两个参数:第一个是当前元素的序号、第二个是当前元素内的html
           函数内部this代表当前的html元素对象
           return 的数据就是插入的内容(可以为html元素,也可以是jQuery对象)
    2、prepend方法
        将参数内容插入到每个匹配元素内部的 最前面
        使用方法及参数与append相同
    3、appendTo方法
        将匹配的元素插入到目标元素内部的最后面(同append)
        与append区别:
              使用时目标元素与插入内容的位置 颠倒
        创建新元素返回的jQuery对象与
        选择页面中已有元素返回的jQuery对象都可调用此方法(选择页面中已有元素表示将已有的元素移动到目标元素内)!
        参数(表示要插入元素的目标位置):
              Selector或者jQuery对象或者html元素对象/html元素对象数组
    4、prependTo方法
        将匹配的元素插入到目标元素内部的最前面(同prepend)
        与prepend区别:
              同上!
        参数(表示要插入元素的目标位置):
              同上!
三、包裹元素
    1、wrap方法
        在每个匹配的元素外层包上一个html元素
        参数类型说明:
        1)html字符串
            $('p').wrap('<div></div>');
            传入的html标签也可以是嵌套多层,但应该只包含一个核心的元素
        2)选择器
            传入选择器则是将 选中的元素(及其后代) 复制一份用来 包裹对应的元素
        3)jQuery对象
            可以使用新创建的元素对象或者使用选择器获取到的元素对象
        4)html元素对象
        5)函数
            有多少个匹配元素,这个函数就会执行多少次!
            函数接收一个参数
                当前元素的序号
                函数内部this代表当前的html元素对象
                return用于包裹匹配元素的 HTML 内容或 jQuery 对象
    2、wrapAll方法
        在所有匹配元素外面包一层HTML结构
        参数同上,但是我们一般不会传入函数!
        注意:如果所匹配的元素没有共同的父元素时的情况
    3、wrapInner方法
        在匹配元素里的内容外包一层结构
        参数同上
四、插入兄弟元素
    1、after方法
        在匹配元素集合中的每个元素的 后面 插入参数所指定的内容,作为其兄弟节点
        参数类型说明:
        1)普通字符串(可包含各种html标签)
              $('div').after('html字符串');
        2)jQuery对象
              ①使用$函数创建的新元素(jQuery对象)
              ②使用$函数获取页面中已经有的元素(jQuery对象)
                  此时会将已有的元素移动到目标元素的后面
              ③使用clone方法克隆页面中已经有的元素(jQuery对象)
        3)html元素对象、html元素对象数组
        ====以上类型的参数可传入多个,每个参数都会被插入到匹配元素的后面作为其兄弟节点!===
        4)函数
             有多少个匹配元素,这个函数就会执行多少次!
             函数可以接受到两个参数:第一个是当前元素的序号、第二个是当前元素内的html
             函数内部this代表当前的html元素对象
             return 的数据就是插入的内容(可以为html元素,也可以是jQuery对象)
    2、before方法
        在匹配元素的前面插入内容,作为其兄弟节点
        参数类型说明:
        同上
    3、insertAfter方法 
        在目标元素后面插入集合中每个匹配的元素,同after方法(插入的元素作为目标元素的兄弟元素)
        与after区别:
              使用时目标元素与插入内容的位置 颠倒
        创建新元素返回的jQuery对象与
        选择页面中已有元素返回的jQuery对象都可调用此方法(选择页面中已有元素表示将已有的元素移动到目标元素后)!
        参数(表示要插入元素的目标位置):
              Selector或者jQuery对象或者html元素对象/html元素对象数组
    4、insertBefore方法
        在目标元素前面插入内容(同before)
        与before区别:
              同上!
        参数(表示要插入元素的目标位置):
              同上!
五、替换元素
    1、replaceWith方法
        用提供的内容替换集合中所有匹配的元素并且返回被替换元素的集合
        参数类型说明:
         1)普通字符串(可包含各种html标签)
         2)jQuery对象
               ①使用$函数创建的新元素(jQuery对象)
               ②使用$函数获取页面中已经有的元素(jQuery对象)
                   此时会将已有的元素移动到新位置
               ③使用clone方法克隆页面中已经有的元素(jQuery对象)
         3)html元素对象、html元素对象数组
         4)函数
              有多少个匹配元素,这个函数就会执行多少次!
              函数可以接受到两个参数:第一个是当前元素的序号、第二个是当前元素内的html
              函数内部this代表当前的html元素对象
              return 的数据就是替换成的内容(可以为html元素,也可以是jQuery对象)
    2、replaceAll方法
        用集合的匹配元素替换每个目标元素(同replaceWith)
        与replaceWitch区别:
               目标和源相反
         创建新元素返回的jQuery对象与
         选择页面中已有元素返回的jQuery对象都可调用此方法(选择页面中已有元素表示将已有的元素移动至目标元素处)!
         参数(表示要插入元素的目标位置):
               Selector或者jQuery对象或者html元素对象/html元素对象数组
六、删除元素
    1、detach()方法
        从页面中去除所匹配的元素,返回调用该元素jQuery对象
        参数说明:
              (可选)一个选择器将需要移除的元素从匹配的元素中过滤出来
    2、empty()方法
        从页面中移除匹配元素的所有后代元素(包括文本)
    3、remove()方法
        将匹配元素集合从页面中删除,返回调用该元素jQuery对象(同时移除元素上的事件处理函数及关联数据)
        如果删除的元素,不需要删除关联数据和事件,请使用detach()
        参数说明:
              (可选)一个选择器用来过滤将被移除的匹配元素集合
    4、unwrap()方法
        将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置
操作html文档结构

【返回上一页】   关闭该页面  感谢您的观看

转载请注明出处及附上该链接:http://www.highallxy.com/web/194.html

您可能还会对下面的文章感兴趣: