选择符

　　选择符是指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. Extjs2.0 desktop 动态创建桌面图标和开始菜单

    这几天一直纠结Extjs desktop怎么动态读取数据,用Ext.net已经实现但是不灵活.Ext.net做出来的桌面在窗口关闭后只是隐藏该窗口,并没有释放,对于我这种js菜鸟来说,改那一坨代码要人 ...

  2. 深入浅出数据结构C语言版（20）——快速排序

    正如上一篇博文所说,今天我们来讨论一下所谓的"高级排序"--快速排序.首先声明,快速排序是一个典型而又"简单"的分治的递归算法. 递归的威力我们在介绍插入排序时 ...

  3. 导出含有图片的Java项目，图片不显示

    项目的一些图片资源文件在导出成JAR包后,无法正确读取虽然Java项目还是可以运行,但原来的图片资源全不见了,于是你可以打开JAR包看看里面的东西,确实是有图片在里面,就是无法读取. 其实是因为我们在 ...

  4. 双击打开Jar文件

    最近发现个诡异的问题,java环境变量明明配好了.但是双击xx.jar文件,就是不能直接打开运行. 先想到了第一个解决办法: 运行cmd.exe,cd到jar目录,执行 javaw -jar xxx. ...

  5. [UIKit学习]00.关于前置知识（storyboard，UIViewController，类扩展，项目属性）

    storyboard文件的认识 用来描述软件界面 默认情况下,程序一启动就会加载Main.storyboard 加载storyboard时,会首先创建和显示箭头所指的控制器界面 IBAction和IB ...

  6. Linux 文件查找

    在Linux系统的查找相关的命令: which 查看可执行文件的位置 whereis 查看文件的位置 locate 配合数据库查看文件位置 find 实际搜寻硬盘查询文件名称 whereis wher ...

  7. GitHub使用（二） - 新建文件夹

    1.首先打开我们已经建好的仓库 "test.github.com" 页面,可以看到如下图页面,找到“新建文件Create new file”按钮并点击.

  8. 第4章 同步控制 Synchronization ----信号量（Semaphore）

    许多文件中都会提到 semaphores(信号量),因为在电脑科学中它是最具历史的同步机制.它可以让你陷入理论的泥淖之中,教授们则喜欢问你一些有关于信号量的疑难杂 症.你可能不容易找到一些关于 sem ...

  9. Beautiful Dream hdu3418 （直接做或二分）

    Beautiful Dream Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  10. 利用百度地图WEB服务APIGeoCoding API批量地址解析

    Geocoding API包括地址解析和逆地址解析功能: 地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.3 ...