当前位置:  编程技术>WEB前端
本页文章导读:
    ▪Jquery真的不难~第五回 JQ中的遍历(遍历中的性能知识点)      回到目录上一回主要说的是JQ中的几个主要的事件,文章的最后还介绍了匿名函数的使用,恩,今天主要来看一下JQ中的遍历,就是在JQ中进行循环操作以及在遍历时要注意的地方。前言要.........
    ▪理解hasOwnProperty()的作用       hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。格式如下.........
    ▪javascript __proto___ prototype和Function原代码狂想      ----我以为的Function----1 function Function ( ) {2 this.prototype = new this() ; /*这就导致了所有的函数的原型都是对象;如:alert(typeof(Array.prototype));输出:object */3 this.prototype.constructor = this ; // 由.........

[1]Jquery真的不难~第五回 JQ中的遍历(遍历中的性能知识点)
    来源:    发布时间: 2013-11-06

回到目录

上一回主要说的是JQ中的几个主要的事件,文章的最后还介绍了匿名函数的使用,恩,今天主要来看一下JQ中的遍历,就是在JQ中进行循环操作以及在遍历时要注意的地方。

前言

要讲遍历就要说数组,你不可以对一个单独的变量进行遍历吧,呵呵,数组是一些各种类型变量的集合,在JS中一个数组,你完全可以把数字与字符混合在一起,这是合法的。

JS中的数组

数组的定义

var arr = [1, 2, 3, 4, "one", "two", "three", "four"]; //一维数组
var props = [["拳头", "刀", "枪"], ["boxing", "knife ", "gun"]]; //二维数组

调用

console.log(arr[0]);
console.log(props[0][0]);

JS对数组的遍历

for (var i in arr) {//可能性不高
console.log(arr[i]);
}

for (var i = 0; i < arr.length; i++) { //性能差的
console.log(arr[i]);
}

for (var i = 0, max = arr.length; i < max; i++) {//性能好的
console.log(arr[i]);
}

JQ中的集合

对于在JQ中用选择器选择对象后,它将返回一个JQ对象,这个对象可以是一个元素,也可能是一个集合,一般地,我们用$("#ID")返回的是一个对象,因为ID在页面中正常情况下是唯一的,而使用$(".className"),Find()等返回一般是个集合,或者说是个JQ对象数组,看代码:

<script>
$(function () {
//返回JQ对象集合
var jqArr = $("#menu_title").find("dt");
console.log("menu_title下的dt元素数量为:" + jqArr.size());
console.log("menu_title下的第一个dt的内容为:" + jqArr[0].html()); //会出错,因为jqArr[0]已经不是JQ对象了
console.log("menu_title下的第一个dt的内容为:" + $(jqArr[0]).html());//正确,因为加上$()后,它将被转化为JQ对象
});
</script>
<dl id="menu_title">
<dt>人</dt>
<dd>
一种高级动物</dd>
<dt>狗</dt>
<dd>
人类的朋友</dd>
<dt>猫</dt>
<dd>
猫科动物的祖先</dd>
</dl>

结果为:

JQ对集合的遍历

jqArr.each(function (i, o) {
console.log("第" + i + "号元素的内容是:" + $(o).html());
});

结果为:

从结果中我们可以看到,$.each(function(i,o){})方法中的i表示JQ数组的索引值,而o表示JQ数组的值,而o加上$()变成JQ对象之后,使用html()这个方法可以输出o这个对象里的内容;从图中还可以看到JQ产生的数组的索引也是从0开始的。

总结

JS与JQ数组(集合)的相关知识就介绍到这里了,对于它们的使用还需要各位在实现工作中去体现,另外,在写代码时,多站在系统层次上去感觉一下,去用心去体会,你可能会有另外的收获!

回到目录

 

本文链接


    
[2]理解hasOwnProperty()的作用
    来源: 互联网  发布时间: 2013-11-06
hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。格式如下: 
Js代码 
 
   1. object.hasOwnProperty(proName);  
object.hasOwnProperty(proName); 
 
判断proName的名称是不是object对象的一个属性或对象。 
 
举例如下: 
Js代码: 
   1. var bStr = "Test String".hasOwnProperty("split");    // 得到false, 因为不能检测原型链中的属性  
   2. var bStr1 = String.prototype.hasOwnProperty("split"); //String对象的原型上本来就有这个属性,自然返回true  
   3. var bObj = ({fnTest:function(){}}).hasOwnProperty("fnTest"); // 返回true,因为不是检测原型中的属性  
 
var bStr = "Test String".hasOwnProperty("split");    // 得到false, 因为不能检测原型链中的属性 
var bStr1 = String.prototype.hasOwnProperty("split"); //String对象的原型上本来就有这个属性,自然返回true 
var bObj = ({fnTest:function(){}}).hasOwnProperty("fnTest"); // 返回true,因为不是检测原型中的属性 
 
http://www.w3school.com.cn/js/as_js_referencetypes.asp 
Object 对象 
Object 对象自身用处不大,不过在了解其他类之前,还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中,所以理解了 Object 对象,就可以更好地理解其他对象。 
Object 对象具有下列属性: 
 
constructor 
    对创建对象的函数的引用(指针)。对于 Object 对象,该指针指向原始的 Object() 函数。 
Prototype 
    对该对象的对象原型的引用。对于所有的对象,它默认返回 Object 对象的一个实例。 
 
Object 对象还具有几个方法: 
hasOwnProperty(property) 
    判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,o.hasOwnProperty("name")) 
