JQuery官方学习资料（译）：类型

时间：2024-01-09 16:33:02
  • 类型
    JavaScript提供了多个内置数据类型。除了这些，这份文档还将介绍一些虚拟类型，例如选择器、伪类、事件等。
  • String

在JavaScript中字符串是一个不可变的对象，它包含无、一个或多个字符。它的类型称之为“string”。

typeof"some string"; // "string"
    • 引号

一个字符串可以使用单引号或双引号来定义，你可以在双引号内或周围嵌套使用单引号，如果要在双引号内使用双引号（或者单引号内使用单引号），必须嵌套使用反斜杠进行转义。

"You make 'me' sad."
'That\'s "cranking" good fun!'
"<a href=\"home\">Home</a>"
    • 内置方法

在JavaScript中有一些内置方法可以操作字符串。通常结果总是返回一个新的字符串，或返回一个array。

"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属性

所有的字符串都有一个length属性（长度属性）。

"Hello".length // 5
"".length // 0
    • 默认布尔值

一个空字符串默认为false。

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

当一个字符串在JQuery文档中代表一个或多个DOM元素时，通常被创建和插入到文档中时，这个字符串将被当作htmlString。当被作为一个JQuery()方法参数传递的时候，这个字符串将会被当作是HTML。

    当一个字符串作为参数传递给一个操作方法时，例如.append()，它总是被当作为HTML，因为JQuery对这个字符串（CSS选择器）的其他共同解释不适用于其上下文。
    $.parseHTML()可以显式的解析一个html字符串。
// 追加<b>hello</b>:
$( "<b>hello</b>" ).appendTo( "body" );
// 追加<b>hello</b>:
$( "<b>hello</b>bye" ).appendTo( "body" );
// 语法错误, unrecognized expression: bye<b>hello</b>
$( "bye<b>hello</b>" ).appendTo( "body" );
// 追加bye<b>hello</b>:
$( $.parseHTML( "bye<b>hello</b>" ) ).appendTo( "body" );
// 追加<b>hello</b>wait<b>bye</b>:
$( "<b>hello</b>wait<b>bye</b>" ).appendTo( "body" );
  • Number

在JavaScript中的Number是双精度64位IEEE754格式化的值。仅仅作为字符串的时候，它们是不可改变的。对于Number类型的数据所有的运算符都是基于C语言的方式进行运算的。

typeof 12 // "number"
typeof 3.543 // "number"
    • 默认布尔值

如果一个数字是0，那么它默认为false。

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

由于是双精度运行，下面这个结果不算是一个错误

0.1 + 0.2// 0.30000000000000004
    • Math

JavaScript提供了数学对象中的数字通用功能。

Math.PI // 3.141592653589793
Math.cos( Math.PI ) // -1
    • 数字解析

parseInt和parseFloat可以用于解析字符串为数字，如果不指定两者是做隐式转换的。

parseInt( "123" ) = 123 // (隐式十进制)
parseInt( "010" ) = 8 // (隐式八进制)
parseInt( "0xCAFE" ) = 51966 // (隐式十六进制)
parseInt( "010", 10 ) = 10 // (显示十进制)
parseInt( "11", 2 ) = 3 // (显示二进制)
parseFloat( "10.10" ) = 10.1
    • Numbers与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和Infinity

解析一个不是数字的东西时结果是NaN，isNaN方法可以帮助你判断结果是否是NaN。

parseInt( "hello", 10 ) // NaN
isNaN( parseInt("hello", 10) ) // true
    除零的结果是Infinity。
1 / 0// Infinity
    NaN和Infinity都是Number类型的。
typeof NaN // "number"
typeof Infinity // "number"

需要注意的是NaN的一种奇怪的比较，它与它自己比较是不同的。

NaN == NaN// false (!)

但是Infinity的比较是不同的。

Infinity == Infinity// true
    • Integer

整数是一个普通的数字类型，但每当明确指明的时候，表示数字是一个非浮点数。

    • Float

浮点数也是一个普通的数字类型，但每当明确指明的时候，就表示数字是一个浮点数。

  • Boolean
    在JavaScript中Boolean代表的是true或者false。
if ( true ) console.log( "always!" );
if ( false ) console.log( "never!" );
  • Object

在JavaScript中一切都是对象。最简单的创建对象的方式是对象文字。

