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 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 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 文件夹删除、php清除缓存程序
2009/08/25 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
PDO::exec讲解
2019/01/28 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
python encode和decode的妙用
2009/09/02 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
办公室人员先进事迹
2014/01/27 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
五一口号
2014/06/19 职场文书
学校教师读书活动总结
2014/07/08 职场文书
商场消防安全责任书
2014/07/29 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
个人廉洁自律总结
2015/03/06 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
活动新闻稿范文
2015/07/17 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server