ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-06-29 12:03:49  阅读:147  来源: 互联网

标签:jquery 克隆 content 获取 html scrollTop 操作 节点


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}

标签:jquery,克隆,content,获取,html,scrollTop,操作,节点
来源: https://www.cnblogs.com/z-lin/p/11106150.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有