jQuery使用类型

JavaScripe提供了一些内置的数据类型。除了这些,这个文档中的虚拟类型如Selectors,增强的伪类型如Events和所有你希望知道的关于函数的一切。

你应该试着将下面的拷贝到你的浏览器的JavaScript控制台(Chrome, Safari 的开发中工具, IE 8+) 或者firefox的firebug控制台,来实验其中的例子。

当一个例子中提到这个类型的默认值是布尔值时,可以在布尔值的上下文使用这个类型,就可以很容易知道结果。

var x = "";
if ( x ) {
console.log( "x defaulted to true" );
} else {
console.log( "x defaulted to false" );
}

这个例子中,x defaulted to false会被输出。

让例子简短一点,!操作和!!操作可以是用来显示布尔值的上下文:

var x = "";
!x // true
!!x // false (Double negation: Since "not (empty string)" is true, negating that makes it false)

String

"I'm a String in JavaScript!"
'So am I!'

在JavaScript中字符串是不可变对象,包含空,一个或多个字符。

一个字符串的类型是string

typeof "some string"; // "string"

Quoting

可以被使用单个或双个引号定义的字符串。你可以在双引号中嵌套单引号,反之亦然。在双引号中使用双引号,被嵌套的引号需要被使用反斜杠转义。

"You make 'me' sad."
'Holy "cranking" moses!'
"<a href=\"home\">Home</a>"

Built-in Methods

在JavaScript中字符串有一些内置的方法来操作字符串,尽管结果总会是新的字符串,或者其他,如.split返回一个数组:

  
  
"hello".charAt( 0 ) // "h"
"hello".toUpperCase() // "HELLO"
"Hello".toLowerCase() // "hello"
"hello".replace( /e|o/g, "x" ) // "hxllx"
"1,2,3".split( "," ) // [ "1", "2", "3" ]

Length Property

所有的字符串都有length的属性

"Hello".length // 5
"".length // 0

Boolean Default

一个空的字符串默认值是false

!"" // true
!!"" // false
!"hello" // false
!"true" // false
!new Boolean( false ) // false

Number

12
3.543
在JavaScript中数字是双精度的 64-bit格式的IEEE 754值。他们是不可变的,和字符串一样。在c基础语言中所有常用的操作符,也可以和该数字使用(+, -, *, /, %, =, +=, -=, *=, /=, ++, --).

数字的类型是number

typeof 12 // "number"
typeof 3.543 // "number"

Boolean Default

如果一个数字是0默认值是false

!0 // true
!!0 // false
!1 // false
!-1 // false

由于数字的实现是双精度的,下面的结果没有错误:

0.1 + 0.2 // 0.30000000000000004

Math

JavaScript在Math对象中提供可以和numbers使用的工具:

Math.PI // 3.141592653589793
Math.cos( Math.PI ) // -1

Parsing Numbers

parseInt 和 parseFloat用来解析字符串为数字。如果进制(base)没有被指定,使用隐式转换:

parseInt( "123" ) = 123 // (隐式十进制)
parseInt( "010" ) = 8 // (隐式八进制)
parseInt( "0xCAFE" ) = 51966 // (隐式十六进制)
parseInt( "010", 10 ) = 10 // (显示十进制)
parseInt( "11", 2 ) = 3 // (显示二进制)
parseFloat( "10.10" ) = 10.1

Numbers to Strings

当给字符串追加数字时,结果会是字符串。操作符是一样的,所以要注意:如果你希望先运算数字然后把他们追加到字符串上,使用圆括号包围:

"" + 1 + 2; // "12"
"" + ( 1 + 2 ); // "3"
"" + 0.0000001; // "1e-7"
parseInt( 0.0000001 ); // 1 (!)

或者你使用Javascript提供的String 类,用来作为字符串解析值:
String( 1 ) + String( 2 ); // "12"
String( 1 + 2 ); // "3"

NaN and Infinity

解析一些不是数字东西会导致非数值(NaN),isNaN可以用来检测这些例子:

Parsing something that isn't a number results in NaN. isNaN helps to detect those cases:

