选择符

　　选择符是指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. 【二】刚学Python的几道简单练习题

    python交友娱乐会所:613176398 1.使用while循环输入 1 2 3 4 5 6     8 9 10 2.求1-100的所有数的和 3.输出 1-100 内的所有奇数 4.输出 1- ...

  2. CSS3的颜色渐变效果

    在 animate.css寻找自己想要的动态效果,看到标题Animate.css和按钮Animate it的颜色在逐渐变化,觉得蛮有趣的,把控制变化的相关代码扒了下来,自己分析实现一波. 一开始认为使 ...

  3. UVW源码漫谈（番外篇）—— Emitter

    这两天天气凉了,苏州这边连续好几天都是淅淅沥沥的下着小雨,今天天气还稍微好点.前两天早上起来突然就感冒了,当天就用了一卷纸,好在年轻扛得住,第二天就跟没事人似的.在这里提醒大家一下,天气凉了,睡凉席的 ...

  4. php多态

    多态性是指相同的操作或函数.过程可作用于多种类型的对象上并获得不同的结果.不同的对象,收到同一消息将可以产生不同的结果,这种现象称为多态性. 多态性允许每个对象以适合自身的方式去响应共同的消息.多态性 ...

  5. PHP实现页面静态化

    1.通过buffer来实现   需要用file_put_contents ob_get_clean()等内置函数   ob_start (); include "filterpost.htm ...

  6. [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

    canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...

  7. AngularJS -- Bootstrap(启动器)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...

  8. POJ 3923 Ugly Windows（——考察思维缜密性的模拟题）

    题目链接: http://poj.org/problem?id=3923 题意描述: 输入一个n*m的屏幕 该屏幕内有至少一个对话框(每个对话框都有对应的字母表示) 判断并输出该屏幕内处于最表层的对话 ...

  9. Python自学笔记-面向对象相关（Mr seven）

    ---恢复内容开始--- http://www.cnblogs.com/wupeiqi/articles/5433893.html 类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通 ...

  10. 编译LNMP之nginx+php-fpm

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...