写一个简单的选择器( 方便小项目使用 )

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114

const prefix = getVendorPrefix()     function getVendorPrefix() {       var body = document.body || document.documentElement         var style = body.style         var vendor = ['webkit', 'khtml', 'moz', 'ms', 'o']         var i = 0       while (i < vendor.length) {           if (typeof style[vendor[i] + 'Transition'] === 'string') {               return vendor[i]           }           i++       }   }     class Node {       constructor(selector) {           if (typeof selector === 'string') {               this.init(document.querySelectorAll(selector))           } else {               if (Object.prototype.toString.apply(selector) === '[object NodeList]') this.init(selector)               else this.init([selector])           }       }         init(source) {           const names = Object.getOwnPropertyNames(Array.from(source))           names.forEach(item => {               this[item] = source[item]           })       }         find(selector) {           const target = this[0]           return new Node(target.querySelectorAll(selector))       }         parent(selector) {           let target = this[0]           if (!selector && target.parentNode) return new Node(target.parentNode)           while (target.parentNode) {               if (target.parentNode.classList.contains(selector)) return new Node(target.parentNode)               target = target.parentNode           }           return null       }         each(callback) {           for (let i = 0; i < this.length; i++) {               callback && callback(new Node(this[i]), i)           }           return this       }         style(name, style) {           for (let i = 0; i < this.length; i++) {               let item = this[i], attr = name               item.style[attr] = style               attr = `${prefix}${attr[0].toUpperCase()}${attr.slice(1)}`               if (item.style[attr]) item.style[attr] = style           }           return this       }         css(list = {}) {           for (let attr in list) {               this.style(attr, list[attr])           }           return this       }         transform(x, y, time) {           if (x === undefined && y == undefined) {               const target = this[0]               const attr = prefix ? `${prefix}Transform` : `transform`               const transform = target.style[attr]               const reg = /translate([X|Y])?\((.+)?\)/               const rst = reg.exec(transform)               let x = 0;               let y = 0               if (rst) {                   if (rst[1] === 'X') x = parseFloat(rst[2])                   if (rst[1] === 'Y') y = parseFloat(rst[2])                   if (!rst[1]) {                       const xy = rst[2].split(',')                       x = parseFloat(xy[0])                       y = parseFloat(xy[1])                   }               }               return {x, y}           }           if (time !== null) {               this.style('transition', `all ${time / 1000}s`)               setTimeout(() => {                   this.style('transition', `all 0s`)               }, time)               setTimeout(() => {                   this.style('transform', `translate(${x}px,${y}px)`)               }, 0)           } else {               this.style('transform', `translate(${x}px,${y}px)`)           }           return this       }       }     function $(selector) {       return new Node(selector)   }

　　

?

1 2 3 4 5 6 7 8 9 10 11

const tops = $('.box')      .css({          height: '1000px',          width: '1000px',      })      .find('.top').style('height', '150px')      .css({          height: '1000px',          width: '1000px',      }).parent('box')  console.log(tops)