parseInt( "hello", 10 ) // NaN
isNaN( parseInt("hello", 10) ) // true

除零操作会导致无穷大

1 / 0 // Infinity

NaN和Infinity的类型是number

typeof NaN // "number"
typeof Infinity // "number"

注意NaN 奇怪的比较方式:

NaN == NaN // false (!)

但是:

Infinity == Infinity // true

Integer

integer是普通的数字类型,但是无论何时被提到,表明没有浮点数(non-floating-point)的值是希望得到的.

Float

float是普通的数字类型,和integer一样,但是无论何时被提到,表明浮点数的值(floating-point)是希望得到的.

Boolean

在Javascript中的布尔值可以是true也可以是false:

if ( true ) console.log( "always!" );
if ( false ) console.log( "never!" );

Object

在Javascript中的任何东西都是对象,尽管一些更加的objective,最简便的方法创建一个对象是object literal:

var x = {};
var y = {
name: "Pete",
age: 15
};
对象的类型是object

typeof {} // "object"

Dot Notation

你可以使用dot notation类读取和写入对象的属性:

y.name // "Pete"
y.age // 15
x.name = y.name + " Pan" // "Pete Pan"
x.age = y.age + 1 // 16

Array Notation

或者你可以使用array notation来读取和写入属性,这个允许你动态的选择属性:

var operations = {
increase: "++",
decrease: "--"
};
var operation = "increase";
operations[ operation ] // "++"
operations[ "multiply" ] = "*"; // "*"

Iteration

使用for-in-loop可以简便的迭代对象:

var obj = {
name: "Pete",
age: 15
};
for( key in obj ) {
alert( "key is " + [ key ] + ", value is " + obj[ key ] );
}
注意for-in-loop继承Object.prototype会被破坏(查看 Object.prototype is verboten),因此当使用其他类库的使用要注意.
jQuery提供了一个通用的each-function来迭代对象的属性,以及数组的元素:
jQuery.each( obj, function( key, value ) {
console.log( "key", key, "value", value );
});

缺点是回调函数会在每一个值的上下文中被调用,因此如果适合使用时,你会失去你自己的对象的上下文。更多见下面的Functions.

Boolean default

一个对象不管有没有属性值,默认不会是false

!{} // false
!!{} // true

Prototype

所有的对象都有一个prototype属性,不管何时解释程序查找一个属性时,它都会检查该prototype。jQuery普遍的使用这个来添加方法到jQuery实例中。

var form = $("#myform");
form.clearForm; // undefined
form.fn.clearForm = function() {
return this.find( ":input" ).each(function() {
this.value = "";
}).end();
};
form.clearForm() // 为所有的jQuery对象实例工作, 因为新的方法被添加到该prototype

这个例子需要说明:prototype单词没有在任何地方出现,是如何改变该prototype的呢?含义是form.fn只是form.prototype的别名。如果出现了这样的情况,就可以这样解释了。


在Javascript中:第五版的权威指南(the definitive guide 5 edition),不要给Object.prototype添加属性。

Array

在Javascript中的数组有一些内置的方法是可变的列表。你可以使用array literal定义数组

var x = [];
var y = [ 1, 2, 3 ];
数组的类型是object
typeof []; // "object"
typeof [ 1, 2, 3 ]; // "object"
读取和写入元素到数组中使用array-notation
x[ 0 ] = 1;
y[ 2 ] // 3

Iteration

含有length属性的数组有利于迭代:

for ( var i = 0; i < a.length; i++ ) {
// Do something with a[i]
}
当性能要求严格时,只读取length属性一次能够帮助提高性能。这个应该只当性能的瓶颈被发现的时候被使用:
for ( var i = 0, j = a.length; i < j; i++ ) {
// Do something with a[i]
}
另一种变化是为每一次迭代定义一个变量,将array-notation从循环体移除。当数组包含0或者空字符串时,它不会工作!

for ( var i = 0, item; item = a[i]; i++ ) {
// Do something with item
}

