选择符

　　选择符是指CSS样式规则最左边的部分,例如 p{}，#id{}，.class{}，p.class{} 等等

　　总共可以分为四大类：

　　并联选择器 => 逗号 => $('div,span')

　　简单选择器 => ID,CLASS,TAG,ATTR,* => $('#id')，$('.class')，$('div')，$('[attr]')，$('*')

　　关系选择器 => ' '、'>'、'+'、'~' => $('div span')、$('div>span')、$('div+div')、$('div~div')

　　伪类 => 动作伪类、目标伪类、语言伪类、状态伪类、结构伪类、取反伪类

　　关系操作符

　　关系操作符不可单独存在，必须在两个TAG之间(引擎可能允许放在开始，默认头部为*)。

　　后代选择器：通常在引擎中构建一个getAll的函数，在传入一个元素后，取得元素所有的后代元素。注意IE下使用document.all与document.getElementByTagName可能有将注释混入结果集。

　　亲子选择器：如果不打算兼容XML，直接用children就可以了。IE下也可能会有混入注释节点的问题。

    function getChildren(el) {

        // 该方法显示子节点数量

        if (el.childElementCount) {

            return [].slice.call(el.children);

        }

        var ret = [];

        // 用nextSibling遍历

        for (var node = el.firstchild; node; node = node.nextSibling) {

            // 只弹入元素节点

            node.nodeType == 1 && ret.push(node);

        }

        return ret;

    }

　　相邻选择器：取得当前元素向右的第一个元素节点

    function getNext(el) {

        // 有此方法直接用 返回下一个元素节点

        if ('nextElementSibling' in el) {

            return el.nextElementSibling;

        }

        // nextSibling会将回车当成#text 所以要进行判断

        while (el = el.nextSibling) {

            if (el.nodeType === 1) {

                return el;

            }

        }

    }

　　兄长选择器：取得右边所有同级元素节点

　　伪类

　　

　　动作伪类：包括:visited,:link,:hover,:active,:focus

　　目标伪类：即target伪类，指id或者name属性与URL中#后面的部分匹配。

　　比如说：有<a href="#div">to div</a>与<div id='div'>got it</div>这个div就是target

    'target': function(elem) {

        // 获取所有链接

        var hash = window.location && window.location.hash;

        // 返回与id匹配的hash值

        return hash && hash.slice(1) === elem.id;

    }

　　语言伪类：<body lang='...'>内容</body> 用的少，不写了，这玩意还有继承性

　　状态伪类：标记一个元素当前状态，由 :checked、:enabled、:disabled、:indeterminate组成，可以通过元素checked,disabled,indeterminate判定。

　　话说这个:indeterminate啊，是checkbox的一个属性，可以console.dir('checkbox节点')查看，默认为false。然后只能通过js代码将其设为true，效果就是checkbox复选框默认中间加了个减号，点击后恢复正常的checkbox，没什么卵用。

　　结构伪类：分为根伪类、子元素过滤伪类、空伪类三种。根伪类由它在文档的位置判定，子元素过滤伪类根据它在其父亲所有孩子的位置或标签类型判定，空伪类是根据它孩子的个数判定。

　　:root 伪类用于选取根元素，HTML文档通常是html元素。

　　:nth-child 是所有子元素过滤伪类的蓝本，带有参数，可能包含字母n或数字。

　　:empty 用于选取那些不包含任何元素节点、文本节点、CDATA节点的元素

　　待续...

