Jquery Types 小结
JavaScript provides several built-in(内置的) datatypes. In addition to those, this page documents virtual types(虚类) like Selectors, enhanced pseudo-types(伪类) like Events and all and everything you wanted to know about Functions.
jQuery除了包含原生JS中的内置数据类型(built-in datatype),还包括一些扩展的数据类型(virtual types),如Selectors、Events等。
一、Anything
在jQuery文档中任何虚拟类型(virtual type)的使用表明可以使用任何类型或应该被期望。
二、String
A string in JavaScript is an immutable(不变的) object that contains none, one or many characters.
(1)var typeOfStr = typeof "hello world";//typeOfStr为“string"
(2)内置方法(Built-in Methods):
"hello".charAt( 0 ) // "h"
"hello".toUpperCase() // "HELLO"
"Hello".toLowerCase() // "hello"
"hello".replace( /e|o/g, "x" ) // "hxllx"
"1,2,3".split( "," ) // [ "1", "2", "3" ]
(3)length属性:返回字符长度,比如"hello".length返回5
(4)String转换为Boolean:一个空字符串("")默认为false,而一个非空字符串为true(比如"hello")。
三、htmlString
在jQuery文档用于表示一个或多个DOM元素的String被指定为htmlString,通常创建和插入文档中。当作为jQuery()函数的一个参数传递时,该字符串如果是以<tag>开始和解析,直到最后>字符。示例如下:
$( "<b>hello</b>" ).appendTo( "body" ); // <body><b>hello</b></body>
$( "<b>hello</b>bye" ).appendTo( "body" ); // <body><b>hello</b></body>
$( "bye<b>hello</b>" ).appendTo( "body" ); // 语法错误(
Syntax error), unrecognized expression: bye<b>hello</b>
$( $.parseHTML( "bye<b>hello</b>" ) ).appendTo( "body" ); // <body>bye<b>hello</b></body>
$( "<b>hello</b>wait<b>bye</b>" ).appendTo( "body" ); // <b>hello</b>wait<b>bye</b>:
四、Number
在原生JavaScript中,Number是64位格式IEEE 754双精度(double-precision)值。就像字符串是不可变的。所有常见操作符等同于在于c语言中可以应用于数字(+, -, *, /, % , =, +=, -=, * =, /=, ++, --)。
(1)String转换为Boolean:If a number is zero, it defaults to false.
(2)Math,数学对象:
Math.PI // 3.141592653589793
Math.cos(Math.PI) // -1
(3)Parsing Numbers,转换为数字:parseInt和parseFloat方法
parseInt( "123" ) = 123 // (implicit decimal(十进制))
parseInt( "010" ) = 8 // (implicit octal(八进制))
parseInt( "0xCAFE" ) = 51966 // (implicit hexadecimal(十六进制))
parseInt( "010", 10 ) = 10 // (explicit decimal(十进制))
parseInt( "11", 2 ) = 3 // (explicit binary(二进制))
parseFloat( "10.10" ) = 10.1
(4)Numbers to Strings,数字转换为字符串
[1]当将Number粘到(append)字符串后的时候,将得到字符串。
"" + 1 + 2; // "12" "" + (1 + 2); // "3" "" + 0.0000001; // "1e-7" parseInt( 0.0000001 ); // 1 (!)
[2]或者用强制类型转换:
String(1) + String(2); //"12" String(1 + 2); //"3"
(5)NaN and Infinity(Both NaN and Infinity are of type "number"):
如果对一个非数字字符串调用parseInt方法,将返回NaN(Not a Number),isNaN常用来检测一个变量是否数字类型,如下:
parseInt( "hello", 10 ) // NaN
isNaN( parseInt("hello", 10) ) // true
Infinity表示数值无穷大或无穷小,比如 1 / 0 // Infinity。
另外 NaN==NaN 返回false,但是 Infinity==Infinity 返回true。
(6)Integer 和 Float:分为表示整型和浮点型,都是数字类型。
五、Boolean:布尔类型,true或者false。
六、Object对象
(1)JavaScript中的一切皆对象。对一个对象进行typeof运算返回 "object"。
var x = {}; var y = { name: "Pete", age: 15 };
(2)对于上面的y对象,可以采用点记法(Dot Notation)获取属性值,比如y.name返回"Pete",y.age返回15
(3)Array Notation(数组访问方式访问对象)
var operations = { increase: "++", decrease: "--" }
var operation = "increase" ; operations[operation] // "++";
operations["multiply"] = "*"; // "*", 往operations对象中添加了一个key-value对。
(4)迭代循环(Iteration),for-in-loop
var obj = {
name: "Pete",
age: 15
};
for( key in obj ) {
alert( "key is " + [ key ] + ", value is " + obj[ key ] );
}
$.each()jQuery
的特有方式,如下:jQuery.each( obj, function( key, value ) {
console.log( "key", key, "value", value );
});
(5)Boolean default:任何对象不管有无属性和值,都默认为true;
(6)Prototype,对象原型属性,jQuery中用fn(Prototype的别名)动态为jQuery Instances添加对象(函数)
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();
};
console.log( form.clearForm ); // function
form.clearForm();// works for all instances of jQuery objects, because the new method was added
七、 OPTIONS,可选
几乎所有的jQuery插件都提供了一个基于OPTIONS的API,OPTIONS是JS对象,意味着该对象以及它的属性都是optional(可选的)。允许用户自定义(customization)。
比如采用Ajax方式提交表单,
$("#myform").ajaxForm();//默认采用Form的Action属性值作为Ajax-URL,Method值作为提交类型(GET/POST)
$("#myform").ajaxForm({ url: "mypage.php", type: "POST" });//则覆盖了提交到的URL和提交类型
八、Array,数组
(1)var y = [ 1, 2, 3 ]; typeof [ 1, 2, 3 ]; // "object" Array是可变的lists。Array也是对象。
(2)读取或设置Array中元素的值:var val = arr[0];//val为1
(3)Array中元素赋值,arr[2] = 4;//现在arr第三个元素为4
(4)Iteration,数组循环(遍历)
[1]for (var i = 0; i < a.length; i++) { // Do something with a[i] }
[2]但是当考虑性能时,则最好只读一次length属性,如下:
for (var i = 0, j = a.length; i < j; i++) { // Do something with a[i] }
[3]通过变量(variable)
for ( var i = 0, item; item = a[i]; i++ ) {
// Do something with item
}
var x = [ 1, 2, 3 ];
jQuery.each( x, function( index, value ) {
console.log( "index", index, "value", value );
});
(5)数组的length属性也可添加元素,对数组调用push方法,二者都将一个元素添加到数组末尾:
var x = [];
x.push( 1 );
x[ x.length ] = 2;
x // [ 1, 2 ]
(6)数组其他内置方法:
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],不移换,该方法在IE中不返回length属性
x.shift() // [2, 1, 3],移换
x.sort() // [1, 2, 3],排序
x.splice(1, 2) // [ 2, 3 ]用于插入、删除或替换数组元素,这里为删除从index=1开始的2个元素
(7)Boolean Default,无论是否为空,均默认为true
(8)Array<Type> ,可将数组作为参数传递,Array<String>
九、PlainObject
(1)该类型为键值对( key-value pairs),通过jQuery.isPlainObject()
方法可验证
var a = []; var d = document;
var o = {};
typeof a; // object
typeof d; // object
typeof o; // object
$.isPlainObject( a ); // false
$.isPlainObject( d ); // false
$.isPlainObject( o ); // true
十、Date
(1)使用new Date()创建日期对象,需传递数字参数,参数顺序为:year, month, day, hour, minute, second, millisecond
例如:new Date( 2014, 0, 1, 8, 15 ); //January 1st, 2014, at 8:15,月份为0~11.
十一、Function,函数
(1)在JavaScript函数可以命名或匿名(anonymous)的。任何函数都可以分配给一个变量或传递给一个方法,但是通过成员函数这种方式可以使他们的上下文中调用另一个对象(即有不同的“this”对象)。例如:
[1]function named() {} [2]
var handler = function() {} 以下为匿名函数
[3]$( document ).ready(function() {});
[4]$( "a" ).click(function() {});
[5]$.ajax({
url: "someurl.php",
success: function() {}
});
(2)Arguments,参数
[1]有length属性
function log( x ) {
console.log( typeof x, arguments.length );
}
log(); // "undefined", 0
log( 1 ); // "number", 1
log( "1", "2", "3" ); // "string", 3
var awesome = function() { return arguments.callee; }
awesome() == awesome // true
(3)Context, Call and Apply
[1]在JavaScript中,变量"this"总是指当前上下文。默认情况下,"this"指的是窗口对象。这个上下文可以改变在一个函数,这取决于如何被函数调用。在jQuery中所有事件处理程序附带处理元素作为上下文被调用。
$( document ).ready(function() {
// this refers to window.document
});
$( "a" ).click(function() {
// this refers to an anchor DOM element
});
(4)作用范围(Scope)
//全局(global)
var x = 0;
(function() {
// 私有(private)
var x = 1;
console.log( x ); // 1
})();
console.log( x ); // 0
(5)闭包(Closures)
当一个变量在当前范围外被定义从内部范围访问时,闭包(Closures)被创建。
function create() {
var counter = 0;//被定义在Create()内
return {
increment: function() {
counter++;
},
print: function() {
console.log( counter );
}
}
}
var c = create();
c.increment();
c.print(); // 1
(6)代理模式(Proxy Pattern):支持基本的面向对象编程(aspect-oriented programming (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 );
};
})();
(7)回调(Callback):回调是一个简单的JS函数作为参数传递给一些方法或选项。
[1]带参数:$( "body" ).click(function( event ) {
console.log( "clicked: " + event.target );
});
[2]返回:$( "#myform" ).submit(function() {
return false;
});
十二、选择器(Selector):选择器在jQuery中用来从一个DOM文档中选择DOM元素。
十三、事件(Event)
DOM对象模型( Document Object Model)的标准事件:blur
, focus
, load
, resize
, scroll
, unload
, beforeunload
, click
, dblclick
, mousedown
, mouseup
, mousemove
, mouseover
, mouseout
, mouseenter
, mouseleave
, change
, select
, submit
, keydown
, keypress,
and keyup
.
十四、元素(Element):在文档对象模型(DOM)中一个元素可以有attributes, text,和children。
$( "input[type='text']" ).on( "blur",
function() {
if( !this.value ) {
alert( "Please enter some text!" );
}
}); //this.value
相当于$(this).val()
十五、jQuery
[1]JQuery对象包含DOM元素的集合。比如$('p')即返回所有<p>...</p>。
[2]jQuery对象本身的表现更像一个数组,对象有length
属性,也可以通过index([0]~[length - 1])访问DOM元素集合中的某个。但是不是数组,不具备数组的某些方法,比如join()。
[3]可以使用别名$()调用,除非调用jQuery.noConflict()来禁用这个选项。
[4]许多jQuery方法返回jQuery对象本身,所以可以采用链式调用:$( "p" ).css( "color", "red" ).find( ".special" ).css( "color", "green" );
[5]但是如果你调用的方法会破坏jQuery对象,比如find()和filter(),则返回的不是原对象。要返回到原对象只需要再调用end()方法即可。
十六、XMLHttpRequest:Ajax技术体系中最为核心的技术
jQuery的一些Ajax函数返回本机XMLHttpRequest(XHR)对象,或者把它作为参数传递给success/error/complete处理程序(handlers),这样就可以做额外处理或者监视请求。注意,,当一个XHR对象实际在请求中使用时,Ajax函数只返回或传递一个XHR对象。
参考来自: http://docs.jquery.com/Types
Jquery Types 小结的更多相关文章
- Jquery Mobile 小结
第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...
- jQuery用法小结
jQuery加载1.$(document).ready()2.添加css样式:单个:$("p").css("color","red"); 多 ...
- jQuery学习小结3——AJAX
一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...
- jQuery学习小结2——动画
一.基础动画 方法名 说明 show([speed,[easing],[fn]])hide([speed,[easing],[fn]]) speed:三种预定速度之一的字符串("slow&q ...
- jQuery学习小结1-CSS操作+事件
一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...
- Jquery 使用小结
JQuery API中文档地址:http://www.hemin.cn/jq/index.html JQuery 中文社区:http://www.jquery.org.cn/ 1.siblings() ...
- jquery 应用小结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 学习小结
1,jQuery是一个简单的JavaScript库,提供了一系列辅助函数:以下简称jq; 使用jq时,通常将jq代码放到head部分的事件处理方法中,也可以将其单独写出 .js 文件,引入:但无论哪种 ...
- jQuery使用小结
$(document).ready( function(){} ); 选择器 $("p:first") 第一个元素 $("p.intro" ...
随机推荐
- KMP 理解
例题 以字符串 ABABACA 为例 a 前缀: 后缀: 结果为0 ab 前缀:a 后缀: b 结果为0 aba 前缀:a ab 后缀: ba a 结果为1,此时 i=2,j=1 abab 前缀:a ...
- Python学习笔记(五)—列表的学习
总结内容: 1.list的定义 2.list的取值 3.list数据的增加 4.list数据的删除 5.list数据的修改 6.list数据的查询 7.list方法的介绍 8.list的合并 9.多维 ...
- GIT(2)----入门资料,分支管理,冲突解决
最近一直使用者GIT发现使用起来确实很不错,最近做些整理总结,发现了一些很不错的资料,收集在这里,以备忘. GIT入门挺简单的,之前有些过一篇文章,关于GIT的,但是都是一些生硬的操作,并没有系统的学 ...
- jQuery制作水平多级下拉菜单
本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...
- [转载] C-MEX程序编写
原作者,胡荣春 2006-10-11 1 MEX文件简介 在MATLAB中可调用的C或Fortran语言程序称为MEX文件.MATLAB可以直接把MEX文件视为它的内建函数进行调用.MEX文件是动态 ...
- 在使用完全拷贝过来的类文件(带xib文件)时,要及时修改 File's Owner
- Shell下的通配符、特殊符号和文件描写叙述符
一:通配符 * 代表『 0 个到无穷多个』随意字符 演示样例:找出 /etc/ 底下以 cron 为开头的文件名称的文件 [root@instructor Desktop]# ls /etc/cron ...
- 8个免费且实用的C++ GUI库(转载)
原文链接:http://zoomzum.com/8-free-and-useful-c-gui-libraries/ 作者的话:C++标准中并没有包含GUI,这也使得C++开发图形化界面需要依赖于 ...
- ubuntu MySQL安装和设置
1. apt-get install mysql-server 2. apt-get isntall mysql-client 修改 /etc/mysql/my.cnf #bind-address ...
- Java输入输出处理技术2
7.从键盘输入 从键盘输入一行字符,并显示到屏幕上. package io; import java.io.*; public class ReadAndWrite { public static v ...