请选择 进入手机版 | 继续访问电脑版

石家庄老站长

点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
 找回密码
 立即注册
查看: 4|回复: 0

基本js模拟jQuery选择器功能和方法

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 7 天前 | 显示全部楼层 |阅读模式
模拟jQuery选择器功能及方法

查看jQuery源代码,您会发现jQuery不是使用new运算符创建新对象,而是从JQuery原型调用init()函数返回新对象。

熟悉jQuery的人应该知道,几乎所有jQuery操作都以$符号开头,并且元素选择器会将操作结果返回到JQuery对象。以下是个人模拟符号。

//模拟jQuery选择器功能

(function  () {

Function  jQuery(selector) {

return  newjquery  . prototype  . init(selector);

}

//init是jQuery原型存在的方法

jquery  . prototype  . init=function(selector){

//DOM选择唯一的js

This.length=
class="token number">0;
        if (selector == null) {
          return this;
        }
        if (typeof selector == 'string' && selector.indexOf('.') != -1) {
          var dom = document.getElementsByClassName(selector.slice(1));
        } else if (typeof selector == 'string' && selector.indexOf("#") != -1) {
          var dom = document.getElementById(selector.slice(1));
        }
        if (selector instanceof HTMLElement || dom.length == undefined) {
          this[0] = dom || selector;
          this.length++;
        } else {
          for (var i = 0; i  dom.length; i++) {
            this[i] = dom[i];
            this.length++;
          }
        }
      }
      jQuery.prototype.css = function (propertyname, value) {
        for (var i = 0; i  this.length; i++) {
          //判断传入的值如果为对象
          if (Object.prototype.toString.call(propertyname) == '[object Object]') {
            //新数组存储对象的键和值
            var arr = []
            //遍历对象键和值存入新数组
            for (key in propertyname) {
              // console.log(i);
              arr.push(key)
              arr.push(propertyname[key])
            }
            //遍历数组给目标改变样式
            for (var j = 0; j  arr.length; j++) {
              this[i].style[arr[j]] = arr[j + 1];
            }
          }
          //判断传入的值是两个值,设置css属性
          if (arguments.length == 2) {
            this[i].style[arguments[0]] = arguments[1]
          }
          //判断传入的值是一个值表示返回 CSS 属性
          if (arguments.length == 1) {
            return window.getComputedStyle(this[i]).getPropertyValue(arguments[0])
            // return window.getComputedStyle(this[i]).arguments[ 0];
          }
        }
        return this;
      }
      //get实现
      jQuery.prototype.get = function (num) {
        //参数为空
        if (num == null) {
          //返回一个真数组
          return [].slice.call(this, 0)
        } else {
          if (num >= 0) {
            return this[num];
          } else {
            return this[this.length + num]
          }
        }
      }
      //eq实现
      jQuery.prototype.eq = function (num) {
        var dom = num != null ? (num >= 0 ? this[num] : this[num + this.length]) : null
        return jQuery(dom)
      }
      //add实现
      jQuery.prototype.add = function (adddom) {
        if (adddom instanceof HTMLElement) {
          this[this.length] = adddom;
          this.length++;
          return this;
        }
        if (typeof adddom == 'string') {
          var arr = adddom.split(',')
          for (var j = 0; j  arr.length; j++) {
            this[this.length] = jQuery(arr[j])[0];
            this.length++;
          }
          return this;
        }
        if (adddom.__proto__.constructor instanceof Object) {
          this[this.length] = adddom[0];
          this.length++;
          return this;
        }
      }
      //end实现
      jQuery.prototype.end = function () {
        this[this.length] = this[0].parentNode
        this.length++;
        return jQuery(this[this.length - 1]);
      }
      //init对象的原型指向jQuery原型
      jQuery.prototype.init.prototype = jQuery.prototype
      window.$ = window.jQuery = jQuery;
    })()
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|无图版|手机版|小黑屋|石家庄@IT精英团

GMT+8, 2021-4-13 19:01 , Processed in 0.062852 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2021 Comsenz Inc.

快速回复 返回顶部 返回列表