选择符

　　选择符是指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. xml是什么，为什么要用xml

    XML概念 众所周知,xml常用语数据存储和传输,文件后缀为 .xml: 它是可扩展标记语言(Extensible Markup Language,简称XML),是一种标记语言. 标记,指计算机所能理 ...

  2. web网站更换新域名

    第一步.绑定新的域名到单独的空间 一般我们都是用的VPS或者不限制建站数量的虚拟主机,尽量的保持原有的IP不变,我这边在老站点同IP的VPS主机下新建一个新域名站点,这样我们可以确保原有的站点IP不变 ...

  3. 基本的maven的命令行命令

    1.创建简单的maven 的web项目 mvn archetype:create 举例:mvn archetype:create -DgroupId=com.demo.app -DartifactId ...

  4. Routing in ASP.NET Core

    .NET-Core Series Server in ASP.NET-Core DI in ASP.NET-Core Routing in ASP.NET-Core Error Handling in ...

  5. 阿里云linux centos 一键部署web环境--图文详解

    一.购买阿里云服务器ECS 1,登录阿里云,选择阿里云服务器ECS 2,创建实例 或 3,选好配置 4,完成配置 注:记住用户名和密码 二.一键配置linux环境 1,下载xshell,安装成功后,建 ...

  6. jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  7. centOS7服务管理与启动流程

    centOS7服务管理与启动流程 centOS7启动流程 systemd简介 unit对象 unit类型 特性 service unit文件格式 service unit file文件通常由三部分组成 ...

  8. 逆向实用干货分享,Hook技术第一讲,之Hook Windows API

    逆向实用干货分享,Hook技术第一讲,之Hook Windows API 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) ...

  9. linux学习笔记：1.基础知识和命令行基本操作

    初次学习linux系统,想在这里记录自己的学习痕迹,如发现有不足之处,希望能指出,谢谢啦,之后的学习是在虚拟机VMware 10下的Red Hat Enterprise linux 6 的操作. 一. ...

  10. Linux入门之常用命令（13） date

    在linux shell编程中,经常用到日期的加减运算 以前都是自己通过expr函数计算,很麻烦 其实date命令本身提供了日期的加减运算 非常方便.例如:得到昨天的时间date +%Y%m%d -- ...