jQuery提供了通用的each-function来迭代数组元素,以及对象的属性:
var x = [ 1, 2, 3 ];
jQuery.each( x, function( index, value ) {
console.log( "index", index, "value", value );
});
缺点是回调函数会在每一个值的上下文中被调用,因此如果适合使用时,你会失去你自己的对象的上下文。更多见下面的Functions.

length属性也可以被用来给数组的末尾添加元素。和使用push方法一样:

var x = [];
x.push( 1 );
x[ x.length ] = 2;
x // [ 1, 2 ]
当你查看Javascript类库代码的时候,你会经常看到这两种变种。

其他的内置方法是reverse, join, shift, unshift, pop, slice, splice and sort:

var x = [ 0, 3, 1, 2 ];
x.reverse() // [ 2, 1, 3, 0 ]
x.join(" – ") // "2 - 1 - 3 - 0"
x.pop() // [ 2, 1, 3 ]
x.unshift( -1 ) // [ -1, 2, 1, 3 ]
x.shift() // [ 2, 1, 3 ]
x.sort() // [ 1, 2, 3 ]
x.splice( 1, 2 ) // [ 2, 3 ]
Note:unshift()方法在IE中不会返回length属性

Boolean Default

一个数组不管有没有元素,默认值不会是false:

![] // false
!![] // true

Array<Type> Notation

在jQuery的API中你会经常的发现这样的Array<Type>符号:

dragPrevention    Array<String>

这表明这个方法不仅仅需要array作为参数,还需要指定期望的类型。这个符号是从java5中泛型标识(或者c++的模版)。

PlainObject

PlainObject的类型是一个,包含0个或者更多键值对的Javascript对象。plain 对象,换句话说是Object 对象,它在jQuery文档中被指定为plain是用来和其他Javascript对象区分:如,null, user-defined arrays,和宿主对象如document,所有的这些都是object类型。jQuery.isPlainObject()方法识别传过来的参数是不是一个plain 对象,如下显示:

 var a = [];
var d = document;
var o = {};
typeof a; // object
typeof d; // object
typeof o; // object
jQuery.isPlainObject( a ); // false
jQuery.isPlainObject( d ); // false
jQuery.isPlainObject( o ); // true

Function

在Javascript中的函数可以命名或者匿名。任何函数能够被指派给一个变量或者传递给一个方法,但是使用这种方式传递成员函数会导致他们在其他对象的上下文被调用(如,不同的this对象)。

function named() {}
var handler = function() {}

在jQuery代码中你会看到许多匿名函数

$( document ).ready(function() {});
$( "a" ).click(function() {});
$.ajax({
url: "someurl.php",
success: function() {}
});

函数的类型是function.

Arguments

在一个函数中,特殊的变量arguments是可以使用的。他和数组中有的length属性一样,但是它缺少数组的内置方法。伪数组(pseudo-array)元素是函数调用的参数。

function log( x ) {
console.log( typeof x, arguments.length );
}
log(); // "undefined", 0
log( 1 ); // "number", 1
log( "1", "2", "3" ); // "string", 3
arguments对象也有一个callee属性,用来指向你所在里面的那个函数,如:

var awesome = function() { return arguments.callee; }
awesome() == awesome // true

Context, Call and Apply

在Javascript中,变量this常指向当前的上下文,默认情况下,this指向window对象。在函数中this上下文可以改变,决定被调用的函数。

在jQuery中的所有的时间句柄(event handlers)被作为上下文(context)通过处理(handling)元素被调用。

$( document ).ready(function() {
// this refers to window.document
});
$( "a" ).click(function() {
// this refers to an anchor DOM element
});
你可以使用函数内置的方法call和apply为函数调用指定一个上下文。他们的不同是他们如何传递参数。call传递所有作为参数的参数到函数中,然而apply接收数组作为参数。
function scope() {
console.log( this, arguments.length );
}
scope() // window, 0
scope.call( "foobar", [ 1, 2 ] ); // "foobar", 1
scope.apply( "foobar", [ 1, 2 ] ); // "foobar", 2

Scope

