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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
在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
一个用php3编写的简单计数器
2006/10/09 PHP
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
初中政治教学反思
2014/01/17 职场文书
中药学自荐信
2014/06/15 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书