IsPrototypeOf(object) 
    判断该对象是否为另一个对象的原型。 
PropertyIsEnumerable 
    判断给定的属性是否可以用 for...in 语句进行枚举。 
ToString() 
    返回对象的原始字符串表示。对于 Object 对象,ECMA-262 没有定义这个值,所以不同的 ECMAScript 实现具有不同的值。 
ValueOf() 
    返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。 
原文链接:http://www.software8.co/wzjs/Javascript/2727.html
作者:JiaLiSOFTWARE 发表于2013-1-17 13:15:50 原文链接
阅读:44 评论:0 查看评论

    
[3]javascript __proto___ prototype和Function原代码狂想
    来源:    发布时间: 2013-11-06

----我以为的Function----

1 function Function ( ) {
2 this.prototype = new this() ; /*这就导致了所有的函数的原型都是对象;如:alert(typeof(Array.prototype));输出:object */
3 this.prototype.constructor = this ; // 由上一条推想可得
4 //... ...
5 //[native code]
6 //... ...
7 }

所有的函数:

预定义:
1 function Function () { [native code] }
2 function Object () { [native code] } // Global、Arguments、Math和JSON是Object构建的;
3 function Array () { [native code] }
4 function Date () { [native code] }
5 function String () { [native code] }
6 function Boolean () { [native code] }
7 function Number () { [native code] }
8 function RegExp () { [native code] }
自定义:
1 function Fn () { /*... ...*/ }

 

所谓的狂想

无论是预定义的(包括Function本身)还是自定义的函数都是由Function new出来的。我们知道,函数new出来的都是对象,那么Function是函数,它new出来的东西(函数)自然也会是对象,所以函数也是对象。

Function new出来的对象是函数,叫“函数对象”(简称“函数”);这跟

Array new出来的对象叫“数组对象”(简称“数组”);

Object new出来的对象是“对象对象”(简称“对象”)是一样的道理。

传说的癫疯

__proto__(血缘 或说DNA):

当用new操作符构造对象时,会在对象和构造函数之间创建__proto__链,该链应该是对外不可见的 (Firefox、chrome可以让我们访问到,但并不建议这样做)。它的引用是恒定的:对象.__proto__ = 该对象构造函数.prototype;但它的值是可变的,这明显取决于:该对象构造函数.prototype的值(废话!)。

prototype:

所有的对象都有__proto__,但只有函数对象(默认)拥有prototype,非函数对象(默认)没有也没必要拥有prototype,这是prototype本身的职能所决定的:Javascript利用prototype实现扩展、共享和继承。

__proto__链、prototype链图:

关于null:注意没有,指向null的箭头有一半是黑色的,这个箭头表示:Object.prototype.__proto__;

为什么是null?

如果根据我猜想的Function构造Object函数,那么:Object.prototype = new Object();

1 alert(Object.prototype)//输出:[ obje Object ]

那么应该是这样的才对啊:Object.prototype.__proto__ = Object.prototype;

看出问题没有?!如果是这样的话对象检索不存在的属性在到达Object的时候就会掉入死循环(专业点叫递归是么,不好意思美工出身):

1 Object.prototype.__proto__=Object.prototype;
2 var obj={};
3 alert(obj.say)

chrome javascript 控制台 :

Uncaught Error: Cyclic __proto__ value

 

所以我的猜想是:Object.prototype.__proto__ = null 是特定定义的:

1 alert(Object.prototype.__proto__);
2 //firfox 和 chrome 输出:null
3 //IE9输出:undefined

无论是null还是undefined目的都是一样的,就是为了终止检索。

后遗症:

利用Function.prototype或者Object.prototype可以将方法或属性分享给所有的对像(不仅仅是“对象对象”哦)。原理,看图!

注意:函数对象检索自身属性时是不会检索自身prototype对象的属性的(这有点像废话),无人问津,它的prototype只有由它构建的对象在检索自身属性无果时才会去访问:

1 Array.prototype.selfCheck = "Are you sure?";
2 alert(Array.selfCheck);// 输出:undefined; 自定义的函数亦是如此

但Function和Object会有所不同:

Function.prototype.selfCheck = "Yes!"
alert(Function.selfCheck) ; // 输出:"Yes!",原因如图:Function __proto__ Function
Object.prototype.selfCheck = "Yes!"
alert(Object.selfCheck);// 输出:"Yes!",原因如图:Object __proto__ Function,Function.prototype是Object

更有意思的:

1 Function.prototype.sayHello="Hi,F";
2 Object.prototype.sayHello="Hi,O";
3 alert(Object.sayHello);//输出:Hi.F

追本溯源:(再说函数也是对象!)

把“函数对象”比作受惊L,那么Function就像是LZ,Function内的“this.prototype = new this()”就像是LZ内的一根JZ啊,受惊L同时拥有LZ和JZ的DNA,“函数对象”就这样同时具备了函数和对象的特性啊!!!

最后说一下constructor属性:

1
    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
c/c++开源软件 iis7站长之家
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3