//测试Chrome版本 40.0.2214.115 m //如有错误欢迎指出 //isPlainObject才是重点 //下面的一些方法前面都做了分析 //如有不懂可以看下我以前对这些方法的说明 var toString={}.toString; var class2type={}; var hasOwn={}.hasOwnProperty; var isArray=Array.isArray; var indexOf=[].indexOf; var each=function(obj,callback){ var value, length=obj.length, i=0, isArray=isArrayLike(obj); //两种情况 //类数组 if(isArray){ for(;i<length;i++){ //若是返回false,则直接跳出 value=callback.call(obj,i,obj[i]); if(value===false){ break; } } }else{ for(i in obj){ value=callback.call(obj,i,obj[i]); if(value===false){ break; } } } return obj; }; //第二个判断是否像数组一样的对象 var isArrayLike=function(obj){ var length=obj.length; //判断为空 if(obj==null){ return false; } if(type(obj)==="object" ||typeof(obj)==="function"){ return false; } return type(obj)==="array" ||length===0 || (length>0 &&(length-1) in obj); }; //第三个判断类型 var type=function(obj){ //排除为空的 if(obj==null){ return obj+""; } //做判断,如果是object或者function类型的时候 //不是执行后面 return typeof obj==="object" ||typeof obj==="function" ? class2type[toString.call(obj)] : typeof obj; }; each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(_,name){ class2type["[object "+name+"]"]=name.toLowerCase(); }); var isFunction=function(obj){ return type(obj); }; var isWindow=function(obj){ return obj!==null && obj.window===window; }; //本次重点来了 //字面量对象判断 //判断之前做一个测试,形如 {} var isPlainObject=function(obj){ //第一判断,如果不是object类型直接返回false //第二判断是否是节点类型 //第三window if(type(obj)!=="object" ||obj.nodeType||isWindow(obj)){ return false; } //当是{}或者是new Object() 时为真,这两种是符合的 只有object对象的原型中有这个方法 if(hasOwn.call(obj.constructor.prototype,"isPrototypeOf")){ return true; } }; console.info(isPlainObject(window)); console.info(isPlainObject({})); console.info(isPlainObject(new Object())); console.info(isPlainObject(new Date())); var d=new Object(); d.namexx='fsafa'; d.xx=function(){}; var c=function(){ this.namess="xxx"; this.fas=function(){}; }; //来看下 hasOwn.call(obj.constructor.prototype,"isPrototypeOf") 这句话到底是什么东东 //首先支hasOwnProperty做个说明 hasOwnProperty: //是用来判断一个对象是否有你给出名称的属性或对象。// //此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。 console.info("c "+c.constructor); console.info("c "+c.constructor.prototype); console.info("d "+d.constructor); console.info("d "+d.constructor.prototype);//[object Object] //这个下面才有isPrototypeOf方法 console.info("{} "+{}.constructor); console.info("{} "+{}.constructor.prototype);//[object Object] console.log(d);//__proto__: Object -->isPrototypeOf: function isPrototypeOf() { [native code] } console.log(new c());//__proto__: c --->__proto__: Object constructor: function ()
相关推荐
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...
本文将深入探讨jQuery中类数组判断的实现原理,并通过代码实现来帮助理解这一概念。 首先,我们要明确什么是类数组对象。类数组对象是指拥有一个`length`属性和索引元素,但不完全符合数组特性的对象。它们通常没有...
深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...
《jquery技术内幕:深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jquery中的实现技巧和...
要将JSON对象转换为适合表单提交的数据格式,我们需要遍历JSON对象的键值对,构建一个字符串形式的URL编码参数。这可以通过遍历JSON对象并使用`$.param()`函数实现。`$.param()`是jQuery内部用于URL编码参数的方法...
在jQuery中,我们可以定义一个构造函数来初始化对象,并在其中设置属性和方法。 4. **原型链和继承**: jQuery对象可以通过原型链实现继承,这样可以复用父类的方法和属性。使用`$.extend()`或`Object.create()`可以...
在处理 JSON(JavaScript Object Notation)数据时,jQuery 提供了一个方便的方法 `jQuery.extend()` 来实现对象的复制。JSON 是一种轻量级的数据交换格式,常用于在前后端之间传输数据。 在提供的示例中,`jQuery....
在JavaScript中,DOM(Document Object Model)元素是网页结构的表示形式,而jQuery对象是对这些DOM元素的封装,提供了一组强大的方法和属性。jQuery对象集合则是一系列jQuery对象的组合,允许我们对一组元素执行...
**jQuery对象和DOM对象** 在JavaScript中,DOM(Document Object Model)对象是浏览器解析HTML或XML文档后生成的...在实际项目中,灵活运用DOM对象和jQuery对象,可以实现高效且易于维护的网页动态效果和用户交互。
jQuery获取当前点击的对象元素(实现代码) [removed][removed] </head> <body> 段落1 段落2 段落3 段落4 段落5 [removed] //获取当前点击的对象 $('p').click( function(){ //this表示当前被...
在jQuery中,可以利用`.show()`, `.hide()`和`.toggle()`等方法实现这一功能。`.show()`用于显示隐藏的元素,`.hide()`则用于隐藏可见元素,`.toggle()`则根据当前状态执行隐藏或显示操作。 ### JQuery图片切换插件...
在jQuery中,我们可以创建一个扩展方法来实现这一功能: ```javascript // 导入jQuery库 var $ = require('jquery'); // 扩展jQuery对象 $.extend({ is360Browser: function() { var userAgent = navigator....
在jQuery中,`$("#id")`是一个选择器,它会尝试找到ID为"id"的元素。即使没有找到匹配的元素,这个表达式也会返回一个jQuery对象,只是其长度(length属性)为0。因此,直接将jQuery对象作为条件判断是无法区分元素...
六、jQuery 的实现原理: 1. 通过 jQuery 原型属性的 `init` 方法来创建对象。`init` 是 jQuery 的构造函数,用于初始化元素集合并返回 jQuery 对象。 2. 对 `init` 方法内 `this` 指向的处理。在 `init` 方法...
**jQuery工作原理详解** jQuery,一个著名的JavaScript库,自2006年发布以来,以其简洁易用的API和强大的功能赢得了开发者们的广泛喜爱。它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本文将...
它们的主要作用是合并多个对象的属性到一个对象中,从而实现对jQuery对象功能的动态扩展。 - **`jQuery.extend`**:用于扩展jQuery对象的静态方法。 - **`jQuery.fn.extend`**:用于扩展jQuery对象的原型方法。 这...
1. **命名空间**:在jQuery对象上添加方法,通常使用`$.fn.extend`来实现,这里的`fn`是jQuery对象的别名,`extend`用于扩展函数。 2. **主函数**:这是插件的核心,包含了插件的主要功能。当我们在jQuery对象上调...
在Web开发中,经常需要在jQuery对象和DOM对象之间进行转换,以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象,它们之间的转换虽然看似简单,但在实际操作中却非常重要。 首先...
在Jquery中,我们可以使用HTML和CSS创建分页布局,然后利用Jquery事件监听来响应用户的点击操作,发送Ajax请求获取新的数据。 分页组件的核心功能包括: 1. 计算总页数:根据服务器返回的总数据条数和每页展示的条...