jquery中form表单/prop/attr/width/height/offset/scroll的注意事项

2019独角兽企业重金招聘Python工程师标准>>>

• 对scrollTop的理解：
  • 垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
  • 如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0。
• jQuery不支持直接绑定自定义属性，使用attr绑定
• prop和attr的区别和联系:
  • $("#foo").attr("checked",true);
  • $("#foo").prop("checked",true);
  • 上述两个方法第一次使用都没有问题，区别在于attr是一次性的。
  • 在标签里没有明确设置属性的时候，attr获取的是undefined,设置后会获取到true或者false,但是只能获取一次；而prop可以多次获取，获取到的是true和false。
  • 建议：表单属性使用prop,其他属性使用attr。
• 属性操作：
  • 一般属性（id,src,href,title)使用attr操作；
  • 样式属性()使用css和addClass/removeClass/hasClass/toggleClass操作；
  • 表单属性使用prop操作；
  • 内容属性一般使用val()/text()/html()操作。
• 区分html/text/val
  • html():无参是获取，带参是赋值。（识别标签）
  • text():无参是获取，带参是赋值。（不识别标签）
  • val():无参是获取，带参是赋值。（标签中的value属性）
• split("")可以把字符串中每个字符转换成数组中每个元素。join()方法类似，作用相反。
• width()和height()方法获取时获取到的值不带单位。（通过css方法获取到的带单位）。既能获取又能赋值，不需要带单位。
• **offset()**方法中返回值有top/left
  • 获取值：element.offset().top:获取的是距离document的上面的位置，而不是相对于定位的父元素的距离。
  • 赋值：element.offset({"top",200});设置距离document的上面的位置。
• **position()**方法：只能获取不能设置
  • 获取值：element.position().top;获取到的是距离定位的父元素的距离
  • 可能其他版本的api或者其他的可能会允许赋值。
  • 可以使用element.css("top",200)来进行赋值
• **scroll()**方法：
  • 获取值：$(document).scrollTop();获取到的是页面卷曲出去的高度
  • 赋值：$(document).scrollTop(0);距离父系盒子中带有定位的盒子的距离

转载于:https://my.oschina.net/yxmBetter/blog/830060