jquery中节点的操作以及一些其他方法的操作

Posted 2022-02-23 z-lin

Jquery中节点操作

1.   创建节点:

$(‘html字符串’): 如$(‘<p>hello jquery</p>’);

2.   添加节点：

append  ,  appendTo  添加到元素内容的最后面

    $(‘.father‘).append($(‘p‘));
    $(‘h2‘).appendTo($(‘.father‘));

 

prepend ,  prependTo  添加到元素内容的最前面

   $(‘.father‘).prepend($(‘p‘));
    $(‘h2‘).prependTo($(‘.father‘));

 

before -- -> $A.before($B)  将B扔到A的前面(兄弟关系，相邻)

    $(‘.son‘).before($(‘.son2‘));

 

after-- -> $A.after($B)  将B扔到A的后面（相邻，兄弟关系）

    $(‘.son‘).after($(‘.son2‘));

 

3.   删除节点

Remove()自杀型

4.   清除节点

Empty()清空所有内容

5.   克隆节点

Clone(参数) [都是深拷贝]

False:默认值,克隆结构,不克隆事件

True: 克隆结构，也克隆事件

$(‘p’).clone(true)

 

6.   其他的一些方法:

Val() 获取和设置value值

Html()设置或获取html值，相当于innerHtml

Text()设置和获取text文本值,相当于innerText

 

获取盒子的宽高

Width/height  ----------- content

innerWidth/innerheight -------content + padding

outerwidth/ outerheight --------content +padding + border

outerwidth(true)/outerheight(true) -----content + padding + border + margin

 

滚动事件中获取设置以及实现animate动画的方法---scrollTop

1.    获取页面卷曲的高度

$(window).scrollTop()

底层js的实现则是通过

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

 

2.    设置页面卷曲的高度

$(window).scrollTop(值)

底层js的实现; document.documentElement.scrollTop(值)

pageYOffset 是只读属性，不能用于设置操作

 

3.    实现animate动画时，需要给html设置

$(‘html‘).animate( scrollTop: 0 );

 

Offset()获取的是距离整个document页面左顶点的距离

返回值是个对象:如 left:200,top:200

 

Position()获取的是距离最近的有定位的祖辈元素的距离

返回值是个对象: 如left:200,top:200