自从JQuery实现了Selector后,貌似其他一些JavaScript框架也开始向Selector靠拢,相继推出了自己的CSS选择器, 考虑到css选择器确实强大,所以,在easyUI中也添加了一个自己的cssSelector方法:easyUI.cssSelector('css选 择器',dom范围)
CSS选择器实现原理:
一、解析
1、格式化数据,将css选择器转换成一种便于后面进行操作的格式,这一步很重要,这是数据结构部分,后面的实现都将以此为依据。
以下面数据为例:
#a b.c .d + e:first-child > f[data = "hello world!"]
首先,捕获形如 [ 属性 = 值 ] 的数据,将"="两边的空格去掉,然后将“值”里的空格替换为一个不太可能会出现的临时字串,如0x20156
然后,在+、:、>、[ 符号前加空格
接着,将#、.、+、:、]、>后的空格去掉
最好将单引号和双引号也都去掉
做完上述替换操作后,变可得到形如下面的数据:
#a b.c .d +e :first-child >f [data=hello0xdh20156world!]
2、将格式化后的数据转换成这样的伪代码:取节点函数('css选择符',上一次操作的结果),以空格为分隔:
取节点函数('#a',上一次操作的结果)
取节点函数('b.c',上一次操作的结果)
取节点函数('.d',上一次操作的结果)
取节点函数('+e',上一次操作的结果)
取节点函数(':first-child',上一次操作的结果)
取节点函数('>f',上一次操作的结果)
取节点函数('[data=hello0xdh20156world!]',上一次操作的结果)
3、将css选择器解析成具体的取节点函数,如:
#a应当解析成:document.getElementById('a')
E#a应当解析成:document.getElementsByTagName('E'),然后遍历id=a的
之前进行过转换的0x20156记得重新转换为空格。
更多css Selectors的解释请参见:
http://www.w3.org/TR/CSS2/selector.html
二、编写取节点函数,将伪代码实现
在easyUI.cssSelector的实现中采用的是eval的方式,目前该方法尚未完全支持CSS2选择器,还在测试阶段!
CSS选择器- easyUI.cssSelector更新
时间: 2024-12-31 00:14:31
CSS选择器- easyUI.cssSelector更新的相关文章
jQuery原理系列-css选择器的简单实现_jquery
jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.
详解CSS选择器、优先级与匹配原理
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择
css选择器: 编写高效的CSS选择器
高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题.很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能.然而,我们可以不考虑当你自认为会的太少而使用了低效的CSS这种情况.这些规则只真正用在性能要求很高的网站上,这些网站对速度要求很高,任何一个页面可能含有成百上千个DOM元素.但是实践出真理,不管你是在打造下一个facebook 还是在开发一个本地的展示网页,多学点总是好的....CSS 选择器CSS
CSS网页制作教程:浏览器与CSS选择器对应表
文章简介:网页教学网这张表只是作为网页制作学习笔记,方便自己忘记的时候查找. 网页教学网这张表只是作为网页制作学习笔记,方便自己忘记的时候查找. 1)关于子选择器 ( > ) 在ie7+标准模式,chrome,ff下开始支持了.有人说在ie7下,如果父元素与子元素之间有注释的话就会失效,但是我没有发现. 2) 临近兄弟选择器(+) 在ie7+标准模式.chrome,ff下开始支持了.但是,如果父元素与子元素之间有注释的话就会失效.ie8没有. 3)普通兄弟选择器(~) 选择该元素后面的所有兄弟节
css选择器命名规则:差异及可能产生的问题
文章简介:W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上,再加连字号(-)和下划线(_):它们不能以 数字,或一个连字号后跟数字为开头.它们还可以包含转义字符加任何ISO 10646字符作为一个数 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器
CSS选择器学习攻略
CSS选择器基本知识 一.基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素 实例: CSS Code复制内容到剪贴板 * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.
浏览器与CSS选择器具体对应表
1)关于子选择器 ( > ) 在ie7+标准模式,chrome,ff下开始支持了.有人说在ie7下,如果父元素与子元素之间有注释的话就会失效,但是我没有发现. 2) 临近兄弟选择器(+) 在ie7+标准模式.chrome,ff下开始支持了.但是,如果父元素与子元素之间有注释的话就会失效.ie8没有. 3)普通兄弟选择器(~) 选择该元素后面的所有兄弟节点,在ie7+标准模式,chrome,ff下支持.它和临近兄弟节点选择器的区别就是,前者就选择后面所有的,不要求相邻,但是后面必须是相邻,且选择一
CSS选择器种类、优先级与匹配原理详解
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严 格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选
字体-关于web前端 css 选择器的问题
问题描述 关于web前端 css 选择器的问题 我想请问通用选择器和body选择器的区别是什么? 为什么我用通用选择器定义好默认样式之后,在后续定义样式时很难改变例如 *{ font:12px Arial,"Mcrosoft Yahei",Verdana; } 后边我定义字体大小时,字体大小不会改变,依然是12px.用h1写出来的字也是12px 但是如果将选择器换成body时就不会出现这种情况. body{ font:12px Arial,"Mcrosoft Yahei&qu