0

0

jQuery原型属性和原型方法详解_jquery

php中文网

php中文网

发布时间:2016-05-16 15:51:07

|

1975人浏览过

|

来源于php中文网

原创

首先看一下在jquery1.7.1中定义的原型属性和方法有哪些?

首先是constructor属性 

相信熟悉js面向对象部分的开发人员都熟悉,就是用来返回对象属性创建的函数,举个简单的例子:

function Person(){};
    var person=new Person();
    alert(person.constructor); //function Person(){}

我们写继承的时候喜欢把所有的原型属性和方法放在一个单独的对象字面量中,这样就会导致constructor属性与“实际”指向不符合例如:

  function Person(){

    }

    Person.prototype={
      say:function(msg){
        alert(msg); 
      }
    }

    var person=new Person();
    person.say('hello');
    alert(person.constructor); //function Object(){[native code]}

这个时候的指向就会变化因为字面量对象是Object的一个实例自然constructor属性就会执行Object为了纠正这个“错误”通常需要手动修改回来这就是源码,源码中constructor:jQuery的解释

selector属性

selector属性对于使用jquey作为js库来说没有用处它主要是用于开发基于jquery的插件或者改造使用,该属性会返回获取当前的jquery对象的选择器字符串,例如:

var obj=$('div a');
console.log(obj.selector);//'div a'

jquery属性

该属性返回当前使用的jQuery版本

console.log($('body').jquery); //1.7.1

length属性

该属性返回jquery对象包含的元素个数例如:

console.log ( $('body') .length); //1

这4个属性源码如下:

神采PromeAI
神采PromeAI

将涂鸦和照片转化为插画,将线稿转化为完整的上色稿。

下载
  constructor: jQuery,


  // Start with an empty selector
  selector: "",

  // The current version of jQuery being used
  jquery: "1.7.1",

  // The default length of a jQuery object is 0
  length: 0,

size方法

// The number of elements contained in the matched element set
  size: function() {
    return this.length;
  },

该方法就是返回jquery对象的length属性两者而言推荐使用length属性,可以减少不必要的函数调用开销

toArray方法

toArray: function() {
    return slice.call( this, 0 );
  },

把jQuery集合中所有DOM元素恢复成一个数组。

alert($('li').toArray());
[
  • ,
  • ]
  • 首先这里的slice方法在jQuery的构造函数里面已经被保留下来,就是Array的原型方法

    // Save a reference to some core methods
    87 toString = Object.prototype.toString,
    88 hasOwn = Object.prototype.hasOwnProperty,
    89 push = Array.prototype.push,
    90 slice = Array.prototype.slice,
    91 trim = String.prototype.trim,
    92 indexOf = Array.prototype.indexOf,
    
    

    通过call方法实现对象冒充,传入参数0表示不进行截取,由于此方法会返回一个 clean array 也就是纯数组这样就实现了从jquery对象到纯数组的转变,在以后遇到其他类数组形式时也可以采用此方法进行转换例如:

    
    
      
        
        jQuery源码分析-原型属性和方法
      
      
        

    所以学习jqeury源码除了对使用jquery有帮助之外还能学到很多js的使用技巧

    get方法

    // Get the Nth element in the matched element set OR
    // Get the whole matched element set as a clean array
      get: function( num ) {
        return num == null ?
    
          // Return a 'clean' array
          this.toArray() :
    
          // Return just the object
          ( num < 0 ? this[ this.length + num ] : this[ num ] );
      },
    
    

    此方法的作品是从jquery对象的元素数组中找到其中的某一个并且返回js原声node元素对象而不是jquery对象,这是跟eq方法不同的地方 ,此方法接受一个参数如果参数不存则调用toArray方法返回包涵所有元素的数组,如果是大于0的数直接通过下下标的方式获取即可如果是负数则通过与长度相加获得我们写某些方法需要支持正负数下标的一个很好的方法。如果写的不是数字,或者超过当前对象所包含的元素长度会返回undefined.

    以上所述就是本文的全部内容了,希望大家能够喜欢。

    相关专题

    更多
    Word 字间距调整方法汇总
    Word 字间距调整方法汇总

    本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

    2

    2025.12.24

    任务管理器教程
    任务管理器教程

    本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

    2

    2025.12.24

    AppleID格式
    AppleID格式

    本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

    0

    2025.12.24

    csgo视频观看入口合集
    csgo视频观看入口合集

    本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

    29

    2025.12.24

    yandex外贸入口合集
    yandex外贸入口合集

    本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

    58

    2025.12.24

    添加脚注通用方法
    添加脚注通用方法

    本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

    1

    2025.12.24

    重启电脑教程汇总
    重启电脑教程汇总

    本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

    3

    2025.12.24

    纸张尺寸汇总
    纸张尺寸汇总

    本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

    5

    2025.12.24

    Java Spring Boot 微服务实战
    Java Spring Boot 微服务实战

    本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

    1

    2025.12.24

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery 教程
    jQuery 教程

    共42课时 | 3.3万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 9.2万人学习

    tp6+adminlte搭建通用后台
    tp6+adminlte搭建通用后台

    共39课时 | 5.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号