var x = {};
var y = {
name: "Pete",
age: 15
};

对象的类型是Object。

typeof {} // "object"
    • 点符号

你可以使用点符号读取和写入对象的属性。

y.name // "Pete"
y.age // 15
x.name = y.name + " Pan" // "Pete Pan"
x.age = y.age + 1 // 16
    • 数组符号

或许你读写对象的属性是通过数组符号，它允许你动态的选择对象的属性。

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

通过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被人更改了。

    JQuery提供了通用的each方法去遍历对象的属性和元素数组。
jQuery.each( obj, function( key, value ) {
console.log( "key", key, "value", value );
});

缺点是回调被调用在迭代值的上下文中，因此你失去了原有对象的上下文。

    • 默认布尔值

一个对象，无论它是否有属性，默认值永远不会为false。

!{} // false
!!{} // true
    • 原型

所有的对象都有原型（prototype）属性，每当把它当做属性的时候，如果在对象上找不到这个属性它仍然会在对象的原型上进行检查，JQuery广泛的使用原型将方法添加到JQuery实例上。JQuery使用jQuery.fn作为jQuery.prototype的别名，你可以使用其中的任意一个

var form = $("#myform");
console.log( form.clearForm ); // undefined
// jQuery.fn == jQuery.prototype
jQuery.fn.clearForm = function() {
return this.find( ":input" ).each(function() {
this.value = "";
}).end();
};
// 所有的JQuery对象实例都可以运行,因为新的方法已经被添加到原型上了
console.log( form.clearForm );
form.clearForm();
  • Array

在JavaScript中数组是可变化的，并且有一些内置方法可以使用。

var x = [];
var y = [ 1, 2, 3 ];
typeof []; // "object"
typeof [ 1, 2, 3 ]; // "object"
x[ 0 ] = 1;
y[ 2 ] // 3
    • 迭代

在数组的迭代中length属性是非常有用的。

for ( var i = 0; i < a.length; i++ ) {
// a[i]
}

当性能是至关重要的时候，只读取一次length属性可以帮助运行速度的提升。

for ( var i = 0, j = a.length; i < j; i++ ) {
// a[i]
}

另外还有一种情况是在迭代语句中定义变量来存储数组当前迭代的元素，在循环体中不再使用数组元素而是这个变量。

for ( var i = 0, item; item = a[i]; i++ ) {
// 使用item变量
}

JQuery提供了each方法可以迭代数组的每个元素，这个方法对于迭代对象的属性也是适用的。

var x = [ 1, 2, 3 ];
jQuery.each( x, function( index, value ) {
console.log( "index", index, "value", value );
});

length属性可以用来作为序号将元素加入到数组的末尾。

var x = [];
x.push( 1 );
x[ x.length ] = 2;
x // [ 1, 2 ]

数组还有很多的内置方法。

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 ]
    • 默认布尔值

一个数组，无论它有没有元素，也永远不会默认为false。

![] // false
!![] // true
    • Array<Type> 符号

在JQuery的API中，经常可以发现有Array<Type>符号。这样可以指定数组元素的预期类型，类似于.NET中的泛型。

dragPrevention    Array<String>
  • PlainObject

PlainObject是一个JavaScript对象，包含了0个或多个键值对。

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中可以是命名的或者是匿名的。任何一个函数都可以分配给一个变量，或传递给一个函数，但是通过传递成员函数这样的方式可以使他们被另一个对象的上下文调用。函数的类型是“function”。

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

JQuery代码中的匿名函数是大量可见的。

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

在函数中有一种特殊的变量，那就是参数，它是一种伪数组形式的元素。

function log( x ) {
console.log( typeof x, arguments.length );
}
log(); // "undefined", 0
log( 1 ); // "number", 1
log( "1", "2", "3" ); // "string", 3

参数对象都有一个callee属性，它指向的是实例内部的函数。

var awesome = function() { return arguments.callee; }
awesome() == awesome // true
    • 上下文

在JavaScript中，this总是指向当前上下文，默认情况下this指向的是window对象，在一个函数内this的上下文就会发生改变，这种改变取决于函数是如何被调用的。

$( document ).ready(function() {
// this指向window.document
});
$( "a" ).click(function() {
// this指向DOM中的a标签元素
});

你可以指定一个函数的上下文来使用函数的内置方法call或者apply。两者的区别在于如何传递参数，call将所有的参数作为一个arguments传递给函数，而apply接收一个arguments数组作为参数。

