解密jQuery内核 样式操作
基础回顾
jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现
那么jQuery要处理样式的哪些问题?
先简单回顾下样式操作会遇到的问题
HTML样式定义3种方式了
<link/> 外部引入也就是定义CSS中的
<style/>嵌入式样式
style特性地定义
给一个HTML元素设置css属性,如
var head= document.getElementById("head");
head.style.width = "20px";
head.style.height = "10px";
head.style.display = "block";
这是DOM2级样式提供的API了,这里总的来说还涉及了3个问题,当然也是jQuery内部需要解决的兼容问题了
1 单一的设置太麻烦,而且每次style一次就等于浏览器要绘制一次,当然高级的浏览器是可能会合并style的次数的
2 style只能针对行类样式,对于link引入的样式,无法获取
3 样式属性名的兼容问题,比如驼峰,保留字
样式规则
任何支持style特性的HTML元素在js中有一个对象的style属性,其实也是一个实例,但是内部属性命名都是采用的驼峰形式的
比如 background-image =>要写成 backgroundImage
其中一个是比较特殊的就是 float, 保留字嘛所以就换成 cssFloat, IE : styleFloat
然后对于width,hight这些处理都最好要有一个量度单位
合并cssText
可能针对一种情况给出的处理就是cssText合并
var head= document.getElementById("head");
head.style.cssText="width:20px;height:10px;display:bolck";
和innerHTML一样,cssText很快捷且所有浏览器都支持。此外当批量操作样式时,cssText只需一次reflow,提高了页面渲染性能
当然如果是在创建的时候,我们还可以利用文档碎片
缺点自然就是样式被整体覆盖了,所以在处理的时候应该要先获取需要保留的样式然后再拼接起来
样式访问
之前说过了style只能获取行类样式了,那么CSS外部样式表定义的样式如何处理?
DOM2增加了 document.defauleView,提供了 getComputedStyle()方法 返回了类似style属性的 css的dom隐射的实例对象
自然包行了样式表的最终样式了
getComputedStyle与style的区别
区别就在于getComputedStyle是只能读的,style是可以可读可写的
看看jQuery的
function getStyles( elem ) {
return window.getComputedStyle( elem, null );
}
没有defauleView前缀,查了下在浏览器中,该属性返回当前 document
对象所关联的 window
对象,如果没有,会返回 null
。
应该就能直接window调用了
当然啦,IE这个老大反正就不怎么守规矩了,getComputedStyle
方法IE6~8是不支持,所以自己弄出来了currentStyle
处理类似style的处理了,jQuery2X 可以无视IE9以下的兼容了, 所以这个略过~
以上就是样式操作需要了解是基础了,那么总的来说
jQuery需要的处理问题就显而易见了
1 参数传递
2 命名规范
3 访问规则
4 性能优化
.css()
关于css的接口
jQuery.fn.css 与 jQuery.css
我们知道实例是调用静态的方法
css的接口参数传递是可以很多个组合情况的,这也符合了jQuery少写多做的原则了
最终方法与设置样式的方法是实例方法,所以我们看传递的参数就知道了,只能是单一的elem, name, value 实参
jQuery.style( elem, name, value ) :
jQuery.css( elem, name );
所以如果我们传递是对象或者别的方式就需要一个过滤的环节
css参数的处理也跟之前的attr属性的处理保持一致,采用了jQuery.access方法统一调配
这个具体之前就分析了,无非就是递归参数,但是有个可学的设计思路
分离不同的逻辑判断通过回调传递进去
取值jQuery.css()
先看看源码
css: function( elem, name, extra, styles ) {
var val, num, hooks,
origName = jQuery.camelCase( name );
name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );
hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
if ( hooks && "get" in hooks ) {
val = hooks.get( elem, true, extra );
}
if ( val === undefined ) {
val = curCSS( elem, name, styles );
}
if ( val === "normal" && name in cssNormalTransform ) {
val = cssNormalTransform[ name ];
}
if ( extra === "" || extra ) {
num = parseFloat( val );
return extra === true || jQuery.isNumeric( num ) ? num || 0 : val;
}
return val;
}
首先自然是检测是是否驼峰写法了,如果不是就得转化下
origName = jQuery.camelCase( name );
把正则拖出来
'background-image'.replace(/-([\da-z])/gi, fcamelCase = function( all, letter ) {
return letter.toUpperCase();
})
找到-后面的,转成大写开头
修正命名float
jQuery.cssProps
css样式的钩子处理,针对不同的兼容增加的解耦处理,这里先跳过下章再将,不影响代码流程
所以最终在默认情况下是通过curCSS处理的取值
curCSS = function( elem, name, _computed ) {
var width, minWidth, maxWidth,
computed = _computed || getStyles( elem ), // Support: IE9
// getPropertyValue is only needed for .css('filter') in IE9, see #12537
ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined,
style = elem.style;
最终就是通过getComputedStyle的getPropertyValue方法了,所以通体来说跟之前假设的处理是保持一致的,只是做了不同的兼容
设值jQuery.style()
处理的方式与css类似,只是要注意了style才具有样式的修改权限
这样的传对象其实都是需要调用多次style处理的,当然没有采用cssText的方式处理,因为本身以前的属性就会丢失了
var color = a.css({"background-color":'red','width':'200px'});
总结:
jQuery的处理流程:
1. 分解参数
2. 转换为驼峰式,修正属性名
3. 如果有钩子,则调用钩子的set get
4. 最终实现都是依靠浏览器自己的API的
解密jQuery内核 样式操作的更多相关文章
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
- 解密jQuery内核 DOM操作的核心buildFragment
文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- jQuery - 5.样式操作
样式操作 1.获取样式 attr("class"), 2.设置样式attr("class","myclass"), 3.追加样式addCla ...
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- jquery动态样式操作
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 1 var p_class = $(" ...
- 解密jQuery内核 DOM操作方法(二)html,text,val
回顾下几组DOM插入有关的方法 innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 看图对照区别 innerText 设置 ...
- jQuery 源码解析(二十九) 样式操作模块 尺寸详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...
- jQuery 2.0.3 源码分析 样式操作
根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...
随机推荐
- sublime插件
CnDict: 中英文字典软件,快捷键查词,目前支持金山词霸和有道词典. BracketHighlighter: 有个笑话,说前苏联间谍花了巨大的代价,偷到了阿波罗飞船的最后一屏的代码,发现全部是 } ...
- 支持“ApplicationDbContext”上下文的模型已在数据库创建后发生更改
异常信息 解决方法: 1.PM> Enable-Migrations 2.打开生成的Configuration.cs文件,修改代码如下 public Configuration() { Auto ...
- wex5中的星星评分
新建一个空白的.w文件,然后在页面上放5个img星星图片 重要的是图片路径不能是绝对路径,要用相对路径,不然js操作的时候会出bug 添加两个label标签(标签随你挑,在这我就用label) 你到时 ...
- 【转】关于FLASH中图文混排聊天框的小结
原文链接 图文混排也是FLASH里一个很古老的话题了,我们不像美国佬那样游戏里面聊天框就是聊天框,全是文字干干净净,也不像日本人发明了并且频繁地使用颜文字.不管是做论坛.做游戏,必定要实现的一点就是带 ...
- 关于C#的微信开发的入门记录二
在准备了空间和域名之后,现在来讲讲我们接下来的编码过程: 今天就先到这里了!没有服务器那些的请看我之前的博客:http://www.cnblogs.com/zhankui/p/4515905.html ...
- Java 用LinkdeList实现52张扑克牌
用LinkdeList实现52张扑克牌(不含大小王)的洗牌功能.提示:花色 ,和数字分别用数组存储. import java.util.LinkedList; import java.util.Ran ...
- Lua pureMVC
分享一个lua语言版本的pureMVC. 这个是一个根据AS3(ActionScript 3) pureMVC而转换过来的lua pureMVC.所有的接口完全跟AS3版本一致,本来是想用在项目之中的 ...
- canvas初探2
2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...
- ubuntu下 编译安装swftools
1.下载:http://www.swftools.org/download.html2.安装: tar -zvxf swftools-0.x.x.tar cd swftools-0.x.x ./con ...
- CSS 使用母版页的内容页如何调用css和javascript
方案一: 把所有的css样式和javascript函数放到母版页的<head></head>中,我觉得这样做的弊端就是导致母版页的<head></head&g ...