jQuery文档处理

  • 创建一个jquery对象
var $newD = $("
"); var $newD = $("
Hello World
");//也可以在div里写内容

内部插入

  • append()
    $(父元素).append(新内容); //把内容追加到父元素里最后一个子元素的位
var $newD = $("
"); $newD.html("Hello World"); $("body").append($newD); //把新创建的div追加到body的最后的位置
  • appendTo()
    $(新元素).appendTo($(父元素));// 作用和append()相同,只是写法不同
    例如:
var $newD = $("
"); $newD.html("Hello World"); $newD.appendTo($("body")) //和append()效果相同
  • prepend()
    $(父元素).prepend("内容") //把内容插入到父元素里第一个子元素的位置
  • prependTo()
    $(内容).prepend($(父元素)) //效果和prepend()效果相同

外部插入

  • after()
$对象.after(新元素)  //在jquery对象后面添加新对象
  • insertAfter()
$(新元素).insertAfter($对象)  //作用同after()
  • before()
$对象.before(新元素)  //在jquery对象前面插入一个新内容
  • insertBefore()
$(新元素).insertBefore($对象);  //作用同before()

删除

  • remove()
    全删除(包括本身和子元素)
$("#box").remove();  //删除id为box的元素和其中的子元素
  • detach()
    全删除,和remove()相同
  • empty()
    清空对象里的元素,本身还在
$("#box").empty();  //清空id为box的元素

替换

  • replaceWith()
    jquery对象.replaceWith("内容") 用指定的 HTML 内容或元素替换被选元素(有几个替换几个)
$("div").replaceWith("你好");  //用你好替换所有的div
  • replaceAll()
    $(内容).replaceAll($对象) 用内容替换后面的jquery对象(有几个替换几个),内容不能是纯文本

克隆

  • clone()
    jquery对象.clone(参数); 克隆前面的jquery对象
    参数:可选,默认为false,克隆被选对象的全部内容
    如果为true,则会连对象的行为(事件)一起克隆。

包裹

  • wrap()
    $对象.wrap(包裹格式) 每一个被选中的$对象外面都被包裹
$("span").wrap("
") //每一个span外面都有一个div包着
  • wrapAll()
    $对象.wrapAll(包裹格式) 把选择到的对象用一个父元素包裹起来(有共同的父元素)
$("span").wrapAll("
") //把所有的span元素放一起,用一个div包起来
  • wrapInner()
    $对象.wrapInner(包裹格式) 用包裹元素包着选中元素的子元素(内容),在选中元素的里面
$("span").wrapInner("");   //把所有span中的内容用b标签包住,相当于的子元素
  • unwrap()
    $对象.unwrap()删除jquery对象的直接父元素

DOM属性操作

  • attr()
    $对象.attr("属性名") 获取$对象的属性
    也可以设置属性,用法和.css()相同。
  • prop()
    用法同attr(),也是获取和设置属性,
    prop()只能获取和设置本来就属于这个对象的属性,不能获取或设置自定义的属性
  • removeAttr()
    $对象.removeAttr("属性名")移除对象的属性

css操作

  • hasClass()
    $对象.hasClass("类名")检测是否含有某个类, 如果有返回true,没有返回false

  • offset()
    $对象.offset().top/$对象.offset().left获取距离文档的偏移量

    设置偏移量:
    $对象.offset({"top":数值,"left":数值}); 设置后的元素会变成定位元素

  • scrollTop()/scrollLeft()
    $对象.scrollTop()/$对象.scrollLeft() 获取向上或向左卷去(滚动)的距离

$对象.scrollTop(数值)/$对象.scrollLeft(数值) 设置向上或向左卷去(滚动)的距离

  • position()
$对象.position().top  //获取对象相对于父元素的偏移量(top值)
$对象.position().left  //获取对象相对于父元素的偏移量(left值)

position()只能获取不能设置,得到的值不收margin的影响

尺寸

  • width()/height()
$对象.width()  //获取元素的宽
$对象.height()  //获取元素的高

width()不受margin border padding的影响

  • innerWidth()/innerHeight()
    用法同上

不受margin border 的影响,受padding的影响

  • outerWidth()/outerHeight()
    用法同上

不受margin的影响,受padding border的影响

  • outerWidth(true)/outerHeight(true)
    用法同上

受margin border padding的影响

你可能感兴趣的:(jQuery文档处理)