在Javascript中,所有在函数内部定义的变量只在函数范围内可见。如下例子:

// global
var x = 0;
(function() {
// private
var x = 1;
console.log( x ); // 1
})();
console.log( x ); // 0
在全局范围内定义变量x,然后定义一个匿名的函数,并立刻执行(额外的圆括号是需要被立即执行的)。在函数内部,另一个变量x定义个一个不同的值。它只在函数中可见,不会重写全局的变量。

Closures

不管什么时候一个被在当前范围之外定义的变量被从内部范围访问时,闭包(Closures)会被创建。如下例子中,变量counter在create, increment, and print 函数中是可见的,但是不在他们之外。

function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log( counter );
}
}
}
var c = create();
c.increment();
c.print(); // 1
这个模式允许你创建在对象的方法来操作外部不可见的数据--对象的基础,面向对象编程。

Proxy Pattern

结合上述的知识给了你作为Javascript开发者足够的能量。一种结合上述的知识的方式是在Javascript中实现一个代理模式,支持基础的面向切面编程 (AOP):

(function() {
// log all calls to setArray
var proxied = jQuery.fn.setArray;
jQuery.fn.setArray = function() {
console.log( this, arguments );
return proxied.apply( this, arguments );
};
})();

上述在一个函数中包裹它的代码来隐藏proxied变量。它在闭包中使用了jQuery的setArray方法,并重写了它。代理然后记录所有方法上的调用并委派该调用给原来方法。使用apply(this, arguments)保证了调用者不会发现原始方法和代理方法的不同。

Callback

一个回调函数是普通的Javascript函数被作为参数或者选项传递给了一些方法。一些回调函数仅仅是事件,当一些状态被触发时,被调用来给用户做出反应的机会。jQuery的事件系统在每个地方都使用这样的回调:

$( "body" ).click(function( event ) {
console.log( "clicked: " + event.target );
});

大多数回调提供参数和上下文。在event-handler的例子中,回调被使用了一个参数调用,一个事件。上下文被设置成了正在处理的元素,在上面的例子中,是document.body.

大多数回调需要返回一些东西,其他返回值是可选的。为了阻止一个表单的提交,一个submit时间句柄需要返回false:

$( "#myform" ).submit(function() {
return false;
});
不是总是返回false,回调会检查表单的合法性,并仅当表单invalid时返回false。

Selector

一个选择器被用来在jQuery中从DOM文档选择DOM元素。该文档,大多数情况下,是所有浏览器中的DOM文档,但是也可以是通过AJAX接收的XML文档。

选择器是由CSS和定制附加的组成的。Xpath选择器作为插件是适用的。

jQuery中所有的适用的选择器被文档化在了Selectors中。

还有许多插件在其他方面对jQuery选择器有影响。校验(validation)插件接收选择器来指定依赖关系,不管输入是否需要。

emailrules: {
required: "#email:filled"
}

这个会让emailrules的checkbox需要仅当用户在email输入域处输入一段email地址,通过checkbox的id选择的,由定制的:filled选择器过滤时,校验的插件会被提供。

如果选择器被作为参数的类型被指定,它接收任何jQuery构造器接受的参数,如,字符串,元素,元素列表(Strings, Elements, Lists of Elements).

Event

jQuery的事件系统根据W3C的标准来正常化事件对象。事件对象被保证用来传递给事件执行者(event handler),不会检查window.event是否需要。它正常化了target, relatedTarget, which, metaKey and pageX/Y属性,并且提供stopPropagation() 和preventDefault()方法。

这些属性都被文档化了,也附加了例子,在事件对象。

在文档对象模型中的标准事件有:blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,和keyup.由于该DOM事件的名字为一些元素有提前定义的含义,使用它们作为其他用途是不推荐的。jQuery的事件模型会在元素上通过名字来触发事件,并且它向上传递给该元素属于的文档树,如果存在。

Element