JS框架设计读书笔记之-选择器引擎01的更多相关文章

  1. JS框架设计读书笔记之-选择器引擎02

    选择器引擎涉及相关概念 概念 以Sizzle的主函数声明为例,来说明引擎的相关概念. function Sizzle(selector, context, results, seed) { //... ...

  2. JS框架设计读书笔记之-动画

    基础概念 CSS样式可分为两种,一种值接近无限的集合(color,width),一种值只有几种(display),可以进行计算的样式,产生了动画效果.\ 1. 动画的第一步是获得元素的精确样式值. 2 ...

  3. JS框架设计读书笔记之-节点模块

    节点的创建 浏览器提供了多种手段创建API,从流行程度依次是document.createElement.innerHTML.insertAdjacentHTML.createContextualFr ...

  4. JS框架设计读书笔记之-核心模块

    随笔记录一下读书心得 1. 框架模块-核心模块 该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码. 模块的功能主要是:对象扩展.数组化.类型判定.事件绑定和解绑.无冲突处理.模块加载 ...

  5. JS框架设计读书笔记之-小知识

    这一篇写一点小知识 JS中0.1+0.2为什么不等于0.3? 关于这个问题之前也很疑虑,老师也只是笼统的讲这是JS的语言问题,但是内部具体的情况却没有讲,看了书才发现原理如此简单. 简单来讲,计算机识 ...

  6. JS框架设计读书笔记之-异步

    setTimeout/setInterval 1. 如果回调执行时间大于间隔时间,真正的间隔时间会大一些. 2. 存在一个最小的时间间隔,即使seTimeout(fn,0),在IE6-IE8中大概为1 ...

  7. JS框架设计读书笔记之-函数

    这次写一些函数 1.模拟Object.keys方法 Object.keys = Object.keys || function(obj){ var a = []; // a[0],a[1]...分别赋 ...

  8. javascript框架设计(读书笔记)

    我觉得多看几本进阶的书 与其十本书读一遍,不如一本书读十遍 读书的启示: 读好书(看推荐) 精读(重复看) 能读厚书(javascript权威指南) Object.keys Object.keys=O ...

  9. js框架设计1.1命名空间笔记

    借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...

随机推荐

  1. mysql5.6.24的安装与简单使用

    1, 下载绿色版Mysql5.6.24 http://dlsw.baidu.com/sw-search-sp/soft/ea/12585/mysql-5.6.24-win32.1432006610.z ...

  2. Spring注解@Qualifier

    在使用Spring框架中@Autowired标签时默认情况下使用 @Autowired 注释进行自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean ...

  3. 框架应用：Spring framework (四) - 事务管理

    事务控制 事务是什么?事务控制? 事务这个词最早是在数据库中进行应用,讲的用户定义的一个数据库操作序列,这些操作要么全做要么全不做,是一个不可分割的工作单位. 事务的管理是指一个事务的开启,内容添加, ...

  4. Node.js博客搭建

    Node.js 博客搭建 一. 学习需求 Node 的安装运行 会安装node,搭建node环境 会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系 ...

  5. 简易RPC框架-私有协议栈

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  6. Java平台与.Net平台在服务器端前景预测

    如果是服务器端, 毫无疑问C#是很难跟Java拼的. 就算将来,微软逆袭的机会也很渺茫了.就技术的先进性来说, Java平台是不如.Net平台, 但是, 程序员对于两个平台,直接接触的基本以语言为主, ...

  7. 基于 Electron 的爬虫框架 Nightmare

    作者:William 本文为原创文章,转载请注明作者及出处 Electron 可以让你使用纯 JavaScript 调用 Chrome 丰富的原生的接口来创造桌面应用.你可以把它看作一个专注于桌面应用 ...

  8. oracle pl/sql 包

    包用于在逻辑上组合过程和函数,它由包规范和包体两部分组成.1).我们可以使用create package命令来创建包,如:i.创建一个包sp_packageii.声明该包有一个过程update_sal ...

  9. 第一个asp.net MVC5+ExtJS6入门案例项目

    最近在学习asp.net MVC,结合前段时间学习的ExtJS,做了一个入门示例.不过还有一个json日期显示的问题没有解决. [思路] 1.先搭建一个asp.net MVC项目. 2.将MVC项目的 ...

  10. The Super Powers

    The Super Powers Time Limit: 1000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu [Subm ...