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


Posted in Javascript onJuly 07, 2015

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

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

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

首先是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个属性源码如下:

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());
[<li id="foo">, <li id="bar">]

首先这里的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对象到纯数组的转变,在以后遇到其他类数组形式时也可以采用此方法进行转换例如:

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'/>
    <title>jQuery源码分析-原型属性和方法</title>
  </head>
  <body>
    <div>
    </div>
    <div></div>   
  </body>
  <script src='jquery-1.7.1.js'></script>
  <script>
  var divs=document.getElementsByTagName('div');
  console.log(divs); //[div, div]
  alert(divs instanceof Array); //fasle

  alert(Array.prototype.slice.call(divs,0) instanceof Array); //true
  </script>
</html>

所以学习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.

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

Javascript 相关文章推荐
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
在JavaScript中访问字符串的子串
Jul 07 #Javascript
jQuery.each使用详解
Jul 07 #Javascript
JavaScript中字符串拼接的基本方法
Jul 07 #Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 #Javascript
浅谈JavaScript中运算符的优先级
Jul 07 #Javascript
浏览器中url存储的JavaScript实现
Jul 07 #Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 #Javascript
You might like
提升PHP执行速度全攻略
2006/10/09 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php程序内部post数据的方法
2015/03/31 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
历史专业大学生职业生涯规划书
2014/03/13 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
不错的求职信范文
2014/07/20 职场文书
公证委托书格式
2014/09/13 职场文书
学术会议邀请函
2015/01/30 职场文书
2015年采购工作总结
2015/04/10 职场文书
同学聚会感言一句话
2015/07/30 职场文书
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python