在文档对象模型中的元素有属性(attributes),文本(text)和孩子(children)。它提供方法来遍历父亲和孩子并且访问它的属性。由于DOM API的规范和实现存在一些缺陷,使用这些方法就毫无乐趣而言了。jQuery提供了封装这些元素的包装来帮助与DOM元素交互。但是很多时候,你会直接使用DOM元素,或者可以看到方法接收DOM元素作为参数。

不管何时,你使用jQuery的each-method,你的回调的上下文被设置为了一个DOM元素。这也是事件处理者需要的(event handlers)。

一些DOM元素的属性在浏览器中始终保持一致性。如下的例子中,简单的blur校验(on-blur-validation):

$( ":text" ).blur(function() {
if( !this.value ) {
alert( "Please enter some text!" );
}
});

你可以使用$(this).val()替换this.value通过jQuery来访问input text的值,但是在这个例子你不会获取任何东西。

jQuery

jQuery对象包含了已经被由HTML字符串或者从文档中选择的文档对象模型(DOM)的元素的集合。由于jQuery的方法经常使用CSS选择器来从文档中匹配元素,在jQuery对象中的元素集合经常被称为matched elements集合或者selected elements集合。

jQuery对象自身表现的很像数组;它有length属性,对象中的元素可以被他们的数值的索引[0][length-1].来访问。注意jQuery对象不是真实的Javascript数组对象,因此它没有所有的真实数组对象的方法,如join().

通常,你可以使用jQuery()函数来创建jQuery对象。jQuery()也可以使用简单的字符别名$(),除非你已经调用了jQuery.noConflict()来禁用这个选择。大多数的jQuery方法返回自身的jQuery对象,因此该方法可以被链式调用:
$( "p" ).css( "color", "red" ).find( ".special" ).css( "color", "green" );

不管何时你使用一个有破坏性的jQuery方法来可能会改变jQuery对象中的元素集合,如.filter()或者.find(),该方法实际上是返回了结果元素的新的jQuery对象。要想返回到以前的jQuery对象,你可以使用.end()方法。

一个jQuery对象可以是空,包含空的DOM元素。你可以创建空的jQuery对象使用$()(也就是不传递参数)。一个jQuery对象如果一个选择器没有选择任何元素或者链式的方式过滤掉了所有的元素,也会是空的。这不是一个错误,任何在该jQuery对象上(空的jQuery对象)调用任何拓展的方法会没有任何效果,因为它们没有元素可以被在上面执行。因此,在这个例子中如果页面没有class为badEntry,然后没有元素会被变红。

$( ".badEntry" ).css({ color: "red" });

XMLHttpRequest

一些jQuery Ajax函数返回本地的XMLHttpRequest(XHR)对象,或者将它作为一个参数传递给success/error/complete处理者,因此你可以做额外的处理或者在请求上做监视。注意AJAx函数仅仅返回或者传递一个XHR对象,当一个XHR对象在请求被使用时。如,JSONP请求和跨域(cross-domain)的GET请求使用脚本元素而不是XHR对象。

尽管,XHR对象是标准的,在不同的浏览器中有不同的行为。在W3C网站和浏览器的文档,更多细节:

W3C standard

Apple (Safari)

Mozilla (Firefox)

Microsoft (Internet Explorer)

Opera

Google在其官方的页面上没有为Chrome的XHR介绍的文档。在版本5,对于XHR请求不支持使用文件协议。

jqXHR

jQuery1.5中,$.ajax()方法返回jqXHR对象,是XHR对象的超集。

Deferred Object

jQuery1.5中,延迟对象提供了一种方式来注册多个回调到自我管理(self-managed)的回调队列中,在合适的时候调用回调队列,并且接替任何同步或者异步函数的success 或者 failure状态。

Promise Object

这个对象提供了延迟对象方法的子集(then,done,fail, always,pipe.isResolved, andisRejected)来阻止使用者改变延迟(Deferred)的状态。

Callbacks Object

一个多用途的对象,提供一个强大的方式来管理回调列表。它支持添加,移除,运行,禁止(adding, removing, firing, and disabling)回调。这个回调(Callbacks)对象被$.Callbacks函数创建并返回,并且随后被该函数大多数方法返回。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值