jQuery 学习之路(3):DOM操作

一、在元素内部插入

    .append(content[,content])         在指定元素的内部末尾插入字符串,或在指定元素的内部末尾移入指定元素,如 $(".container").append($("p"));
    .appendTo(target)             将指定元素移动到某元素内部的末尾,如 $("p").appendTo( $( ".container"));
    .prepend(content[,content])        类似 .append 方法,只是插入位置变成内部开头。
    .prependTo(target)             类似 .appendTo 方法,只是插入位置变成内部开头。
    .html(htmlString)              替换元素内部所有内容,包括标签 
    .text(text)                  类似于 .html(htmlString),不包括标签 

 

二、在元素外部插入

      .after(content[,content])        在指定元素后面(同辈)增加字符串,若参数是元素,则将该元素移到指定元素后面
      .insertAfter(target)              将指定元素移动到某元素后面(同辈)
      .before(content[,content])       类似 .after 方法,只是位置变成前面
      .inertBefore(target)           类似 inertAfter 方法,只是位置变成前面

 

三、包裹元素插入

      .wrap(wrappingElement)          用参数里的元素分别包在所有匹配元素的外围,如 $('p').wrap('<b></b>');
      .unwrap()                  分别删除所有匹配元素的外围元素
      .wrapAll(wrappingElement)        类似于 wrap 方法,只是把所有匹配的元素做为一个整体,在外层包上指定元素
      .wrapInner(wrappingElement)       在指定元素内部,使用参数里的元素包裹其内部所有元素。 

 

四、元素移除

        .remove()          连同元素一起删除
        .empty()           删除元素内部所有数据
        .detach()          类似于 .remove() 但是保留删除的元素的对象,在需要的时候仍可恢复

   

五、元素替换

          .clone()                      将指定元素复制
          .replaceWith(newContent)            将指定元素用参数里的元素替换
          .replaceAll(target)               基本同 replaceWith ,只是源和目标被逆转

  

六、元素属性操作

        .arrt(attributeName[,value])        获得或设置属性的值
        .prop(propertyName[,value])        获得或设置属性的值
        .removeAttr(attributeName)         删除指定的属性
        .removeProp(propertyName)        删除指定的属性
        .val([value])                 获得或设置元素的value值 

 关于 attr(...) 和 prop(...) 的区别,参见:

http://www.javascript100.com/?p=877

七、样式操作

        .addClass(className)          为元素增加指定样式
        .removeClass(className)        为元素删除指定样式
        .hasClass(className)           判断元素是否包括指定样式
        .toggleClass(className)         为元素切换指定样式,一般配合事件使用,如在单击事件中调用,每单击一次切换一下样式。该方法可以由上面三个方法配合实现同样效果。

  

八、样式属性

          .css(cssName[,cssValue])        获取或设置某个样式的值,也可以同时设置多个css样式,如 $( this ).css(["width", "height", "color", "background-color"]);
          .height([value])             获取或设置样式 height 的值,是 css 方法的一种情况
          .width([value])              获取或设置样式 width 的值,是 css 方法的一种情况
          .innerHeight()               获取 height + padding 的值
          .innerWidth()              类似上
          .outHeight()               获取 height + padding + border 的值,或 .outHeight(true),则为 height + padding + border + margin 的值
          .outWidth()               类似上
          .position()               获取某一元素相对其父元素的偏移,返回的变量有两个属性 left 和 top ,可分别获取横坐标和纵坐标
          .offset()                  获取某一元素相对当前视口的偏移,返回的变量有两个属性 left 和 top ,可分别获取横坐标和纵坐标 
          .scrollLeft([value])           与获取和设置滚动条的偏移有关      
          .scrollTop([value])           与获取和设置滚动条的偏移有关   

                    

            

原文地址:https://www.cnblogs.com/tianyajuanke/p/3723580.html