zoukankan      html  css  js  c++  java
  • JS框架设计读书笔记之-选择器引擎01

    选择符

      选择符是指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节点的元素

      待续...

    老子要日穿V8引擎
  • 相关阅读:
    CentOS yum 安装svn1.8
    js 替换掉汉字 和替换非汉字 比较时间JS
    PhpStorm 10 破解
    html中link的用法
    CSS3:nth-child()伪类选择器
    提示的小三角
    css 高度自适应
    <input type="file" />浏览时只显示指定文件类型
    MySQL查询表内重复记录
    扒站小工具
  • 原文地址:https://www.cnblogs.com/QH-Jimmy/p/6437702.html
Copyright © 2011-2022 走看看