分类 HTML 下的文章

jQuery源码分析(十九): DOM操作之样式操作


起步

我们基本都是通过jq的 .css() 来设置样式的。原生的js是这样设置的:

var head= document.getElementById("head");
head.style.width = "20px";
head.style.height = "10px";
head.style.display = "block";

总的来说,单一的设置会导致浏览器绘制一次,而且,jstyle只是针对行类样式,对于 link 引入的样式无法获取。样式属性名的兼容问题,比如驼峰,保留字 float


jQuery源码分析(十七): DOM的属性操作与钩子机制


起步

jq提供一些快捷函数来操作dom中的属性,大致有:

  • attr()函数用于设置或返回当前jQuery对象所匹配的元素节点的属性值。
  • removeAttr()函数用于移除在当前jQuery对象所匹配的每一个元素节点上指定的属性。
  • prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。
  • removeProp()函数用于移除在当前jQuery对象所匹配的每一个元素上指定的属性。
  • val()函数用于设置或返回当前jQuery对象(第一个元素)所匹配的DOM元素的value值或设置匹配的元素集合中每个元素的值。
  • addClass()函数用于为当前jQuery对象所匹配的每一个元素添加指定的css类名。
  • removeClass()函数用于移除当前jQuery对象所匹配的每一个元素上指定的css类名。