jQuery文档处理

2017-11-08  本文已影响12人  恍若如梦hzpeng
var $newD = $("<div></div>");  
var $newD = $("<div>Hello World</div>");//也可以在div里写内容

内部插入

var $newD = $("<div></div>");
$newD.html("Hello World");
$("body").append($newD);  //把新创建的div追加到body的最后的位置
var $newD = $("<div></div>");
$newD.html("Hello World");
$newD.appendTo($("body"))  //和append()效果相同

外部插入

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

删除

$("#box").remove();  //删除id为box的元素和其中的子元素
$("#box").empty();  //清空id为box的元素

替换

$("div").replaceWith("<span>你好</span>");  //用<span>你好</span>替换所有的div

克隆

包裹

$("span").wrap("<div></div>")  //每一个span外面都有一个div包着
$("span").wrapAll("<div></div>")  //把所有的span元素放一起,用一个div包起来
$("span").wrapInner("<b></b>");   //把所有span中的内容用b标签包住,<b>相当于<span>的子元素

DOM属性操作

css操作

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

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

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

尺寸

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

width()不受margin border padding的影响

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

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

受margin border padding的影响

上一篇 下一篇

猜你喜欢

热点阅读