function scope() {
console.log( this, arguments.length );
}
scope() // window, 0
scope.call( "foobar", [ 1, 2 ] ); // "foobar", 1
scope.apply( "foobar", [ 1, 2 ] ); // "foobar", 2
    • 作用域

在JavaScript中，所有函数内部定义的变量都仅仅在该函数的作用域内是有效的。

    在全局范围内定义的变量与函数内部定义的变量名称相同时，两者是不会有冲突的。
var x = 0;
(function() {
var x = 1;
console.log( x ); // 1
})();
console.log( x ); // 0
    • 闭包

闭包是对作用域范围的扩展，闭包让函数可以在外部访问该函数被创建的作用域内的变量。这种模式允许你创建对象后通过方法来操作对象内部的变量，这些变量是外部不可见的，这也正是面向对象编程的基础。

function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log( counter );
}
}
}
var c = create();
c.increment();
c.print(); // 1
    • 代理模式

在JavaScript中有一种代理模式，为其他对象提供一种代理以控制对这个对象的访问，可以实现基本的面向方面编程（AOP）。

    • 回调

回调就是在一个函数中传递一些函数作为其参数。JQuery的事件系统就是使用函数回调来实现的。

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

回调的返回值是可选的，例如防止表单提交，我们可以通过事件来进行处理。

$( "#myform" ).submit(function() {
return false;
});
  • Selector

在JQuery中一个selector是被用来选择DOM文档中的元素，这文档一般是在浏览器中，除此之外通过AJAX接收的XML文档也是适用的。

    如果selector被指定为参数类型，那么它将接受一切JQuery构造函数接受的，例如：字符串、元素和元素列表等。
  • Event

JQuery事件系统是根据W3C标准标准化事件对象的，事件对象是被确保传递给事件处理器的。

    DOM中的标准事件是：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

在DOM中的一个元素可以有属性、文本和子节点。它提供了方法可以遍历父节点和子节点，并获取它们的属性。JQuery提供了帮助元素与DOM交互的方法。

    每当使用JQuery中的each方法，函数回调的上下文将被设置为一个DOM元素，事件处理器也是类似的。
$( ":text" ).blur(function() {
if( !this.value ) {
alert( "Please enter some text!" );
}
});
  • jQuery

JQuery对象包含一个DOM元素的集合。JQuery经常使用CSS样式中的选择器来匹配文档中的元素，设置JQuery对象中的元素经常被称之为设置“匹配元素”或者“已选元素”。

    JQuery对象类似于数组，但是需要注意的是它不是真正的数组对象，虽然它有length属性，但是其他一些数组内置方法是不能使用的。
    很多JQuery方法返回的也是JQuery对象，所以在这样的情况下可以采用链式调用的方式来调用函数。
$( "p" ).css( "color", "red" ).find( ".special" ).css( "color", "green" );

每当你使用JQuery的链式调用函数时，如果你想返回到当前元素之前的那个元素，那么你可以使用.end()方法。

    JQuery对象可以是空的，不包含DOM中的元素，你可以通过$()创建一个空JQuery对象。如果选择器没有选择任何元素或者链式方法中过滤了所有的元素，那么JQuery对象为空而不是error，并且在空的JQuery对象上调用方法是无效的。
  • XMLHttpRequest

一些jQuery的AJAX函数返回的是本地的XMLHttpRequest（XHR）对象，而XMLHttpRequest正是AJAX的核心对象，其主要功能是与服务端进行数据交互。

  • XML Document
    XML文档对象是通过浏览器的XML DOM解析器创建的，XML文档与HTML文档有着不同的语义，但大多数的遍历与JQuery方法对于两者是一样使用和运行的。
  • 类型检查
    jQuery提供了一些基本的实用方法来确定一个特定值的类型。
var myValue = [ 1, 2, 3 ];
// 使用JavaScript的typeof来测试类型
typeof myValue === "string"; // false
typeof myValue === "number"; // false
typeof myValue === "undefined"; // false
typeof myValue === "boolean"; // false
// 使用全等于运算符判断是否为null
myValue === null; // false
// 使用Jquery的方法检查类型
jQuery.isFunction( myValue ); // false
jQuery.isPlainObject( myValue ); // false
jQuery.isArray( myValue ); // true

相关文章