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

首先看一下在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个属性源码如下：

  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.

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

赞 (0)

相关推荐

  • jQuery学习笔记之jQuery原型属性和方法

    复制代码 代码如下: jQuery.fn = jQuery.prototype = {     constructor: jQuery,     init: function( selector, context, rootjQuery ) { },     selector: "",            jquery: "1.7.2",            length: 0,            size: function() {},    toArra

  • jQuery ajax的功能实现方法详解

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦. 我们只定义一个ajax方法,他可以简单的get,post,jsonp请求就可以啦~~ var ajax = function () { // 做一些初始化,定义一些私有函数等 return function () { //

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • jquery ajax局部加载方法详解(实现代码)

    在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

  • Vue父子组件属性传递实现方法详解

    目录 前言 组件之间属性的传递 父组件传递属性给子组件 子组件传递属性给父组件 前言 这节我们主要从案例出发,用Vue3的写法写父子组件之间的属性传递. 组件之间属性的传递 我们定义一个Rate组件,具有以下功能: 接收来自外部组件传入的参数,starCount代表星星个数.color代表星星颜色. 需要根据传入星星的个数,展示对应数量的星星. 父组件传递属性给子组件 那么在编写组件的时候,我们需要注意什么? 我们可以使用defineProps来规范传递数据的格式.可以结合withDefault

  • JS原型对象的创建方法详解

    本文实例讲述了JS原型对象的创建方法.分享给大家供大家参考,具体如下: 使用js的prototype属性的时候,创建对象的方式是存在优先级的 1.如果方法中存在构造方法就先使用方法中的构造方法 2.如果方法中不存在构造方法则继续查找prototype原型的构造方法 <html> <head> <TITLE>class_obj_js_class</TITLE> <script language=javaScript> function a(name

  • jquery里的each使用方法详解

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. 这个JQUERY里的核心代码 复制代码

  • java中读写Properties属性文件公用方法详解

    前言 大家都知道Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置文件中很多变量是经常改变的,这样做也是为了方便用户,让用户能够脱离程序本身去修改相关的变量设置.像Python支持的配置文件是.ini文件,同样,它也有自己读取配置文件的类ConfigParse,方便程序员或用户通过该类的方法来修改.ini配置文件.在Java中,其配置文件常为.properties文件,格式为文本文件,

  • python实现对象列表根据某个属性排序的方法详解

    本文实例讲述了python实现对象列表根据某个属性排序的方法.分享给大家供大家参考,具体如下: 对于一个已有的python list, 里面的内容是一些对象,这些对象有一些相同的属性值, 在一些特定的情况下,需要自己选择特定的排序,也就是根据某一个具体的属性来排序,在网上找了下资料,一般来说有两种方法,但从根本上来说,还是调用了list.sort 方法来实现.下面是简单的测试代码片段: #coding:utf-8 class Person: def __init__(self,name,age,

  • jQuery Validation PlugIn的使用方法详解

    一.用前必备  官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/  API: http://jquery.bassistance.de/api-browser/plugins.html  当前版本:1.5.5  需要JQuery版本:1.2.6+, 兼容 1.3.2  <script src="../js/jquery.js" type="text/javascript"&g

  • jQuery验证插件validate使用方法详解

    jQuery验证插件validate使用方法详解

    1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

随机推荐